对ES6中let与const命令初步了解

xiaoxiao2021-02-27  131

最近看了阮一峰的《ECMAScript6入门》 ,对第一章做一些记录

1. let命令 

ES6 新增的关键字,用法就是用于声明变量,和 var 类似;区别在于声明的变量是局部的,只在 let 所在的代码块内有效。

var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 10 var a = []; for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 6由于ES5中不存在块级作用域,变量i是var声明的,在全局范围内都有效,所以全局只有一个变量i。每一次循环,变量i的值都会发生改变,而循环内被赋给数组a的function在运行时,会通过闭包读到这同一个变量i,导致最后输出的是最后一轮的i的值,也就是10。而如果使用let,声明的变量仅在块级作用域内有效,最后输出的是6。

同样的

for (let i = 0; i < 3; i++) { //子作用域 let i = 'abc'; //另一个子作用域 console.log(i); } // abc // abc // abc 因为两个i其实不一样,所以第二个i只会输出该作用域下的值

 暂时性死区(TDZ)

只要块级作用域内,存在 let 命令,它声明的变量就是绑定(binding)在这个区域,不受外部影响

var foo = 123 // 全局变量 if (true) { console.log(foo) // ReferenceError: foo is not defined ,变量不提升,与var的区别之一 let foo }

类似的

var tmp = 'abc'; if (true) { // TDZ开始 tmp = 'abc'; // ReferenceError console.log(tmp); // ReferenceError let tmp; // TDZ结束 console.log(tmp); // undefined tmp = 123; console.log(tmp); // 123 }

可以看出与var的区别,1:变量声明不再提升 ,2. let声明之前,是死区,使用就会报错。

所以要养成良好的变成习惯,变量声明之后再使用。

块级作用域的出现,实际上使得获得广泛应用的立即执行函数表达式(IIFE)不再必要了。

// IIFE 写法 (function () { var tmp = ...; ... }()); // 块级作用域写法 { let tmp = ...; ... }

2. Const常量 const 声明的是一个只读的常量。一旦声明值便不可以改动。因为 const 声明的值并不能改变,所以声明的时候必须初始化

const PI = 3.1415926 console.log(PI) // 3.1415926 PI = 3 // TypeError: Assignment to constant variable. const MAX // SyntaxError: Missing initializer in const declarationconst 的特点和 let 一样,只在声明的块级作用域中有效; const 声明的变量也不会提升,所以也是存在 TDZ 的;不能重复声明

再举个例子

const a = []; a.push('Hello'); // 可执行,可写 a.length = 0; // 可执行 a = ['Dave']; // 报错 ,赋值不行 ES5 只有两种变量声明的方法: var 和 function 关键字;ES6 却还添加了 let , const , import , class ;所以 ES6 一共有6种声明变量的方法。

转载请注明原文地址: https://www.6miu.com/read-17257.html

最新回复(0)