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 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
jquery中each方法示例和常用选择器
Jul 08 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
js实现4个方向滚动的球
Mar 06 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 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
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
基于mysql的bbs设计(五)
2006/10/09 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
python django model联合主键的例子
2019/08/06 Python
Python简易版图书管理系统
2019/08/12 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
优秀毕业生自荐信范文
2014/01/01 职场文书
白酒市场营销方案
2014/02/25 职场文书
竞争上岗实施方案
2014/03/21 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
授权委托书范文
2014/07/31 职场文书
迎新生标语大全
2014/10/06 职场文书
冰雪公主观后感
2015/06/16 职场文书
朋友离别感言
2015/08/04 职场文书
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
基于redis+lua进行限流的方法
2022/07/23 Redis