[es6] let与const

一、es6是什么

# es6是什么?		--百度搜索一下
	ECMAScript 6(简称ES6)是于2015年6月正式发布的JavaScript语言的标准,正式名为ECMAScript 2015(ES2015)。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言 [1]  。

es6是什么 es6-01.png

二、let 声明

1. let声明的范围是块作用域,var声明的范围是函数作用域

// var声明的范围是函数作用域
if (true) {
    var name = 'TaoYuan';
    console.log(name);	//TaoYuan
}
console.log(name);	//TaoYuan

var声明的范围是块级作用域 es6-02.png

// let声明的范围是块作用域
if (true) {
    let age = 40;
    console.log(age);  //40
}
console.log(age);  //ReferenceError: age 没有定义

let声明的范围是块作用域 es6-03.png

2.let不允许同一个块作用域中出现重复声明

// let不允许同一个块作用域中出现重复声明
var name;
var name;

let age;
let age;	//SyntaxError:标识符age已声明

let不允许同一个块作用域中出现重复声明 es6-04.png

// 重复声明报错不会因混用 let 和 var 而受影响
var name;
let name;	//SyntaxError

let age;
var age;	//SyntaxError

重复声明报错不会因混用 let 和 var 而受影响1 es6-05.png

重复声明报错不会因混用 let 和 var 而受影响2 es6-06.png

3.暂时性死区

//暂时性死区	--在 let 声明之前的执行瞬间

// name 会被提升
console.log(name);	//undefined
var name = 'TaoYuan';

// age 不会被提升
console.log(age);	//ReferenceError: 初始化前无法访问age
let age = 40;

暂时性死区 es6-07.png

4.全局声明

全局声明
// 使用 let 在全局作用域声明的变量不会成为window对象的属性(var声明的变量在node v18测试时也不会成为window对象的属性,在浏览器会成为window对象的属性)
    
var name = 'TaoYuan';
console.log(window.name);	//window 未定义

全局声明1 es6-08.png

let age = 40;
console.log(window.age);	//window 未定义

全局声明2 es6-09.png

全局声明3 es6-09-2.png

5.条件声明

// let 的作用域是块,因此不可能检查前面是否已经使用 let 声明过同名变量,同时也就不可能在没有声明的情况下声明它

if (typeof name === 'undefined') {
    let name = 'TaoYuan';   // name 被限制在if{}块的作用域内
    console.log(name);
}
console.log(name);

条件声明 es6-10.png

6.for 循环中的 let 声明

//使用var
for (var i = 0; i < 5; ++i) {
    setTimeout( () => console.log(i), 0)
}
// 你可能以为会输出0、1、2、3、4
// 实际上会输出 5、5、5、5、5

使用var es6-11.png

//使用let
for (let = 0; i < 5; ++i) {
    setTimeout( () => console.log(i), 0)
}
// 会输出0、1、2、3、4

使用let es6-12.png

三、const 声明

​ const 的行为与let基本相同,唯一一个重要的区别是用它声明变量时必须同时初始化变量,且尝试修改 const 声明会导致运行时错误。

1.不能给常量赋值

//不能给常量赋值
const age = 40;
age = 50;

不能给常量赋值 es6-13.png

2.const 也不允许重复声明

//const 也不允许重复声明
const name = 'TaoYuan';
const name = 'MaGong';

const 也不允许重复声明 es6-14.png

3. const 声明的作用域也是块

const name  = 'TaoYuan';
if (true) {
    const name = 'MaGong';
}
console.log(name);	//TaoYuan

const 声明的作用域也是块 es6-15.png

4.如果 const 变量引用是对象,可以修改对象内部的属性

const person = {};
person.name = 'TaoYuan';
console.log(person.name);	//TaoYuan

如果 const 变量引用是对象 es6-16.png

5. const 对 for-of 和 for-in循环特别有意义

for (const key in {a:1, b:2}) {
    console.log(key);
}
// a, b

for-of es6-17.png

for (const value of [6,7,8,9,10]) {
    console.log(value);
}
// 6,7,8,9,10

for-in es6-18.png

四、声明风格及最佳实践

1.不适用 var

有了 let 和 const ,大多数开发者会发现自己不再需要 var 了。

2. const 优先,let 次之

使用 const 声明可以让浏览器运行时强制变量不变,也可以让静态代码分析工具提前发现不合法的赋值操作。

博文查考

百度百科 -- es6

ES6从入门到精通系列(全23讲)

菜鸟教程 -- ES6 let 与 const

阮一峰 -- let 和 const 命令

JavaScript 高级程序设计(第4版) --【美】马特.弗里斯比 著