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 相关文章推荐
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
d3.js实现立体柱图的方法详解
Apr 28 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
TypeScript中的方法重载详解
Apr 12 Javascript
javascript实现蒙版与禁止页面滚动
Jan 11 Javascript
vue+Element-ui前端实现分页效果
Nov 15 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 传值赋值与引用赋值的区别
2010/12/29 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
php桥接模式应用案例分析
2019/10/23 PHP
js用图作提交按钮或超连接
2008/03/26 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
在Django的URLconf中使用命名组的方法
2015/07/18 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
python判断设备是否联网的方法
2018/06/29 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
介绍一下grep命令的使用
2012/06/28 面试题
Java编程面试题
2016/04/04 面试题
新年抽奖获奖感言
2014/03/02 职场文书
关于长城的导游词
2015/01/30 职场文书
毕业实习感受与体会
2015/05/26 职场文书
总经理致辞
2015/07/29 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL
swagger如何返回map字段注释
2021/07/03 Java/Android
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