ES6解构学习之路

解构

解构：ES6中允许按照一定的模式，从数组或对象中提取值，对变量进行赋值，这被称为解构（Destructuring）
作用：这是一种将数据分解为更小单位的过程，从而简化提取信息的目的。

对象解构

形式：对象解构语法是在赋值对象左侧使用了对象字面量，如：

同名变量解构赋值：

let node = {
	type : 'identifier',
	name : 'foo'
};
let {type,name} = node;
console.log(type);//'identifier'
console.log(name);//'foo'

不同变量解构赋值：

let node = {
	type:'idextifier',
	name:'foo'
};
let {type:newType,name:newName} = node;
console.log(newType);//'identifier'
console.log(newName);//'foo'

注意点：

• 使用var、let、const对对象进行解构时，必须提供初始化器（等号右边的值）。
• 不适用var、let、const赋值时，需要使用()将解构语句包裹。

({type,name} = node);//{}在代码中作为代码块，单独使用加等号会报错

默认值：

当使用解构语句时，如果指定的本地变量没有同名属性，那么该变量会赋值为undefined，可以对其使用默认值。

let node = {
	type : 'identifier',
	name : 'foo'
  };
let {type,name,val} = node;
console.log(val);//undefined
({type,name,val = 'default'} = node);
console.log(val);//"default"

嵌套的对象解构：

使用类似字面量的语法，可以深入到嵌套的对象结构中去提取想要的值。

let people = {
	name:'Tom',
	age:15,
	loc:{
		start:{
			line:1,
			colum:1
		},
		end:{
			line:1,
			colum:1
		}
	}
};
let {loc:{start}} = people;
console.log(start.line);//1

这种方法使得本地变量start被赋值people中loc的start对象，这种赋值方法和直接people.loc.start赋值是一致的，所以要注意值类型和引用类型的区别。

注意点：

• 此语句中并没有任何变量被绑定

let {loc:{}} = people;//没有变量被生命

数组结构

形式：

数组解构的语法看起来和对象解构的语法非常相似，只是将对象字面量换成了数组字面量。数组解构时，解构作用在数组的位置上，不是对象的具名属性上。

let arr = [1,2,3,4];
let [firstNumber,secondNumber] = arr;
console.log(firstNumber);//1
console.log(secondNumber);//2

所以数组解构，最主要在于数组的位置固定，如果不想赋予某些位置的值，可以直接跳过：

let colors = ["red","yellow","blue","orange"];
let [,,myColor] = colors;
console.log(myColor);//blue

注意点：

• 使用var、let、const对数组进行解构时，要提供初始化器（等号右边的值）
• 不适用var、let、const对数组解构时，要用()把解构语句进行包裹。

默认值：

数组解构允许在任何位置使用默认值。当指定的位置项不存在或者为undefined时，那么该默认值就会被使用。

let arr = [1,2];
let [firstNumber,secondNumber,thirdNumber = 3] = arr;
console.log(thirdNumber);//3

嵌套的数组结构：

和对象类似，只是使用的是数组字面量。

let colors = ["red",["yellow","blue"]];
let [firstColor,[,secondColor]] = colors;
console.log(secondColor);//"blue"

剩余项：
可以使用…语法将剩余项目赋值给一个指定的变量。

let arr = [1,2,3,4,5];
let [firstNumber,restNumber] = arr;
console.log(firstNumber);//1
console.log(restNumber);//[2,3,4,5]

实际使用-参数解构

function setColor(firstColor,{secondColor,thirdColor} = {"red","yellow"}){
	let firstColor = firstColor,
	secondColor = secondColor,
	thirdColor = thirdColor;
}

还有很多方式可以拓展。