JS高级程序设计拾遗

时间：2021-06-20 18:42:57

《JavaScript高级程序设计（第三版）》反反复复看了好多遍了，这次复习作为2017年上半年的最后一次，将所有模糊的、记不清的地方记录下来，方便以后巩固。

0. <script>元素属性

async表示立即下载脚本，但不应该妨碍页面中其他操作；

defer表示延迟到文档完全被解析和显示之后再执行。这两个属性都仅适用于外部脚步，而且现实中脚步不一定按顺序执行。指定async属性的目的是不让页面等待脚本下载和执行。

最好只包含一个延迟脚本，把延迟脚本放在页面最底部仍然是最佳选择。

1.Number类型

　　1.1  NaN即非数值可以用isNaN()来确定。isNaN()在接收到一个值后，会尝试将这个值转换为数值，任何不能转换为数值的值都会导致isNaN()返回true。

alert(isNaN(NaN))     //true

alert(isNaN("10"))   //false

alert(isNaN("blue"))    //true

　　1.2 数值转换

　　上例讲到的isNaN()会将值转换为数值，那是怎么转换的呢。JS所有数值转换，默认情况下都是调用Number()转型函数的。

　　Number()、parseInt()、parseFloat() 区别： Number()参数可以为任何数据类型，后两个参数只能为字符串（parseInt()还可以多一个转换基数的参数；Number()对空字符串返回0，后两个则返回NaN，原因是parseInt()对于第一个字符不是数字字符或负号，就会返回NaN；对于参数是字符串，Number()要求字符串只包含数字才转换成数值（空字符串转为0），否则转换为NaN,而后两个函数没这个要求。另外，对于Number()，null转为0，undefined转为NaN

2.逻辑与操作符（&&）的理解  （《JS权威指南》）

　　“&&”运算符有三个层次的理解。第一层理解是，当操作数都是布尔值时，进行布尔操作，运算结果总是布尔值true或false。第二层理解是，当有操作数不是布尔值时，则对真值和假值进行布尔操作，并返回相应的真假值，

因此“&&”并不总返回true和false。第三层理解是对上面提到的真假值的补充，运算符首先计算左操作数的值，如果为假值，则整个表达式结果一定也是假值，此时“&&”简单返回左操作数的值，而并不会对右操作数进行计算；反过来，

若左操作数是真值，那么整个表达式结果依赖于右操作数的值，“&&”计算右操作数的值并将其返回作为整个表达式的计算结果。其实，第一层理解也可归并到第三层理解中。

        var a = 0;

        // var a = null;

        // var a = 3;

        var b = 5;

        var c = a && b;

        console.log(c); // a=0时，结果是0；a=null时，结果是null；a=3时，结果是5.

3.加法操作符（+） （《JS权威指南》）

　　如果其中一个操作数是对象，对该对象进行到原始值的转换；

　　进行对象到原始值的转换后，如果其中一个操作数是字符串，则另一个操作数也转换为字符串，然后进行字符串连接；

　　否则，两个操作数都转换为数字（或NaN），然后进行加法操作;

        "1" + 2; //"12"

        1 + {}; //"1[object Object]" :对象转换为字符串后进行拼接

        true + true //2 :布尔值转换为数字

        2 + null //2 :null转换为0

        2 + undefined //NaN :undefined转为NaN

4.关系操作符 （小于< ，大于>等） 发现这部分内容还是《JS权威指南》讲得好

　　如果操作数为对象，进行对象到原始值的转换；

　　在对象转为原始值后，如果两个操作数都是字符串，则进行字符编码的比较；

　　在对象转为原始值后，如果至少一个操作数不是字符串，那么两个操作数都转为数值比较;

　　如果一个操作数（或转换后）是NaN,则返回false;

5.相等操作符（==）、全等操作符（===）

　　===比较简单，要求两个值的类型相同，否则不相等。下面全部是==的规则。

　　null与undefined相等；

　　如果一个操作数是数字，另一个是字符串，则字符串转数字后比较；

　　如果一个操作数是布尔值，则转为数字后比较；

　　如果一个操作数是的对象，另一个操作数不是，则将对象转为原始值后比较；

