解构
对象解构
基本语法:在赋值操作左边放置一个对象字面量,右边放需要解构的对象
例如:
let node = {
type: "Indetifier",
name: "foo"
};
//要实现解构赋值 必须初始化程序 即等于右边的对象
let {type, name} = node;
解构赋值
即在解构的基础上加上括号,前提解构变量已经初始化和赋值。
let node = {
type: "Indentifier",
name: "foo"
}
type = "Literal",
name = 5;
({type, name} = node);
解构表达式设置默认值
let node = {
type: "Indetifier",
name: "foo"
};
let {type, name, value = true} = node;
需要注意的是当解构表达时钟定义的变量在原对象中不存在时,会输出undefined
为非同名局部变量赋值
基本语法
let node = {
type: "Indetifier",
name: "foo"
};
let {type: myType, name: myName, age: myAge = "21"} = node;
嵌套对象解构
let node = {
type: "Indentifier",
name: "foo",
loc: {
start: {
line: 1,
column: 1
},
end: {
line: 1,
column: 4
}
}
};
//嵌套对象解构
let {loc: {start}} = node;
即当存在对象里存在属性值为对象时,需先通过解构找到这个属性,任何通过:表示要更深入的解构这个属性,再通过解构找到需要的属性
同样的这个也可以去
数组解构
数组字面量解构操作,全部都在数组内完成,不是像对象字面量语法一样使用对象的命名属性。
解构赋值
数组解构赋值,不需要像对象解构赋值一样加括号,即
let arr = ["red", "blue"]
firstColor = 'gray',
secondColor = 'green';
[firstColor, secondColorl] = arr; //则实现数组的解构赋值
数组解构赋值还可以实现交换两个变量的值
例如:
let a = 1,
b = 2;
[a, b] = [b, a];
默认值
与对象解构一样,直接给解构模式赋值
例如:
let [firstColor, secondColor = "pink"] = arr
嵌套数组解构
嵌套数组解构与嵌套对象解构不同的是它不需要:号,直接嵌套[]
例如:
let colors = ["red", ["green", "pink"], "blue"];
let [firstColor, [, secondColor], lastColor] = colors;
不定参数与数组解构的结合使用
当解构模板中使用不定参数…时,表示除了不定参数之前的,都赋值给接下来的这个变量。
例如:
l`et colors = [“red”, “green”, “blue”];
let […clonedColor] = colors;
//原生JS数组的concat也可以实现同样的效果
let arr = colors.concat();`
混合解构
即数组和对象解构可以一起使用,从而实现更多复杂的表达式。
例如:
let node = {
type: "Identifier",
name: "foo",
loc: {
start: {
line: 1,
colum: 1
},
end: {
line: 1,
colum: 4
}
},
range: [0, 3]
};
let {
loc: {end},
range: [firstIndex]
} = node;
即混合解构用于从JSON中提取非常有效,即不需要遍历整个结构,就可以获取需要的数据
解构参数
应用场景:即当一个函数传入的参数是对象的时候,则可以通过解构的方式直接写。
例如:
//options的属性表示其他参数
function setCookie(name, value, {secure, path, domain, expires}){
options = options || {};
let secure = options.secure,
path = options.path,
domain = options.domain,
expires = options.expires
}
//第三个传参数映射到options中
setCookie("type", "js", {
secure: true,
expires: 60000
})
必须传值的解构参数
如果函数的参数的是必须的,那么调用该函数的时候必须要传入,如果不传入则会报错undefined,如果设置该参数为非必需的则可以这样声明
function setCookie(name, value, {secure, path, domain, expires} = {}){}
解构参数的默认值
function setCookie(name , value, {
secure = false,
path = '/',
domain = 'example.com',
expires = new Date(Date.now() + 6000000);
} = {}
){
}
即在解构的同时给他赋值