解构
解构: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;
}
还有很多方式可以拓展。