博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
了解JavaScript核心精髓(一)
阅读量:5231 次
发布时间:2019-06-14

本文共 5787 字,大约阅读时间需要 19 分钟。

ES5

1.声明脚本

2.DOM与BOM

   DOM(Document Object Model)指文档对象模型。

   BOM(Borwser Object Model)指浏览器对象模型。

PS:DOM基本操作

        查找节点  document.getElmentById

        创建节点  element.creatElement,document.body.appendChild

        删除节点  element.remove

        修改节点  element.setAttributeNode

        windows.top指顶端对象。

        windows.parent指父对象。

3.var与不var的区别

//表示全局变量var a = 89function test() {  //全局变量a重新赋值。  // a = 80  //函数内部定义一个变量a  var a = 80  console.log(a)}test()console.log(a)

PS:js是弱数据类型,意思是不需要指定数据类型是什么,数据类型是由js引擎决定的。

4.js 比较运算符

console.log(2 > 1) //trueconsole.log(6 < 2) //falseconsole.log(2 <= 4) //trueconsole.log(2 >= 4) //false//==比较值是否相等,需要自动转换类型再比较。//===精准比较值与类型是否相等,不需要自动转化类型再比较。console.log('2' == 2) //trueconsole.log('2' === 2) //falseconsole.log('2' != 2) //falseconsole.log('2' !== 2) //true//null是引用为空时(如对象)//undefined是数值为空时(如普通变量)console.log(typeof null) //objectconsole.log(typeof undefined) // undefinedconsole.log(null == undefined) //true,因为null是空白的对象引用,空白的对象引用就等于没有定义,所以相等。console.log(null === undefined) //false,因为null是null类型,undefined是undefined类型,类型不匹配,所以不相等。

5.js逻辑运算符

var expr = 1//expr表达式为(null、NaN、0、''、undefined)会转为falseif (expr) {  console.log(true)} else {  console.log(false)}// truevar expr1 = 1var expr2 = 1// &&、||、!、!! 逻辑运算符,逻辑运算符结果类型不一定是boolean,可以是任意类型。console.log(expr1 && expr2) // 1。// &&、|| 具有短路功能,第一个表达式不满条件(false),后面的表达式将被忽略。console.log(true && false) //falseconsole.log(false && true) //falseconsole.log(false || true) //trueconsole.log(true || false) //true// !、!! 逻辑运算符console.log(!true) // falseconsole.log(!!true) // true// &、| 既是逻辑运算符,也是位运算符(按位操作符)。console.log(true & false) //0,false 转换为 0,true 转换为 1,0 & 1 = 0console.log(true | false) //1

5.js中this关键字

this用法等于public(全局)

    function Person(){

        var name ="abc";//私有
        this.name ="abd3"//共有
    }

this指向上一个对象,最后调用的的对象。

6.js闭包

闭包就是能够读取其他函数内部变量的函数。外部是不能访问函数内部的。

7.prototype和__proto__区别

prototype是只属于function的,显式属性,而__proto__属于所有object的,隐式属性。

function的prototype属性表示该function所创建的对象的原型。

PS:构造器其实就是一个普通的函数。当使用 new 操作符来作用这个函数时,它就可以被称为构造方法(构造函数)。

         funtion的引用就是原型。

         原型指向自己的原型(prototype)所形成一级一级的链结构就是原型链。

8.编码转化

//将字符串转换成URL编码var myString = 'hello all'var code = encodeURI(myString)var str = decodeURI(code)console.log(code) //hello%20allconsole.log(str) //"hello all"

10.js innerhtml 与outerhtml区别

    innerhtml 设置或获取位于对象起始和结束标签内的 HTML

    如:<div><span>innerhtml</span></div>

    outerhtml 设置或获取对象及其内容的 HTML 形式

    如:<div><span>innerhtml</span></div>

12.js中的document对象与window对象区别

   document当前页面所有的,包括超出的部分。

   window当前窗口所有的,超出的部分不计。

13.js性能优化

    能用原生js就用js代码写,减少js库(jquery)依赖。

    避免使用 with 关键字与eval() 函数。(不精准定位查询,整体遍历查询,耗资源)。

    将重复的表达式赋值精简到最小 (建议使用三目运算符)。

    在复杂对象中使用索引来查找数组 (快速定位,节约查询时间)。

    少用 document.write()函数(文档流输入输出也是很占资源的)。

15.js的严格模式 

    在函数里面加"use strict";

    比如:使用严格模式下,变量都必须先用var命令声明,然后再使用。

    好处就是保证代码的严谨性。(慎用)

16.js代码懒加载

     <script>

     var script = document.createElement ("script");

     script.type = "text/javascript";
     script.src = "script.js";
     document.getElementsByTagName("head")[0].appendChild(script);

     </script>

     优点:无阻塞,异步加载js代码快。

17.自动创建函数并运行   

     无参数

    (function(){

         var a = 1;

         var b = 2;    

         alert(a+b);  

      })();  

 

     有参数

     (function(a,b){

           var result = a+b;

           return result;

     })(1,2);

 

PS:匿名函数:没有定义方法名的函数。

      如:function (){

           };

      有名函数:定义方法名的函数。

      如:function aa(){

           };

      _xxx(){}  //一种编程风格,表示私有。

18.链式调用(jquery为例)

     如:$("p").append("文本颜色").css("color","red");

