ES6深入理解之“let”能替代”var“吗?

前言

我已经使用ES2015(ES6)的语法编写JavaScript程序很久了，并且喜欢上它提供的新特性带来的优雅和简洁。我最习惯的就是不再使用var,而是let/const。我想当然的以为let仅仅是var的替代者，而事实上let还为我们提供了更加精细的作用域。

我大多数时候使用的变量都是用const来声明，因为如果尝试对使用const声明的变量进行修改，将会报错。这可以避免不小心将一个不该修改的常量值修改。但是，我们还是需要可以声明可以被修改的变量，比如在循环里面的计数器，我们需要不断地对改变了加1。可是为什么我们使用let而不是var呢？

最简单的答案就是let提供块作用域(block-scoping)，这会比var提供的以函数为作用域有更加精细化的控制。为了便于理解，我来用一个经典的前端工程师面试的问题来描述两者的区别。

问题: 在下面的例子中，请说出控制台的打印结果。

var callbacks = [];
(function() {
 for (var i = 0; i < 5; i++) {
 callbacks.push( function() { return i; } );
 }
})();
console.log(callbacks.map( function(cb) { return cb(); } ));

我们将for循环执行五次，每次将一个函数push到callbacks数组中。最后callbacks数组里面的每一个函数的执行结果打印出来。

一个新手工程师经过深思熟虑可能会回答[0, 1 , 2, 3, 4], 然而却掉入了JavaScript的”hoisting陷阱”。

只有当你理解了hoisting， 才能给出正确的答案[5, 5, 5, 5, 5]。

var callbacks = [];
(function() {
 var i;
 for (i = 0; i < 5; i++) {
 callbacks.push( function() { return i; } );
 }
})();
console.log(callbacks.map( function(cb) { return cb(); } ));

注意：上面的代码，JavaScript将变量提升到函数定义的顶部，经过整个for循环，callbacks里面存储的5个函数指向的同一个变量i的值已经是5。所以最终打印出来的值都为5。

在以前要通过各种奇淫技巧来解决这个问题，并成功返回[0, 1, 2, 3, 4], 现在我们有了let，就可以很简单解决问题：

var callbacks = [];
(function() {
 for (let i = 0; i < 5; i++) {
 callbacks.push( function() { return i; } );
 }
})();
console.log(callbacks.map( function(cb) { return cb(); } ));

因为let拥有块作用域，所以使用let声明的变量i不会被提升到函数顶部，i的作用域在for循环， 就会每次循环有独立的值。

那我们是不是应该不要使用var了呢？如果你想要一个变量拥有函数作用域，var还是很有用的。

读者提到的两个问题：

1、const声明的变量不是完全不可更改。比如：

const myNotQuiteImmutableObject = {
 thisCanBeChanged: "not immutable"
};
myNotQuiteImmutableObject.thisCanBeChanged = "see I changed it.";

但是，使用const声明可以阻止一些基本的更改，比如：

const immutableString = "you can't change me";
immutableString = "D'OH!"; // error

如果你想要完全的不可更改，可以使用Facebook提供的Immutable库。

2、老版本的浏览器不支持let。不仅如此，而且有些最新的浏览器也还没有支持let。我们可以使用Babel来避免这个问题，Babel允许你使用所有最新的JavaScript功能，然后将其翻译到甚至IE8都能支持的代码。

原文: Why You Shouldn't Use ‘var' Anymore

译者: Fundebug

