浅谈ES6的解构

对解构的初步了解
各种形式的解构 (es6按照一定的模式,从数组对象中提取值,对变量进行赋值)

​ let[a,b,c] = [1,2,3];

​ 只要等号两边的模式相同，左边的变量就会被赋予对应的值。

​ 如果解构不成功，变量的值就等于undefined。

​ 另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

​ 1.数组的解构

标准的解构
	let [a,b,c] = [1,2,3]; //变量的  a = 1 b =2 c=3

不完全的解构(右侧没有完全的解构)
	let [a,[b],d] = [1,[2,3],4];  // a=1,b=2,c=4

集合的解构 (使用拓展运算符)
let [a,b,c,...d] = [1,2,3,4,5,6,7]; //d =[4,5,6,7]
实例
let totol = 0;
function add([a,...tail]){
	// console.log(tail); //[1,2,3,4,5]
	tail.forEach(function(item){
		totol+=item;
	});
	return totol;
}
let result = add([1,2,3,4,5]);
console.log(result); //15

默认值(当匹配值严格等于undefined时,默认值生效)
let [x,y='b'] = ['a']; //x=a,y=b
默认值也可以是一个函数 // 验证默认值的赋值时机
//默认值赋值的时机
//正常理解有两种可能性会造成这种现象(经过验证第二种是正确的)
// ❎一种情况：先进行默认值的赋值，再去解构值，如果有值，那么覆盖原先的赋值。
// ✔️一种情况：先去判断解构的值有没有，如果有，进行赋值，如果没有，进行默认值的赋值
	function test(){ //给变量设置默认值的函数,看这个函数是否执行
		console.log('test');
		return 2;
	}
	/*let [g=test] = [1];
	console.log(g);  //1*/
	
	/*let [g=test()] = [1]; //函数里的打印没有执行,说明没有执行g=test()
	console.log(g);   //1 */
	
	let [g=test()] = []; //函数里的打印执行了,说明执行了g=test()
	console.log(g);   //2  //函数里的返回值赋值给了变量g

​ 2.对象的解构

对象的属性没有次序,变量必须与属性同名,才能取到正确的值
let {a,b} = {a:1,b:2}; //等号左边的变量必须与等号右边的对象的属性同名
console.log(a,b);
//此处进行对象的解构  用对象给变量name age 赋值(要同名哦)
let {name,age} = {
		name:'zhangsan',
		gender:'男',
		age:12
	}
	console.log(name,age);  //zhangsan  age

对象的解构赋值是下面形式的简写。(此处是完整的对象解构写法)
	let {name:name,age:age} = {
		name:'zhangsan',
		gender:'男',
		age:12
	}
	console.log(name,age);  //zhangsan  age*/	

如果变量名与属性名不一致，必须写成下面这样。重命名
let {name:myName,age:myAge} = { //给变量name 和 age起别名
		name:'zhangsan',
		gender:'男',
		age:12
	}
	console.log(myName,myAge);  //zhangsan  age

默认值（默认值生效的条件是，对象的属性值严格等于undefined）
	//此处给address 起别名,并给了他一个默认的值
	let {name:myName,age:myAge,address:myAddress='江苏'} = {
		//对象中不存在 与变量名同名的属性 对象的属性值严格等于undefined,给默认值
		name:'zhangsan',
		gender:'男',
		age:12
	}
	console.log(myName,myAge,myAddress);  //zhangsan  age  江苏

对象的嵌套解构 严格符合匹配模式
let obj = {p:['hello',{y = 'world'}]};
let {p:[x,{y}]} = obj;  //x='hello' y='world';

​ 3.字符串的解构

解构时，字符串被转换成了一个类似数组的对象。
也可以对length属性解构
let str = 'hello';
let [a,b,c] = str;
console.log(a,b,c); //h e l 

let {length} = str;
console.log(length);  //5

​ 4.boolean number 的解构

解构时，如果等号右边是数值和布尔值，则会先转为对象
let {toString} = 123;
//将123转为对象(Number),toString 对应对象里的toString
console.log(toString===Number.prototype.toString);  //true
let {toString:s} = true; 
//将true转为对象(Boolean),toString 对应对象里的toString方法
console.log(s===Boolean.prototype.toString);  //true

​ 5.函数参数的解构

基本语法(此处以数组作为参数)
function add([x,y]){
    return x + y ;
}
add([1,2]);  //这里的[1,2]对应方法参数里的[x,y],并进行数组的解构
默认值(上面用了数组为参数,此处以对象为参数)
function move({x=0,y=0}){
    return x + y;
}
move({x:3,y:4}); // 对象中有对应的属性 没有默认赋值 x=3,y=4
move({x:3});     //对象中有对应的属性x,没有属性y, y赋默认值 x=3,y=0
move({});        //对象中没有任何的属性,x y 都赋默认值 x = 0, y = 0
	

​ 解构的常用用途

	1.交换数据
		let x =1 
		let y=2 
		[x,y] = [y,x]
	2.从函数中返回多个值
		function test(){return [1,2,3];}
		let[a,b,c] == test();
	3.函数的参数的赋值
	function test([a=1,b=2]){
		return a + b;
	}
	test([1,2]);
	4.获取局部数据(提取数据)
		例如提取对象中的数据
		let obj = { //定义对象
			id:32,
			name:'zhangsan',
			data:[1,2,3]
		};
		//提取对象中的数据
		let{id,name,data:number}=obj;