ES6入门一 - 变量声明命令与解析赋值

ES6共有7中数据类型 ：①undefined、②null、③Boolean（布尔值）、④String（字符串）、⑤Number（数值）、⑥Object（对象）、⑦Symbol（唯一值）

变量声明

原来的ES5，只有两个变量声明命令 var和function，ES6新加入了四个，let，const，以及import和class命令。这使得js朝着更规范化，更严谨的编程语言方向进化。
ES5只有全局作用域和函数作用域，ES6中的let的使用实际新增了块级作用域。
ES6将顶层对象的属性和全局变量完全区分开了，let ,const 和class声明的全局变量，不再属于顶层对象的属性，使用顶层对象可以直接使用globalThis

1. var：用于声明全局变量或局部变量；
2. let：用于声明块级区域的变量，该变量只在块级区域有效，不受外部同名变量影响（又称“暂时性死区”）；
3. const：用于声明块级区域的常量，该常量只在块级区域有效，不受外部同名常量影响

for循环中，设置变量区域为父级区域，循环体为子级区域
块级作用域必须使用大括号，let必须出现在当前作用域的顶层
在暂时性死区中,typeof不再是百分百安全的操作

console.log(typeof undeclared_variable) // "undefined"
typeof x; // 报错，Cannot access 'x' before initialization
let x;

let，const与var的不同：

• 不允许声明提升。不能从小范围运用到更大范围。
• 不允许重复声明。在同一个块级区域中不允许同名变量。
• 不覆盖全局变量。变量只作用于块级区域。

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

const常量必须声明就初始化，并且其值不能改变，只在块级区域有效
const本质是变量指向的内存地址固定不变，如果是const对象，也可以改变其的属性。

			const PI=3.14;
			//PI=3//报错，Assignment to constant variable.
			const foo={};
			foo.prop=123;

若不想const对象被改变，使用freeze方法，对象和属性都可以冻结

			const foo=Object.freeze({});
			foo.prop="223";
			console.log(foo.prop);//undefined

---

解构赋值

解构赋值（解构，Destructuring）属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。
如果解构不成功，变量的值就等于undefined。解构赋值允许指定默认值，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。
用法：

let [a, b, c] = [1, 2, 3];
let [foo, [[bar], baz]] = [1, [[2], 3]];//嵌套
//foo  1   // bar 2  //baz  3

//对象解构
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
//foo  "aaa"  //bar  "bbb"

const { log } = console;
log('hello') // hello

//默认值
var {x, y = 5} = {x: 1};
// x 1  //y  5

//字符串解构
const [a, b, c, d, e] = 'hello';
//a  "h" // b  "e" // c  "l" // d  "l" // e  "o"

//函数参数解构
function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

用途：

1. 交换变量的值

			let x=3;
			let y=5;
			console.log("x="+x+",y="+y);//x=3,y=5
			[x,y]=[y,x];
			console.log("x="+x+",y="+y);//x=5,y=3

2. 从函数返回多个值

//1.返回数组对应取值
			function exam_1(){
				return [1,2,3];
			}
			let [x,y,z]=exam_1();
			console.log("x="+x+",y="+y+",z="+z);//3.html:57 x=1,y=2,z=3
//2.返回对象对应取值
			function exam_2(){
				return {
					obj_1:"5",
					obj_2:"8"
				};
			}
			let {obj_1,obj_2}=exam_2();
			console.log("obj_1="+obj_1+",obj_2="+obj_2);//obj_1=5,obj_2=8

3. 函数参数的定义

			function f_1([x,y,z]){
				return x+y+z;
			}
			console.log(f_1([1,2,3]));//6
			
			function f_2({x,y,z}){
				console.log(x);
			}
			f_2({x:1,y:2,z:3});//1

4. 提取JSON数据

			let jsonData = {
			  id: 42,
			  status: "OK",
			  data: [867, 5309]
			};
			
			let { id, status, data:number} = jsonData;
			console.log(id,status,number);//42 "OK" (2) [867, 5309]

5. 指定函数参数默认值

			function f(x,y=2,z=1){
				console.log( x+y+z);
			}
			f(3);//6
			f(3,3);//7
			f(3,3,3);//9

6. 遍历Map结构

			const map = new Map();
			map.set('first', 'hello');
			map.set('second', 'world');
			
			for (let [key, value] of map) {
			  console.log(key + " is " + value);
			}// first is hello// second is world
			
			// 获取键名
			for (let [key] of map) {
			  console.log(key);
			}
			
			// 获取键值
			for (let [,value] of map) {
			  console.log(value);
			}

7. 输入模块的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");