• JS高级程序设计拾遗


        《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();
  • 相关阅读:
    关注底层:IL部分
    腾讯与敏捷开发(zz)
    关于腾讯敏捷框架TAPD (ZZ)
    最新苹果官方iphone sdk 与 xcode 下载网址汇总
    松山湖之行
    [zz]在C#程序中实现插件架构
    华为与敏捷(zz)
    OK6410 tftp下载内核、文件系统以及nand flash地址相关整理、总结
    T400换风扇解决开机fan error问题
    校园故事一个非典型工科男的电子设计之路(整理版)
  • 原文地址:https://www.cnblogs.com/zhansu/p/6366929.html
Copyright © 2020-2023  润新知