用 const 还是用 let?
ES6 里新增了两种声明变量的方式,let 和 const,加上原来的 var,一共就有三种方式来声明变量了。那到底该用哪个呢?关于“尽可能不用 var” 这一点,大家应该没有什么意见分歧(其实还是有少数人不这么想的),关于“是用 let 还是用 const”,社区里主要有两种不同的观点:
1. 默认全用 let,只在符合一些写代码的人的主观判断条件的时候用 const,下面举个这样的“主观判断条件”的例子(实际代码中用到 const 的几率大概会是 0.1%):
- 你能 100% 确定该变量永远不会在其它的代码行里被重新赋值,但是该变量的初始值有可能在未来会被调整(有点配置项的意思),且
- 该变量的初始值是个数字字面量(或者多个数字组成的数学运算表达式)、字符串字面量、布尔字面量、数组字面量、对象字面量、正则字面量、symbol "字面量"(打引号是因为 symbol 其实没有字面量),且
- 该变量是个全局变量,或者是模块内的全局变量
代码举例:
const VERSION = 2
const TIMEOUT = 10000 const MB = 1024 * 1024
const DAY = 24 * 60 * 60 * 1000 const COLOR = "rgb(255,255,255)"
const HTMLNS = "http://www.w3.org/1999/xhtml" const BUTTONS = ["left", "middle", "right"]
const SIDES = ["left", "right", "top", "bottom"]
2. 默认全用 const,只有该变量需要被重新赋值才用 let (实际代码中用到 const 的几率大概会是 95%),和上面举的三个主观判断条件对比一下差异:
- 不能 100% 确定该变量永远不会被重新赋值(可能只是现在是没被重新赋值,说不定未来会),或者
- 该变量的初始值不是字面量,比如说是个函数调用表达式,或者
- 该变量是个局部变量
第一种用法是非常主观的,比如你用 const 的判断条件有可能就和我上面举的不一样,比如你也许觉得局部变量也可以用 const ?或者你觉的数组和对象是可变的值,怎么能用 const 呢?因为很主观,所以一个团队的代码风格很难达成一致,甚至只有你一个人维护的代码,const 的用法在不同的时间内也没有统一的规律,因为可能连你自己都没有明确的想过:“什么时候我应该用 const”,说白了就是“看心情”。而第二种用法是非常客观的,简单直接,没有含糊不清的地方,如果采用这种用法,至少团队代码风格的统一是不成问题的。
ES6 之前你有没有写过或者见过类似下面这样的代码:
var ids = document.getElementById("ids").value // 多个 id 组成的字符串,比如 "100 101 102"
ids = ids.split(" ") // 拆分成数组
ids.forEach(...
ids 这个变量的类型从字符串变成了数组,但变量名却没变(写代码的人懒的想新名字),这被认为是一种不好的编码风格。如果有“默认都用 const”的风格约定(第一行已经写了 const ids),会迫使写代码的人在第二行想一个新的变量名(当然他也有可能把一行的 const 改成 let),而默认用 let 的风格不会让人有种迫使感(当然用 let 的人也可能根本不需要迫使感就会主动想一个新的名字,看人)。
除了上面说的这两个“默认用 const” 的优点,还有人说默认用 const 比用 let 能让代码更有可读性,更语义:读代码的人看一个变量的声明方式就知道它在下面会不会被重新赋值。但这些都是从代码风格上说事的,代码风格是很主观的一个东西,有人觉的好,有人并不觉的不好,你很难拿着这样的优点去说服默认用 let 的人。比如他们可能会回击说:“我们团队有详细的风格指南,规定了什么时候用 const,代码风格统一不是问题”(第一个优点没了);“同样是有风格指南,我们团队的人不会复用不该复用的变量名”(第二个优点没了);“let 比 const 短”(你反而无言以对,被击败)。
有没有更有说服力的优点呢,比如能不能举个“默认用 const 能够避免,而默认用 let 避免不了的 bug” 的代码实例呢?下面我构思了一个:
let path = require("path") // 这里 path 是个全局变量
/*
这里有很多代码
*/
function bar() {
let path = "." // 这里 path 是个局部变量
/*
这里有很多代码
*/
if (this.isInProduction) { // 只在生产环境中执行的代码
path = "~" // 为局部变量 path 重新赋值
}
/*
使用局部变量 path 的代码
*/
}
假设这是一段运行正常的代码, path 是个全局变量,同时又是个 bar 函数的局部变量。某天有人重构 bar 函数的时候认为 path 这个局部变量起的不好,和全局变量冲突了,应该换了个名字,然后把 bar 函数里面声明 path 的地方和使用 path 的地方的 path 都替换成了 filePath,但不小心漏掉了 path = "~" 这一行里的 path,本地测试没问题,上线出了故障,好心办了坏事啊。
如果这个全局变量 path 是用 const 定义的话。。。也并不能发现这个 bug。为什么呢,请看我的上篇文章,是因为关于 const,ES6 有个设计缺陷,就是为 const 变量重新赋值不是个静态错误。但是如果你同时使用了 ESLint 并开启了 no-const-assign 规则,这个线上问题就能被扼杀在萌芽状态:

总结:默认用 const 可以带来一些代码风格上的好处,如果配合 Lint 工具还可以避免某些意外的 bug,但如果不使用 Lint 工具,相反可能会造成一些意外的 bug(比如上篇文章中开头举的)。不管是可能造成的 bug,还是可能避免的 bug,都是些 edge case,并不常见,所以很大程度上,选择默认用 const 还是 let 仍是一件很主观的事。
ES6 的编辑 Allen Wirfs-Brock 曾说过,如果能重来一次,他希望把 let 设计成像现在的 const 一样,而新增一个比如 let var 代替现在的 let。但因为 const 这个保留字在 JS 刚发明的时候就从 Java 抄过来了,let/const 这对儿关键字在制定 ES5 的时候就计划在 ES6 里用了,所以 ES6 里也就没再改了。
用 const 还是用 let?的更多相关文章
- openssl 1.1.1 reference
openssl 1.1.1 include/openssl aes.h: # define HEADER_AES_H aes.h: # define AES_ENCRYPT 1 aes.h: # de ...
- const,static,extern 简介
const,static,extern 简介 一.const与宏的区别: const简介:之前常用的字符串常量,一般是抽成宏,但是苹果不推荐我们抽成宏,推荐我们使用const常量. 执行时刻:宏是预编 ...
- C++中的const
一,C++中const的基本知识 1.C++中const的基本概念 1.const是定义常量的关键字,表示只读,不可以修改. 2.const在定义常量的时候必须要初始化,否则报错,因为常量无法修改,只 ...
- const extern static 终极指南
const extern static 终极指南 不管是从事哪种语言的开发工作,const extern static 这三个关键字的用法和原理都是我们必须明白的.本文将对此做出非常详细的讲解. co ...
- const let,console.log('a',a)跟console.log('a'+a)的区别
const 创建一个只读的常量 let块级作用域 const let重复赋值都会报错 console.log('a',a) a console.log('a'+a) a2 逗号的值会有空格:用加号的值 ...
- es6之let和const
在javascript中,我们都知道使用var来声明变量.javascript是函数级作用域,函数内可以访问函数外的变量,函数外不能访问函数内的变量. 函数级作用域会导致一些问题就是某些代码块内的变量 ...
- construction const parameter问题 构造函数const引用参数问题
工程在window下编译没有任何问题, 但是在linux(CentOS6)下编译就老是报错 C++ 编译器已升级到最新版 6.1.0 错误如下: In file included /bits/stl_ ...
- Error:const char* 类型的实参和LPCWSTR类型的形参不兼容的解决方法。
在C++的Windows 应用程序中经常碰到这种情况. 解决方法: 加入如下转换函数: LPCWSTR stringToLPCWSTR(std::string orig) { size_t origs ...
- C#基础知识七之const和readonly关键字
前言 不知道大家对const和readonly关键字两者的区别了解多少,如果你也不是很清楚的话,那就一起来探讨吧!探讨之前我们先来了解静态常量和动态常量. 静态常量 所谓静态常量就是在编译期间会对变量 ...
- const 与 readonly知多少
原文地址: http://www.cnblogs.com/royenhome/archive/2010/05/22/1741592.html 尽管你写了很多年的C#的代码,但是可能当别人问到你cons ...
随机推荐
- Mysql日志解析
修改Mysql配置 Mysql配置地址为: C:\Program Files (x86)\MySQL\MySQL Server 5.5 如果无法修改可以把my.ini拷贝出来,修改完后,再拷贝回去! ...
- sicily 猴子选大王
题目描述 猴子选大王,有N只猴子,从1-N进行编号.它们按照编号的顺时针方向,排成一个圆圈,然后从第一只猴子开始报数.第一只猴子报1,以后每只猴子报的数字都是它前面猴子所报数字加1.如果一只猴子报的数 ...
- [No000042]CSS 之 平时那些你不敢用的字体
CSS 之 平时那些你不敢用的字体 网上找找,无非如下一些中规中矩的结果: Windows下建议字体: 字体名称 对应英文 宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaH ...
- java 一些图片
- Mongodb的安装
下载:http://www.mongodb.org/downloads mongodb-win32-x86_64-3.2.5-signed.msi 安装: 1.dos下切换至安装目录bin下: 2 ...
- AI方向
普通程序员如何转向AI方向 眼下,人工智能已经成为越来越火的一个方向.普通程序员,如何转向人工智能方向,是知乎上的一个问题.本文是我对此问题的一个回答的归档版.相比原回答有所内容增加. 一. 目的 ...
- js动态创建style节点(js文件中添加css)
ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 --------------------- 有很多提供动态创建 ...
- CSS基本知识3-CSS盒模型
box-sizing: content-box|border-box|inherit; 值 描述 content-box 这是由 CSS2.1 规定的宽度高度行为. 宽度和高度分别应用到元素的内容框. ...
- react 和 ractive的区别
前面进项目的时候同事说项目在用react. 我没有深究,实际中发现是ractive.js.后来发现其实另有一个react.js.和ractive.js是有区别的.不过也有相似的地方. react项目的 ...
- Javascript读写文件
<script type="text/javascript" language="javascript"> //读文件 function readF ...