ES6深入理解之“let”能替代”var“吗?_网络技术

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

发布时间 - 2026-01-11 02:05:35 点击率：次

前言

我已经使用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

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

总结

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

# es6 # let与var的区别 # var # let # es6中var与let的区别 # JavaScript ES6中const、let与var的对比详解 # JS变量中有var定义和无var定义的区别以及es6中let命令和const命令 # 深入浅出ES6之let和const命令 # ES6新特性一： let和const命令详解 # ES6入门教程之let和const命令详解 # ES6入门教程之let、const的使用方法 # ES6中let 和 const 的新特性 # 详解ES6中的let命令 # 深入理解ES6中let和闭包 # ES6 let和const定义变量与常量的应用实例分析 # 可以使用 # 你想要 # 打印出来 # 都是 # 我想 # 就会 # 将会 # 都能 # 当你 # 这个问题 # 将其 # 很简单 # 深思熟虑 # 提升到 # 仅仅是 # 解决问题 # 不支持 # 这篇文章 # 不仅如此 # 报错

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Debian LibOffice如何进行网络共享

下一篇：杭州网站设计公司：打造您的专属网络形象

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Debian LibOffice如何进行网络共享

下一篇：杭州网站设计公司：打造您的专属网络形象