网站首页 > 教程文章 正文
全文共2218字,预计学习时长7分钟
对`const` 和`let`的介绍
大家都始于初学者。我学到在JavaScript中用关键词var来声明变量,这是一个简单且有效的方法,但如今我已做出改变。
若你还在编写类似var x = 5的代码,那你需要停下来。说实话,你不必停止,但应该如此。
人们常常将编程语言视作视为一系列金科玉律。但事实上编程语言就像任何一个口头语言一样,是不断变化发展的。
现在我用关键词const和let在JavaScript中声明所有变量,你也应该这么做。
让我们一起学习如何且为什么要这么做。
声明真正的常量
变量,顾名思义即变化的值。虽然声明和不接触变量并没有什么问题,但是如果想要编写具有语义的代码,则应该区分变量和常量。
常量与变量相反,是声明的不变值。历史上,人们用大写所有的字母来定义一个常数,例如有毒的动物身上的鲜艳颜色。
不用依赖惯例,const关键字的引入为人们提供了一个明确的选项,用于声明哪个值不会更改。
要使用const关键字,只需将var替换为const,就无法修改该值了。
// the old way
// var sales_tax = 0.06;
// the new way
const sales_tax = 0.06;
sales_tax = 0.08; // "TypeError: Assignment to constant variable.
实现方式非常简单,原理也非常简单。使用const甚至不用动脑,但什么时候用才合适呢?
诸如税率或单位之间的转换的数字比率可作为选择。另外还会在使用箭头符号声明函数时使用const。
const myFunction = (x,y) => {
// Do stuff
}myFunction(1,2)
这样函数就不会被覆盖了。
修复JavaScript的异常范围
JavaScript缺乏范围清晰性,常导致开发和故障排除的失败。以下是JavaScript范围异常的摘要:
· 一个变量可以使用两次var(重声明)
· 默认情况下,顶级变量是全局变量(全局对象)
· 可以在声明前使用变量(提升)
· 循环中的变量重复使用同样的引用(闭包)
使用let可以澄清和解决许多这些异常。来仔细看看吧。
重声明
这很简单,由let构成的变量是无法重声明的。
var x = 0;
let y = 0;
var x = 1;
let y = 1; // "SyntaxError: Identifier 'y' has already been declared
全局对象
由var定义的顶级变量会作为系统属性被自动添至全局变量,但由let定义的变量就不会。
var x = 0;
let y = 0;
console.log(window.x); // 0
console.log(window.y); // undefined
提升
由let定义的变量只能在其块级作用域内访问,而由var定义的变量会被提升至函数级别。
// Using var
console.log(i); // undefined
for(var i=0; i<4; i++) {
console.log(i);
}
console.log(i); // 4//
Using let
console.log(j); // "ReferenceError: j is not defined
for(let j=0; j<4; j++) {
console.log(j);
}
console.log(j); // "ReferenceError: j is not defined
闭包
如果闭包对你来说是一个新概念的话,那可能会难以理解,但是闭包是引用自由变量的函数。
当闭包中带有var时,该引用会被记住,当循环中的变量发生变化时,会造成麻烦。
var functions = [];for (var i = 0; i < 3; i++) {
functions[i] = () => { console.log(i); };
}
for (var j = 0; j < 3; j++) {
functions[j]();
}// 3 3 3
如果使用let,每次都会创建新的引用。
var functions = [];
for (let i = 0; i < 3; i++) {
functions[i] = () => { console.log(i); };
}
for (var j = 0; j < 3; j++) {
functions[j]();
}// 0 1 2
说到底,即使不是100%出于这些原因以及它们为何按其工作方式工作,切换到let还将产生更明确的代码,这些代码的行为始终如一,并且更易于故障排除和维护。
告诫
尽管let和const应该可以有效替换var关键字,但是一切并不总是那么简单。
由于这些关键字是在ECMAScript2015(ES6)中引入的,因此,如果你使用的平台不允许使用该关键字,那就很不幸了。此外,还要确保你的代码可以在目标受众群体的浏览器中正常运行。
留言点赞关注
我们一起分享AI学习与发展的干货
如转载,请后台留言,遵守转载规范
猜你喜欢
- 2025-05-02 本想搞清楚ESM和CJS模块的转换问题,没想到写完我的问题更多了
- 2025-05-02 ES6 的新增语法(es6最新语法)
- 2025-05-02 Go语言零基础入门指南(上篇)(go语言从入门到实战)
- 2025-05-02 2024年,你需要掌握的 30 个 JavaScript 面试问题和答案(基础篇)
- 2025-05-02 开发一个 App Clip 并不难!我们立马上开发教程
- 2025-05-02 如何编写干净、可维护的 JavaScript 代码
- 2025-05-02 如何用 Parse 和 Swift 搭建一个像 Instag
- 2025-05-02 Window 对象和 var(windows对象和document对象)
- 2025-05-02 ES6 新增了哪些新特性 (二)(es6新增了什么)
- 2025-05-02 JavaScript篇面试题(js 常见面试题)
- 最近发表
- 标签列表
-
- location.href (44)
- document.ready (36)
- git checkout -b (34)
- 跃点数 (35)
- 阿里云镜像地址 (33)
- qt qmessagebox (36)
- mybatis plus page (35)
- vue @scroll (38)
- 堆栈区别 (33)
- 什么是容器 (33)
- sha1 md5 (33)
- navicat导出数据 (34)
- 阿里云acp考试 (33)
- 阿里云 nacos (34)
- redhat官网下载镜像 (36)
- srs服务器 (33)
- pico开发者 (33)
- https的端口号 (34)
- vscode更改主题 (35)
- 阿里云资源池 (34)
- os.path.join (33)
- redis aof rdb 区别 (33)
- 302跳转 (33)
- http method (35)
- js array splice (33)