6.引用类型操作

　　6.1 instanceof 检测对象类型

    var a = {};

    console.log( a instanceof Object); //true

　　6.2 Array.isArray 检测是否是数组

    var a = [];

    console.log(Array.isArray(a)); //true

　　6.3 数组push时推入参数的顺序

　　push()参数靠前的放在数组靠前的位置

    var a = [];

    a.push('11', '22')

    console.log(a); // ["11", "22"]

　　6.4数组unshift时推入参数的顺序

　　unshift()参数靠前的放在数组靠前的位置

    var a = [];

    a.unshift('11', '22');

    a.unshift('33');

    console.log(a); // ["33",11", "22"]

7.URI编码方法

　　Global对象的encodeURI()和encodeURIComponent()方法可以对URI进行编码。encodeURI主要用于给整个URI编码，encodeURIComponent可以对URI的部分

进行编码。区别是encodeURI不会对本身属于URI的特殊字符进行编码，如冒号、问号、井字符，而encodeURIComponent会对任何非标准字符进行编码。通过

decodeURI和decodeURIComponent可以进行相应的解码。

    var uri = "http://www.baidu.com/illeagl value.html#start";

    console.log(encodeURI(uri)); //http://www.baidu.com/illeagl%20value.html#start

    console.log(encodeURIComponent(uri)); // http%3A%2F%2Fwww.baidu.com%2Filleagl%20value.html%23start

8.JSON对象的解析与序列化

　　ES5的JSON对象有2个方法，JSON.stringify()用于把js对象序列化为JSON字符串，JSON.parse()用于把JSON字符串解析为JS值。

9.JSONP

　看了高程后，看这篇文章

10. 浏览器链接指向新url后发生的一系列过程。虽然不是JS的东西，但作为网络基础，还是在这儿写一下

　　假设链接https://www.baidu.com  其IP地址是166.166.166.166。

　　1）浏览器分析url，并解析出服务器的主机名www.baidu.com

　　2）浏览器向DNS请求解析www.baidu.com的IP地址

　　3) DNS解析出IP地址为166.166.166.166

4）浏览器与服务器建立TCP链接

5）浏览器向服务器发送一条HTTP请求报文

　　6）服务器向浏览器回送一条HTTP响应报文

　　7）释放TCP链接

　　8）显示文档

11.DOM操作

    // 获取元素

    document.getElementById('id');

    elem.getElementsByTagName('tag');

    document.getElementsByName('name');

    // html5新增

    elem.getElementsByClassName('class');

    // 获取属性

    elem.getAttribute('attr');

    // 设置属性

    elem.setAttribute('attr', value);

    // 移除属性

    elem.removeAttribute('attr');

    // 子节点列表 childNodes有浏览器兼容问题，需要对节点类型进行判断，推荐用children

    element.childNodes;

    // nodeType属性 node.nodeType 1：元素节点 2：属性节点 3：文本节点

    // nodeValue属性 node.nodeValue

    // firstChild和lastChild

    node.firstChild==node.childNodes[0] ;

    node.lastChild==node.childNodes[node.childNodes.length - 1] ;

    // innerHTML属性 既可读又可以写

    // 创建新元素

    document.createElement(elem);

    // 将元素节点插入节点树

    // 追加子节点

    parent.appendChild(child);

    // 在已有节点前插入新节点

    node.parentNode.insertBefore(newNode, node);

    // DOM没有提供在现有节点后插入新节点的方法

    // 节点的下一兄弟节点

    node.nextSibling;

    // 节点的前一兄弟节点

    node.previousSibling;

    // 替换节点

    someNode.replaceChild(newNode, oldNode);

    // 移除节点

    someNode.removeChild(oldNode);

    // 克隆节点 true 深复制， false 浅复制

    node.cloneNode(boolean);

    // 创建文本节点

    document.createTextNode(text);

    // CSS-DOM

    // 设置类名

    elem.setAttribute("class", "intro");

    elem.className;

    // DOM扩展

    // 接收一个CSS选择符，返回匹配的第一个元素

    elem.querySelector();

    // 接收一个CSS选择符，返回匹配的NodeList

    elem.querySelectorAll();

相关文章