ES6 物件解構賦值和陣列結構賦值
阿新 • • 發佈:2019-01-02
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、解構巢狀陣列——賦值
綜上即可