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 还是很有用的。
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库。
老版本的浏览器不支持let。不仅如此,而且有些最新的浏览器也还没有支持let。我们可以使用Babel来避免这个问题,Babel允许你使用所有最新的JavaScript功能,然后将其翻译到甚至IE8都能支持的代码。
原文: Why You Shouldn’t Use ‘var’ Anymore
译者: Fundebug
来源: https://blog.fundebug.com
ES6之let能替代var吗?相关推荐
- ES6——let、const和var的用法和区别
ES6 新增了let命令,用来声明变量,新增了const命令,用来声明常量,它们的用法类似于var. let a = 1; var b = 2; const PI = 3.14; 主要区别 块级作用域 ...
- ES6新特性 - const let var
var var生命的是函数作用域,没带var声明的变量是全局作用域,: 存在预解析,变量提升 可以对同一个变量声明多次 console.log(a); // undefined var a = 10; ...
- JS中8个常见的陷阱
译者按: 漫漫编程路,总有一些坑让你泪流满面. 原文: Who said javascript was easy ? 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原 ...
- 廖雪峰JS学习总结-函数篇
最近在刷廖雪峰的JS教程,把里面的自己不太清楚的东西在刷一遍. 教程网址:www.liaoxuefeng.com/wiki/001434- 函数的定义和调用: 如果没有return语句,函数执行完毕后 ...
- 重温ES6核心概念和基本用法
ES6在2015年6月就得以批准,至今已两年了.近一年多以来陆续看过很多ES6的资料,工作项目中也逐步的用上了很多ES6的特性(let,const,promise,Template strings,C ...
- javascript 声明变量var、let、const详解及示例
1. var.let.const概述 ES6发布前,Javascript只能通过var声明变量的方式,常量.块级变量.函数变量这些概念的差别都不能很好的体现出来,于此同时,加入你要使用或者提供一个ap ...
- ES6 学习笔记 (1)
笔记来源:廖雪峰老师的javascript全栈教程 ES6:JavaScript的标准,ECMAScript在不断发展,最新版ECMAScript 6标准(简称ES6)已经在2015年6月正式发布了, ...
- 【VUE】看完这篇文章能够了解es6特性和vue基础
Vue讲解 1.Vue.js特性简介 什么是Vue.js Vue是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只 ...
- let、const和var的区别(涉及块级作用域)
let .const和var的区别 let.const.var在js中都是用于声明变量的,在没有进行ES6的学习前,我基本只会使用到var关键字进行变量的声明,但在了解了ES6之后就涉及到了块级作用域 ...
最新文章
- 微信新版支持读取iPhone M7/M8协处理器运动数据 与好友PK一下运动量吧
- Analytic Marching:一种基于解析的三维物体网格生成方法
- php 静态方法继承,php 5.2中的类继承:重写扩展类中的静态变量?
- 设计模式C++实现(3)——装饰模式
- android静态代码扫描,android 静态代码扫描
- 用typescript开发koa2的二三事
- linux终端默认密码是多少,linux基础懂多少?两个小问题考考你
- 怎样把连续的多个commit整理成1个?
- 360内部监控系统Wonder实践之路
- 使用Regex.Replace()进行字符串的替换
- 在.Net中实现RichClient+Restful+JPA架构-探索实现
- python分离gif_python 将GIF拆分成图片方法
- 解决树莓派aplay找不到声卡的问题
- 如何用MATLAB预测未来人口,使用matlab对将来人口总数进行预测
- 初识大数据:全国社会保险大数据应用创新大赛
- requests+正则表达式爬取猫眼电影TOP100!
- 浅析携程智能客服机器人实现
- ie6,ie7常见兼容性问题总结
- Keras(三十四)Transformer模型代码实现
- Java 实现分页功能
热门文章
- Robust.ai 获得 1500 万美元融资,嘴炮 Gary Marcus 也难逃真香定律
- 程序员,别逼自己刷题了!每天花10分钟做这件事,Python 能力暴增!
- 《原力计划【第二季】》第 8 周周榜揭晓!!!
- 看过无数 Java GC 文章,这 5 个问题你也未必知道!
- JavaScript 你必须了解的主流趋势!
- 华为Mate Xs预约超53万,售价16999元;微软前工程师因盗窃数字货币被判20年;FSF将推代码托管平台 | 极客头条...
- 为什么5G标准制定,非得“你死我活”?
- 漫画:大厂总体 SaaS 化部署,到底什么是 IaaS、PaaS 和 SaaS?
- 开发者强势围观!Gartner 发布 2020 年十大战略科技发展趋势
- 优秀的代码永垂不朽!