es6 快速入门 系列 —— 变量声明:let和const
其他章节请看:
变量声明:let和const
试图解决的问题
经典的 var
声明让人迷惑
function demo1(v){
if(v){
var color='red'
}
console.log(color)
}
demo(1) // red
js引擎会将上面的 demo1 函数修改成下面的样子:
function demo2(v){
var color;
if(v){
color='red'
}
...
}
解决方法
将 var
声明改为 let
声明
function demo3(v){
if(v){
let color='red'
}
// 变量color在此处不存在
console.log(color)
}
demo3(1) // 报错
let
声明的用法与var
相同。用 let 代替 var 来声明变量,就可以把当前作用域限制在当前代码块(指块级作用域)中。由于 let 声明不会被提升,因此开发者通常将 let 声明语句放在代码块顶部,以便整个代码块都可以访问
最佳实践
起初,对很多js开发者来说,let
与他们实际想要的var
一样,所以直接将var
替换成let
。当更多的开发者迁移到es6后,另一种做法日益普及:默认使用const
,只有确实需要改变变量的值才使用let
,可能大部分的值在初始化后不会再改变。
补充
块级作用域
以前只有函数作用域,es6新增了块级作用域(字符{和}之间的区域)
// 函数作用域:变量i在函数demo4中有效
function demo4(){
if(true){
var i = 1
}
console.log(i)
}
demo4() // 1
console.log(i) // 报错(i没有定义)
// 块级作用域:变量i只在if中的{和}之间有效
function demo5(){
if(true){
let i = 1
}
console.log(i)
}
demo5() // 报错(i没有定义)
禁止重复声明
假设作用域中存在某变量(i),此时再用 let
或 const
关键字声明变量(i),就会抛出错误
var a = 1;
// 重复声明,抛出语法错误
let a = 1;
var a = 1;
if(1){
// 不会抛出错误(没有重复声明)
let a = 1;
}
const声明
es6提供 const
关键字来声明常量
常量必须一开始就初始化
// 正确
const i = 1
// 报错(常量未初始化)
const j;
不可以为 const 定义的常量再赋值(但允许修改值)
// 报错
const i = 1;
i = 2;
const obj = {}
// 正确(允许修改值)
obj.i = 1
// 错误(不允许修改绑定)
obj = {}
临时死区
用 let 或 const 声明的变量,会先存放在临时死区(TDZ)中,只有执行过变量声明语句后,变量才从TDZ中移除
if(true){
// 报错(访问临时死区中的变量,会报错)
console.log(typeof i)
let i = 1
}
循环中的块作用域绑定
var 声明让开发者创建函数非常困难
var funArr = []
for(var i = 0; i < 5; i++){
funArr.push(function(){
console.log(i)
})
}
funArr[0]() // 5
funArr[1]() // 5
我们的预期是输出0~4,这里却全部输出5
可以用立即调用函数表达式(IIFE)来达到目的,就像这样:
var funArr = []
for(var i = 0; i < 5; i++){
funArr.push(function(i){
return function(){
console.log(i)
}
}(i))
}
funArr[0]() // 0
funArr[1]() // 1
但我们可以用更简单的方式:循环中用 let 声明
var funArr = []
// 循环中用let声明:var 改用 let声明
for(let i = 0; i < 5; i++){
// let声明模仿上述例子中 IIFE 所做的一切(每次循环都创建一个新变量i,给新变量i赋值),
// 现在彻底删除 IIFE 之后仍可得到预期的结果
funArr.push(function(){
console.log(i)
})
}
funArr[0]() // 0
funArr[1]() // 1
注:let声明在循环内部的行为是标准中专门定义的,不一定与 let 的不提升特性相关
全局块作用域绑定
var 声明的变量,会覆盖已存在的全局属性;let 和 const 声明的变量不会覆盖全局属性
// 覆盖全局属性RegExp
var RegExp = 'hello'
console.log(window.RegExp) // hello
let RegExp = 'hello'
console.log(window.RegExp) // RegExp() { [native code] }
console.log(RegExp) // hello
其他章节请看:
es6 快速入门 系列 —— 变量声明:let和const的更多相关文章
- es6 快速入门 系列 —— 类 (class)
其他章节请看: es6 快速入门 系列 类 类(class)是 javascript 新特性的一个重要组成部分,这一特性提供了一种更简洁的语法和更好的功能,可以让你通过一个安全.一致的方式来自定义对象 ...
- es6快速入门 系列 - async
其他章节请看: es6 快速入门 系列 async 前文我们已经知道 promise 是一种异步编程的选择.而 async 是一种用于执行异步任务更简单的语法. Tip:建议学完 Promise 在看 ...
- es6 快速入门 系列 —— promise
其他章节请看: es6 快速入门 系列 Promise Promise 是一种异步编程的选择 初步认识Promise 用 Promise 来实现这样一个功能:发送一个 ajax,返回后输出 json ...
- es6 快速入门 系列 —— 对象
其他章节请看: es6 快速入门 系列 对象 试图解决的问题 写法繁杂 属性初始值需要重复写 function createPeople(name, age){ // name 和 age 都写了 2 ...
- es6 快速入门 系列
es6 快速入门(未完结,持续更新中...) 前言 为什么要学习es6 es6对于所有javaScript开发者来说,非常重要 未来,es6将构成javaScript应用程序的基础 es6中很多特性, ...
- es6 快速入门 —— 函数
其他章节请看: es6 快速入门 系列 函数 函数是所有编程语言的重要组成部分,es6之前函数语法一直没什么变化,遗留了许多问题,javaScript开发者多年来不断抱怨,es6终于决定大力度更新函数 ...
- python 全栈开发,Day88(csrf_exempt,ES6 快速入门,Vue)
BBS项目内容回顾 1. 登陆页面 1. 验证码 1. PIL(Pillow) 2. io 2. ORM 1. 增删改查 3. AJAX $.ajax({ url: '', type: '', dat ...
- ES6快速入门(二)数据结构
ES6快速入门 一.解构 1. 对象解构 let person = { name: 'Tang', age: 28 }; //必须同名,必须初始化 let {name, age} = person; ...
- ES6快速入门(一)函数与作用域
ES6快速入门 一.块级绑定 1.var声明与变量提升 使用var声明的变量,不论在何处都会被视为(声明)在函数级作用域顶部的位置发生. function getValue(condition) { ...
随机推荐
- Codeforces Round #529 (Div. 3) E. Almost Regular Bracket Sequence (思维,模拟栈)
题意:给你一串括号,每次仅可以修改一个位置,问有多少位置仅修改一次后所有括号合法. 题解:我们用栈来将这串括号进行匹配,每成功匹配一对就将它们消去,因为题目要求仅修改一处使得所有括号合法,所以栈中最后 ...
- C# TCP应用编程一 概述
TCP 是Transmission Control Protocol(传输控制协议)的简称,是TCP/IP 体系中面向连接的运输层协议,在网络中提供全双工的和可靠的服务.一旦通信双方建立了TCP 连接 ...
- hdu 5874
On an isolated island, lived some dwarves. A king (not a dwarf) ruled the island and the seas nearby ...
- C++ part8
1.volatile关键字 在C++中,对volatile修饰的对象的访问,有编译器优化上的副作用: 不允许被编译器优化,提供特殊地址的稳定访问(只从内存中读取). 有序性,编译器进行优化时,不能把对 ...
- 2019牛客多校第五场C generator 2(BSGS)题解
题意: 传送门 已知递推公式\(x_i = a*x_{i - 1} + b\mod p\),\(p\)是素数,已知\(x_0,a,b,p\),给出一个\(n\)和\(v\),问你满足\(x_i = v ...
- HDU 6155 Subsequence Count(矩阵 + DP + 线段树)题解
题意:01串,操作1:把l r区间的0变1,1变0:操作2:求出l r区间的子序列种数 思路:设DP[i][j]为到i为止以j结尾的种数,假设j为0,那么dp[i][0] = dp[i - 1][1] ...
- 如何在手机上实现 H5 页面全屏显示
如何在手机上实现 H5 页面全屏显示 fullscreen 隐藏头部地址栏 隐藏底部导航栏 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才 ...
- 电信悦 me 智能网关
电信悦 me 智能网关 悦 me 智能网关 Q1:什么是电信悦 me 智能网关? 悦me网关是智慧家庭的核心终端,作为"光猫+智能路由器"的集合体, 采用了全新的硬件.外观及智能操 ...
- JavaScript & Automatic Semicolon Insertion
JavaScript & Automatic Semicolon Insertion ECMA 262 真香警告️ https://www.ecma-international.org/ecm ...
- Android Studio show whitespace & Android studio 设置注释缩进
Android Studio show whitespace & Android studio 设置注释缩进 https://github.com/xgqfrms/flutter/issues ...