1、解构对象
1.1、解构单层对象
1.1.1、解构单层对象——不赋值
let data = {
id: 1,
name: 'Jack'
}
let { id, name } = data;
console.log(id, name) // 1 "Jack"
1.1.2、解构单层对象——赋值
注意:在下文代码中,一定要用一对小括号包裹解构赋值语句,javascript引擎将一对开放的花括号视为一个代码块,而语法规定,代码块不能出现在赋值语句的左侧,添加小括号后可以将块语句转化为一个表达式,从而实现整个解构赋值的过程。
var data = {
author: 'Better',
age: 18
},
author = 'Jack',
age = 19;
console.log(author, age); // Jack 19
//使用解构语法为多个变量赋值
({author,age} = data);
console.log(author, age); // Better 18
console.log(data); // {author: "Better", age: 18}
1.2、解构嵌套对象
1.2.1、解构嵌套对象——不赋值
let data = {
date: '2018-12-03',
author: 'Better',
event: {
eventName: 'playBadminton',
peopleCount: 8
}
}
let {date, author, event:{eventName, peopleCount}} = data;
console.log(date) // 2018-12-03
console.log(eventName) // playBadminton
1.2.2、解构嵌套对象——赋值
// 1、被解构的对象中 没有 该对象(如 detailData)
let data = {
date: '2018-12-03',
author: 'Better',
event: {
eventName: 'playBadminton',
peopleCount: 8
}
}
let {
date, event: {
eventName
},
detatilData: {
city
} = {
city: '杭州'
}
} = data;
console.log(date) // 2018-12-03
console.log(eventName) // playBadminton
console.log(city) // 杭州
// 2、被解构的对象中 有 该对象(如 detailData)
let data = {
date: '2018-12-03',
author: 'Better',
event: {
eventName: 'playBadminton',
peopleCount: 8
},
detatilData: {
city: '北京'
}
}
let {
date, event: {
eventName
},
detatilData: {
city = '杭州'
}
} = data;
console.log(date) // 2018-12-03
console.log(eventName) // playBadminton
console.log(city) // 北京
2、解构数组
2.1、解构单层数组
2.1.1、解构单层数组——不赋值
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
let [foo] = []; // foo = underfined;
let [bar, foo] = [1]; // foo = underfined;
2.1.2、解构单层数组——赋值
let node = {
type:"Identifier",
name:"foo"
};
let {type,name,value = true} = node;
console.log(type);//"Identifier"
console.log(name);//"foo"
console.log(value);//true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
let [x = 1, y = x] = []; // x=1; y=1
let [x = 1, y = x] = [2]; // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = []; // ReferenceError: y is not defined
let node = {
type:"Identifier",
name:"foo"
},
type = "Literal",
name = 5;
// 使用解构语法为多个变量赋值
({type,name} = node);
console.log(type);//"Identifier"
console.log(name);//"foo"
// 注意:一定要用一对小括号包裹解构赋值语句,javascript引擎将一对开放的花括号视为一个代码块,而语法规定,代码块不能出现在赋值语句的左侧,添加小括号后可以将块语句转化为一个表达式,从而实现整个解构赋值的过程。
// 为非同名局部变量赋值
let node = {
type:"Identifier"
};
let {type:localType,name:localName = "bar"} = node;
console.log(localType); //"Identifier"
console.log(localName); //"bar"
2.2、解构嵌套数组
2.1.1、解构嵌套数组——不赋值
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
2.1.2、解构嵌套数组——赋值
综上即可