第十一节：ES6解构赋值、var/let/const详解(作用域提升、windows关系、暂时性死区、使用场景等)
一. ES6解构赋值
1. 含义
允许按照一定模式，从数组和对象中提取值，对变量进行赋值的过程，叫做解构
2. 套路
(1). 符号：[]
(2). 别名：xx:别名
(3). 默认值： xx='默认值' 或 xx：别名='默认值'
(4). 剩余参数： ...xxx, 对象解构中是对象，数组解构中是数组
3. 数组的解构
全部解构、解构某个元素、剩余参数的使用、解构+默认值
代码分享：{ let nameArrays = ["ypf1", "ypf2", "ypf3"]; //全部解构 let [name1, name2, name3] = nameArrays; console.log(name1, name2, name3); //ypf1 ypf2 ypf3 //解构某一个元素 let [, , myName3] = nameArrays; //ypf3 console.log(myName3); //解构出来一个元素，剩下的放到数组里(形如剩余参数) let [item1, ...itemList] = nameArrays; console.log(item1, itemList); //ypf1 [ 'ypf2', 'ypf3' ] //解构的同时赋默认值 let [l1, l2, l3, l4 = "ypf4"] = nameArrays; console.log(l1, l2, l3, l4); //ypf1 ypf2 ypf3 ypf4 }
4. 对象的解构
全部解构、解构起别名、结构+默认值、解构+别名+默认值、剩余参数、复杂对象解构、函数中使用。
代码分享：
{ let obj = { name: "ypf", age: 18, height: 1.82, }; // 解构 let { name, age, height } = obj; console.log(name, age, height); // 解构并起别名 let { name: name1, age: age1, height: height1 } = obj; console.log(name1, age1, height1); // 解构+默认值，解构+别名+默认值 let { name2 = "ypf2", name: name3 = "ypf3" } = obj; console.log(name2, name3); //ypf2 ypf // rest剩余参数的使用 let { name: name4, ...restObj } = obj; console.log(name, restObj); //ypf { age: 18, height: 1.82 } // 复杂对象的解构 let options = { size: { width: 100, myheight: 200, }, items: ["Cake", "Donut"], extra: true, // something extra that we will not destruct }; let { size: { width, myheight }, items: [item1, item2], // assign items here title = "Menu", // not present in the object (default value is used) } = options; console.log(title); // Menu console.log(width); // 100 console.log(myheight); // 200 console.log(item1); // Cake console.log(item2); // Donut //函数中使用 function foo({ name, age }) { console.log(name, age); } foo(obj); //ypf 18 }
5. 字符串的解构
和数组解构类似
代码分享：
{ let str = "ypf001"; let [a, b, c, d, e] = str; console.log(a, b, c, d, e); //y p f 0 0 }
二. var/let/const详解
1. let 基本使用
(1). let 不允许声明同名变量（var可以）
(2). 其它声明变量方面和var没有太大区别
代码分享：
// 1.1 let 不允许声明同名变量 (下面代码报错) { let msg1 = "ypf1"; let msg1 = "ypf2"; } //1.2 var可以 { var msg2 = "ypf1"; var msg2 = "ypf2"; }
2. const基本使用
(1).const不允许声明重复变量
(2).const用来声明常量，保存的数据一旦被赋值，就不能被修改
特别注意：对于number、string、bool等数值类型不能直接修改，但是如果赋值的是引用类型，那么可以通过引用找到对应的对象，修改对象的内容。
【基本数据类型存储在 栈内存 中，引用数据类型存储在 堆内存 中然后在栈内存中保存 引用地址，对于引用类型而言，const 实际上保证的并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。】
(3). const声明变量的同时，必须赋值。
代码分享：
{ //2.1 const不允许声明同名变量(下面代码报错) { const msg1 = "ypf1"; const msg1 = "ypf2"; } // 2.2 声明的常量，对于基本数据类型不允许修改(下面代码报错) { const name1 = "ypf1"; name1 = "ypf2"; console.log(name1); //报错 Assignment to constant variable. } // 2.3 声明的常量，如果是引用类型，修改引用类型的地址，不允许；但是修改引用类型的值，是可以的 { const obj = { name: "ypf1", age: 20, }; obj.age = "30"; // 允许的，改的堆内存中的值，栈中的存放的地址没有修改 console.log(obj.age); obj = { name: "ypf2", }; // 不允许修改栈内存中存放的引用地址！！ Assignment to constant variable. } //2.4 声明变量的同时必须赋值 { // const msg; //必须初始化 "const" 声明 } }
3. var、let/const到底有没有作用域提升呢？(也叫变量提升)
(1). 什么是作用域提升？
【答：在声明变量的作用域中，如果这个变量可以在声明之前被访问，那么我们可以称之为作用域提升】
(2). var是具有作用域提升的，如下例子，输出undefined，并没有报错，说明能访问。
(3). let、const没有进行作用域提升，但是会在“解析阶段”被创建出来
代码分享：
{ // 3.1 var是具有作用域提升的 { console.log(a); //undefined var a = "ypf"; } // 3.2 let/const创建的变量不能提前访问，所以不具有作用域提升功能 { console.log(msg1); //Cannot access 'msg1' before initialization let msg1 = "ypf"; console.log(msg2); //Cannot access 'msg2' before initialization const msg2 = "ypf"; } }
4. var、let/const和windows的关系 (需要在index.html页面测试)
(1). 全局通过var来声明一个变量，事实上会在window上添加一个属性
(2). let、const是不会给window上添加任何属性的
代码分享：
// 4.1 全局通过var来声明一个变量，事实上会在window上添加一个属性 { var msg1 = "ypf1"; console.log(window.msg1); //ypf1 } // 4.2 let/const不会给window上添加任何属性的 { let msg2 = "ypf2"; let msg3 = "ypf3"; console.log(window.msg2); //undefined console.log(window.msg3); //undefined }
5. 块级作用域
(1). 在之前的ES5中,没有块级作用域，只有函数作用域和全局作用域
(2). var 没有块级作用域，let/const/function/class声明的类型都是具有块级作用域的
注：不同的浏览器有不同实现的(大部分浏览器为了兼容以前的代码, 让function是没有块级作用域)
(3). if/switch/for 都是具有块级作用域的
(4). 块级作用域应用场景
有多个按钮，想给每个按钮添加一个事件，然后点击按钮依次输出每个按你对应的顺序，想要的结果是 0,1,2,3 如果直接用for循环+var，输出的结果永远是最大值，因为var是全局变量 这里引入两种解决方案，闭包和let块级作用域
代码分享：
{ // 5.4 if/switch/for 对应的块级作用域分析 // if { if (true) { var msg1 = "ypf1"; let msg2 = "ypf2"; const msg3 = "ypf3"; } console.log(msg1); //ypf1 console.log(msg2); //ReferenceError: msg2 is not defined console.log(msg3); //ReferenceError: msg3 is not defined } // switch { var color = "red"; switch (color) { case "red": var foo = "foo"; let bar = "bar"; } console.log(foo); //foo console.log(bar); //bar is not defined } // for（重点！！） { for (var i = 0; i < 3; i++) { console.log("循环内:" + i); // 0、1、2 } console.log("循环外:" + i); // 3 for (let i = 0; i < 3; i++) { console.log("循环内:" + i); // 0、1、2 } console.log("循环外:" + i); // ReferenceError: i is not defined } } // 块级作用域应用场景 { const btns = document.getElementsByTagName("button"); // 仔细理解！！！！ // 参考博客：https://www.cnblogs.com/yaopengfei/p/14456993.html for (var i = 0; i < btns.length; i++) { btns[i].onclick = function () { console.log("第" + i + "个按钮被点击"); }; } // 方案1：采用闭包的方式解决 for (var i = 0; i < btns.length; i++) { (function (n) { btns[i].onclick = function () { console.log("第" + n + "个按钮被点击"); }; })(i); } // 方案2:直接使用let即可 for (let i = 0; i < btns.length; i++) { btns[i].onclick = function () { console.log("第" + i + "个按钮被点击"); }; } }
6. let/const具有暂时性死区
(1). 什么是暂时性死区？
【答：只要块级作用域内存在 let 命令，它所声明的变量就绑定在了这个区域，不再受外部的影响。】
(2). 案例如下
{ var a = 5; if (true) { a = 6; let a; } // Uncaught ReferenceError: Cannot access 'a' before initialization }
7. 补充
for (let i = 0; i < names.length; i++) 中不可以使用const声明变量
for (const item of names) 中可以使用const声明变量
8. 总结
(1). 对于var的使用：
我们需要明白一个事实，var所表现出来的特殊性：比如作用域提升、window全局对象、没有块级作用域等都是一些历史遗留问题；
其实是JavaScript在设计之初的一种语言缺陷；
但是在实际工作中，我们可以使用最新的规范来编写，也就是不再使用var来定义变量了；
(2). 对于let、const：
对于let和const来说，是目前开发中推荐使用的；
我们会有限推荐使用const，这样可以保证数据的安全性不会被随意的篡改；
只有当我们明确知道一个变量后续会需要被重新赋值时，这个时候再使用let；
这种在很多其他语言里面也都是一种约定俗成的规范，尽量我们也遵守这种规范；
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
