zoukankan      html  css  js  c++  java
  • JavaScript6 新语法 let 有什么优势

    最近看国外的前端代码时,发现ES6的新特性已经相当普及,尤其是 let,应用非常普遍

    虽然 let 的用法与 var 相同,但不管是语法语义上,还是性能上,都提升了很多,下面就从这两方面对比一下

    语法>>

    for(var i=0; i<2; i++){
    
    console.log('outer i: ' + i);
    
    for(var i=0; i<2; i++){
    
    console.log('inner i: '+i);
    
    }
    
    }

    这是一个常见的嵌套循环,都定义了变量 i 来计数,执行结果如下:

    outer i: 0
    
    inner i: 0
    
    inner i: 1

    可以看到,外层循环被打断了,因为 i 的值被内层循环修改了,通常的解决方法是内层循环中使用其他的变量,但有可能一不小心就出错了

    现在把 var 换成 let

    for(let i=0; i<2; i++){
    
    console.log('outer i: ' + i);
    
    for(let i=0; i<2; i++){
    
    console.log('inner i: '+i);
    
    }
    
    }

    输出结果为:

    outer i: 0
    
    inner i: 0
    
    inner i: 1outer i: 1
    
    inner i: 0
    
    inner i: 1

    很正常,内外层没有任何影响,因为 let 使变量的作用域只在自己所在块儿之内

    >>
    示例2

    console.log(a);
    var a = 'hi';

    输出结果为 undefined,执行 log(a) 是在声明变量之前,为什么没有报错?因为这两行代码实际的效果是:

    var a;console.log(a);
    a = 'hi';

    在解析JS代码时,会把变量的声明提示到开始位置,这个方式也比较让人迷惑

    改用 let 后,就没有这个问题了,会直接报错

    console.log(a); // Uncaught ReferenceError: a is not definedlet 
    a = 'hi';

    性能做一个简单的测试

    var start = +new Date();
    
    for(var i = 0;i<1000000;i++){
    
    var num = 123;
    
    var str = 'abc';
    
    var obj = {key:'value'};
    
    var arr = ['bill','dell'];
    
    }
    
    var end = +new Date();
    
    console.log(end - start);

    在Firefox下的执行结果平均为 53ms

    改为 let

    'use strict'
    
    var start = +new Date();
    
    for(var i = 0;i<1000000;i++){
    
    let num = 123;
    
    let str = 'abc';
    
    let obj = {key:'value'};
    
    let arr = ['bill','dell'];
    
    }
    
    var end = +new Date();
    
    console.log(end - start);

    结果平均为 5ms,提速很明显

  • 相关阅读:
    毕业季–遗言
    Storm 疑难杂症。
    Python3.2 安装 MySQLdb
    apk 文件可下载配置
    'GBK' is not a supported encoding name. For information on defining a custom encoding, see the docum
    croe 增加配置文件。
    postman 特殊字符被转义,如 参数+号变成了空格
    websocket 学习
    Rhino 基于java的javascript实现
    SJS(simple javascript)html5开发扩展库
  • 原文地址:https://www.cnblogs.com/ExMan/p/6761185.html
Copyright © 2011-2022 走看看