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 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
js的onload事件及初始化按钮事件示例代码
Sep 25 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
详解node.js的http模块实例演示
Jul 12 Javascript
vue如何搭建多页面多系统应用
Jun 17 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获取MSN好友列表类的实现代码
2013/06/23 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
php预定义变量使用帮助(带实例)
2013/10/30 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
JavaScript中Object基础内部方法图
2018/02/05 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
理解Python中的With语句
2016/03/18 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
python字典改变value值方法总结
2019/06/21 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
shell程序中如何注释
2012/01/28 面试题
化学相关工作求职信
2013/10/02 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
公司合作意向书
2014/04/01 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang
JS封装cavans多种滤镜组件
2022/02/15 Javascript
Java设计模式之代理模式
2022/04/22 Java/Android