19.call与apply、bind区别

     call()     调用一个对象的一个方法,以另一个对象替换当前对象。  ( 我替换别人的方法)

     apply()  应用某一对象的一个方法,用另一个对象替换当前对象。   (别人的方法交给我去使用)

     bind()    创建一个新函数,把新函数的tihs传给指定对象。

PS:es6中使用箭头函数取代bind()。

20.setInterval与setTimeout区别

     setTimeout超时执行一次。

     setInterval每隔一段时间执行一次。

21.typeof与instanceof区别

instanceof 判断对象的原型链是否存在于某个构造函数prototype属性上,返回一个布尔型。

typeof 判断数据类型,返回一个字符串,返回值为"number"、"string"、"boolean"、"object"、"function" 和 "undefined"。

PS:简单类型使用typeof,复杂类型使用instanceof,因为typeof无法确定引用对象中具体类型。

        [] instanceof Array; // true

        typeof []; //object

22.js作用域

     全局变量和局部变量。

23.target与currentTarget区别

     target一般指当前元素点击事件流。

     currentTarget一般指当前元素的父元素事件流。

24.ajax缓存

    请求一些长期不变的数据可以缓存起来,提高的页面性能。比如城市级联的数据。

PS:get 请求适合采用缓存。

25.html调用js方法。

26.回调地狱 (callback-hell)。

    指嵌套过多的回调函数。(这里讲的回调函数一般指http请求的回调函数,等待数据请求回来才执行的函数)

    如:getData(function(x){

                nextFuntionA(x, function(y){
                       nextFuntionB(y, function(z){
                                   //do something
                       });
                 });
            });

 

27.js垃圾回收机制
垃圾回收机制指的是高级编译器对内存进行自动分配与释放。
A();//函数A执行完,会被垃圾回收器回收内存。var c=A(); //不会被回收,变量c引用函数A。c=null // 变量c置空,函数A就会被垃圾回收器回收内存
28.Dom事件委派机制
     事件委派是利用事件冒泡原理,通过公共父级dom去响应UI事件。
    <button οnclick="addLi()">添加li元素</button>
    <ul οnclick='getEventType(event)'>
        <li>1</li>
        <li>2</li>
        <li>3</li>
   <ul>
   <script type="text/javascript">
        function getEventType(e){
            console.log(e.target.innerText);
        }
       var ulElement = document.getElementsByTagName('ul')[0]
       function addLi(){
            var ulLength = ulElement.children.length
            var liElement = document.createElement('li')
            liElement.innerText= ulLength
            ulElement.appendChild(liElement)
      }
   </script>
 
PS: 事件冒泡是点击当前元素触发的事件是由子元素到父元素依次触发事件。
         事件捕获是点击当前元素触发的事件是由父元素到子元素依次触发事件。
 
         eventTarget.addEventListener()默认是事件冒泡,如需要使用事件捕获,需要设置eventTarget.addEventListener(type,listener,true);
 

补充:

1.js递归函数。(自己调用自己)

 如:function count(i) {

             if (i < 10) {
                   console.log(i)
                   count(i + 1)
             } else {
                   console.log("数到10了")
             }
        }
        count(0)

 

PS: 递归函数一定要添加判断条件,否则就会报错出现内存溢出问题。

斐波那契数列(这个数列从第3项开始,每一项都等于前两项之和,即1, 1, 2, 3, 5, 8, 13)

       举例:求第四项的值

              var num1 = 1;

              var num2 = 1;

              for(var i = 3; i <= 4; i++) {

                      var temp = num2; 

                      console.log("第" + (i - 2) + "次,temp=" + temp)

                      num2 = num1 + num2; 

                      console.log("第" + (i - 2) + "次,num2=" + num2)

                      num1 = temp; 

                      console.log("第" + (i - 2) + "次,num1=" + num1)

              }

              console.log("结果,num2=" + num2);

2.js数字格式化(加逗号)

//方法一,使用正则表达

 function changeNum(num) {

         return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
}

//方法二,使用循环

function changeNum(num) {

       var result = '', counter = 0;
       num = (num || 0).toString();
       for (var i = num.length - 1; i >= 0; i--) {
              counter++;
              result = num.charAt(i) + result;
              if (!(counter % 3) && i != 0) {

                    result = ',' + result;

              }

      }
      return result;
}

 

 

转载于:https://www.cnblogs.com/Sroot/p/6830855.html

你可能感兴趣的文章
iOS打印Debug日志的方式
查看>>
ANE-调用原生地图注意点
查看>>
HttpClient-post请求,含图片
查看>>
chm内容链接地址错误修复步骤
查看>>
COGS 1406. 邻居年龄排序[Age Sort,UVa 11462](水题日常)
查看>>
2018二月实现计划成果及其三月规划
查看>>
什么时候使用依赖库的形式导入项目
查看>>
android 设置Dialog的宽度
查看>>
std::thread join和detach区别
查看>>
定时器(了解)
查看>>
Javascript操作Dom对象
查看>>
C#之Socket的简单使用
查看>>
vsftp登录时间太长的解决办法
查看>>
Mybatis整合Spring
查看>>
安卓NDK操作sqlite3
查看>>
维度-共享维度
查看>>
jQuery extend 函数
查看>>
Swift课程大纲
查看>>
BZOJ1458: 士兵占领
查看>>
点击文字使RadioButton被选中
查看>>