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,提速很明显

文章转载自 开源中国社区[http://www.oschina.net]

相关文章
|
12天前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
|
16天前
|
JavaScript 前端开发 IDE
TypeScript取代JavaScript的优势
TypeScript取代JavaScript的优势
|
27天前
|
存储 JavaScript 前端开发
JavaScript 语法
JavaScript 语法
19 5
|
23天前
|
存储 JavaScript 前端开发
|
1月前
|
JavaScript 前端开发
JavaScript语法关键点:变量用`var`、`let`、`const`声明
【6月更文挑战第22天】JavaScript语法关键点:变量用`var`、`let`、`const`声明;七种数据类型包括`Number`、`String`、`Boolean`、`Null`、`Undefined`、`Symbol`和`Object`;运算符如算术、比较、逻辑和赋值;流程控制有`if...else`、`switch`和各种循环。了解这些是JS编程的基础。
37 3
|
1月前
|
JavaScript 前端开发
JavaScript进阶-ES6新特性概览:let, const, arrow functions
【6月更文挑战第19天】ES6的`let`和`const`带来了变量声明的变革,解决了`var`的提升和作用域问题。`let`有块级作用域,避免了循环中的变量共享;`const`声明常量,值不可变但内容可变(如数组和对象)。箭头函数简化了函数定义,其`this`绑定遵循上下文,不具自己的`arguments`。这些特性提升了代码质量和可读性。
|
1月前
|
SQL 自然语言处理 前端开发
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
22 2
|
21天前
|
前端开发 JavaScript
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
27 0
|
22天前
|
JavaScript
Js,定义数组的方法,let 数组名 = [数据1,数据2,........,数据n],取值方法,数组名[x],arr[0],let sum sum = sum + arr[0],求和的写法,平均值
Js,定义数组的方法,let 数组名 = [数据1,数据2,........,数据n],取值方法,数组名[x],arr[0],let sum sum = sum + arr[0],求和的写法,平均值
|
23天前
|
JavaScript 前端开发