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,提速很明显

  • 相关阅读:
    1128项目跟进
    冲刺一 (day 3)
    1118 冲刺1-需求文档(初稿)
    1117 新冲刺 day1
    0622 总结与回顾
    0621 第三次冲刺
    0617 主存空间的分配和回收
    学习进度条
    软件工程学期总结
    学术诚信与职业道德
  • 原文地址:https://www.cnblogs.com/ExMan/p/6761185.html
Copyright © 2011-2022 走看看