为了保证可读性，本文采用意译而非直译。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • JS变量中有var定义和无var定义的区别以及es6中let命令和const命令

    JS变量中有var定义和无var定义的区别以及es6中let命令和const命令

    之前我们在写js代码的时候都知道可以用var定义全局变量和局部变量,也可以省略var,而且在非严格模式下不会报错,但是并不知道两者的区别... var x = 1; y = 4; console.log(x);//1 console.log(y);//4 console.log(window.x);//1 console.log(window.y);//4 简单测试下可以知道定义的x和y都被挂载在window对象上,变为window下的属性,这并不能说明什么... delete x; delet

  • JavaScript ES6中const、let与var的对比详解

    ECMAScript 6 新增 const 和 let 命令,用来声明变量. 声明方式 变量提升 作用域 初始值 重复定义 const 否 块级 需要 不允许 let 否 块级 不需要 不允许 var 是 函数级 不需要 允许 变量提升:const 和 let 必须先声明再使用,不支持变量提升 console.log(c1, l1, v1); // 报错 // Uncaught ReferenceError: c1 is not defined const c1 = 'c1'; let l1 =

  • ES6深入理解之“let”能替代”var“吗?

    前言 我已经使用ES2015(ES6)的语法编写JavaScript程序很久了,并且喜欢上它提供的新特性带来的优雅和简洁.我最习惯的就是不再使用var,而是let/const.我想当然的以为let仅仅是var的替代者,而事实上let还为我们提供了更加精细的作用域. 我大多数时候使用的变量都是用const来声明,因为如果尝试对使用const声明的变量进行修改,将会报错.这可以避免不小心将一个不该修改的常量值修改.但是,我们还是需要可以声明可以被修改的变量,比如在循环里面的计数器,我们需要不断地对改

  • 深入理解goto语句的替代实现方式分析

    曾几何时,goto是多么的让牛人绽放他们高超的精湛技术曾几何时,goto又变成了万恶之首曾几何时,goto只在教科书中的示例才会出现有太多的理由不让用goto,但有时,我们又想使用goto的功能,怎么办?用try/catch/finally便可实现同等于goto的功能,来看二个示例: 复制代码 代码如下: try {      // operation one      if (failed) {            throw Exception;      }      // operat

  • ES6中的箭头函数实例详解

    本文实例讲述了ES6中的箭头函数.分享给大家供大家参考,具体如下: 语法 我们先来看看箭头函数的语法: ([param] [, param]) => { statements } param => expression param 是参数,根据参数个数不同,分这几种情况: () => { - } // 零个参数用 () 表示: x => { - } // 一个参数可以省略 (): (x, y) => { - } // 多参数不能省略 (): 示例 我们再来看看一些示例,看看在

  • Javascript变量函数声明提升深刻理解

    目录 前言: 变量提升 函数提升 为什么要提升? 最佳实践 总结 前言: Javascript变量函数声明提升(Hoisting)是在 Javascript 中执行上下文工作方式的一种认识(也可以说是一种预编译),从字面意义上看,“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面,在代码里的位置是不会动的,而是在编译阶段被放入内存中会和代码顺序不一样.变量函数声明提升虽然对于实际编码影响不大,特别是现在ES6的普及,但作为前端算是一个基础知识,必须掌握的,是很多大厂的前端面试必问的

  • 详解ES6语法之可迭代协议和迭代器协议

    ECMAScript 2015的几个补充,并不是新的内置或语法,而是协议.这些协议可以被任何遵循某些约定的对象来实现. 有两个协议:可迭代协议和迭代器协议. 可迭代协议 可迭代协议允许 JavaScript 对象去定义或定制它们的迭代行为, 例如(定义)在一个 for..of 结构中什么值可以被循环(得到).一些内置类型都是内置的可迭代对象并且有默认的迭代行为, 比如 Array or Map, 另一些类型则不是 (比如Object) . Iterator 接口的目的,就是为所有数据结构,提供了

  • ES6 Symbol数据类型的应用实例分析

    本文实例讲述了ES6 Symbol数据类型的应用.分享给大家供大家参考,具体如下: Symbol,是ES6中引入的新的数据类型,表示独一无二的值.在面向对象中,每个对象都有字符串类型的属性,新方法的名字就有可能与现有方法产生冲突.Symbol的引入保证每个属性的名字都是独一无二的,这样就从根本上防止属性名的冲突. ES6之前对象属性的命名方法 var obj = { name:'Joh', 'my name': 'Johnny' } console.log(obj.name); // Joh c

  • es6函数之箭头函数用法实例详解

    本文实例讲述了es6函数之箭头函数用法.分享给大家供大家参考,具体如下: es6允许使用"箭头"(=>)定义函数. var f = v => v // 等同于 var f = function(v) { return v } 如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分. var f = () => 5 // 等同于 var f = function() { return 5 } var sum = (num1, num2) => num1

  • ES6标准 Arrow Function（箭头函数=>）

    ES6-箭头函数 0.为什么会出现箭头函数? 1.传统的javascript函数语法并没有提供任何的灵活性,每一次你需要定义一个函数时,你都必须输入function () {},这至少会出现两个问题,ES6箭头函数都圆满解决了它, 第一个问题:代码输入快了容易输错成 funciton或者functoin或者其它,但是=>这个玩意你要是再写错就只能说有点过分了. 第二个问题:节省大量代码,我们先不用管下面的ES6代码为什么这样的语法能实现同样的功能,我们就直观的感受一下代码量. ES5写法: fu

  • ES6变量赋值和基本数据类型详解

    let和const let和const不存在变量提升 变量一定要在声明后使用,否则报错. var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 10 变量i是var声明的,在全局范围内都有效.所以每一次循环,新的i值都会覆盖旧值,导致最后输出的是最后一轮的i的值. var a = []; for (let i = 0; i < 10; i++) { a[i]

  • ES6中常见基本知识点的基本使用实例汇总

    ES6中常见基本知识点的基本使用实例汇总

    目录 前言 1.字面量的增强 2.解构Destructuring 3.let和const 4.作用域 5.模板子符串 6.函数 7.展开语法 8.数值表示 9.Symbol的基本使用 10.Set 11.WeakSet 12.Map 13.WeakMap 总结 前言 学习了coderwhy的JavaScript高级语法视频课的笔记 如有错误或者不合适的地方,敬请见谅,欢迎指出和拓展,谢谢各位了 1.字面量的增强 var name = 'xxx' var age = 12 var obj = {

随机推荐