JavaScript6 let 新语法优势介绍


Posted in Javascript onJuly 15, 2016

最近看国外的前端代码时,发现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 新语法优势,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
javascript实现的简单计时器
Jul 19 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
AngularJS内建服务$location及其功能详解
Jul 01 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
基于ajax实现上传图片代码示例解析
Dec 03 Javascript
简单实现轮播图效果的实例
Jul 15 #Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 #Javascript
JavaScript计算器网页版实现代码分享
Jul 15 #Javascript
js实现楼层效果的简单实例
Jul 15 #Javascript
基于JavaScript实现轮播图代码
Jul 14 #Javascript
js轮播图代码分享
Jul 14 #Javascript
jQuery中deferred对象使用方法详解
Jul 14 #Javascript
You might like
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
php 无限分类的树类代码
2009/12/03 PHP
php实现异步数据调用的方法
2015/12/24 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
详解Python中for循环是如何工作的
2017/06/30 Python
python pandas修改列属性的方法详解
2018/06/09 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
python中判断文件结束符的具体方法
2020/08/04 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
如何利用cmp命令比较文件
2016/04/11 面试题
12岁生日演讲稿
2014/05/14 职场文书
2015大学生实训报告
2014/11/05 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书