JavaScript6 let 新语法优势介绍

更新时间：2016年07月15日 09:21:31 投稿：mrr

这篇文章主要介绍了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 ，提速很明显

以上所述是小编给大家介绍的JavaScript6 let 新语法优势，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

微信小程序实现图片上传功能实例（前端+PHP后端）
这篇文章主要给大家介绍了关于微信小程序实现图片上传功能的相关内容，文中详细介绍了前端+PHP后端的示例代码，对大家的理解和学习具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2018-01-01
js 与 php 通过json数据进行通讯示例
这篇文章主要介绍了js与php通过json数据进行通讯的具体实现,需要的朋友可以参考下
2014-03-03
JavaScript数组操作详解
本文主要介绍了JavaScript的数组操作，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
JS使用jsBarcode生成条形码(一维码)简单实例
JsBarcode是一个用JavaScript编写的条形码生成器,它支持多种条形码格式,可在浏览器和Node.js中使用,下面这篇文章主要给大家介绍了关于JS使用jsBarcode生成条形码(一维码)的相关资料,需要的朋友可以参考下
2023-03-03
动态创建按钮的JavaScript代码
本文给大家分享一段JS实例代码介绍动态创建按钮的方法，需要的朋友参考下本文
2016-01-01
JavaScript中的继承之类继承
在JS中继承是一个非常复杂的话题，比其他任何面向对象语言中的继承都复杂得多。接下来通过本文给大家介绍JavaScript中的继承之类继承，感兴趣的朋友一起看看吧
2016-05-05
JavaScript数组Array对象增加和删除元素方法总结
这篇文章主要介绍了JavaScript数组Array对象增加和删除元素方法,实例总结了pop方法、push方法、splice方法、concat方法等的使用技巧,需要的朋友可以参考下
2015-01-01
老生常谈js动态添加事件--- 事件委托
下面小编就为大家带来一篇老生常谈js动态添加事件--- 事件委托。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
详解 javascript中offsetleft属性的用法
本章节通过代码实例介绍一下offsetleft属性的用法，需要的朋友可以做一下参考。
2015-11-11
JavaScript实现的MD5算法完整实例
这篇文章主要介绍了JavaScript实现的MD5算法,以完整实例形式分析了基于JavaScript实现MD5算法的具体步骤与相关技巧,需要的朋友可以参考下
2016-02-02