物件解構#
指定值給已存在的變數#
const superHero = {
name : "Spiderman",
power : "Spider Sense",
color : "red"
};
const { name, power, color } = superHero;
console.log("name:", name); // Spiderman
console.log("color:", color); // red
console.log("power:", power); // Spider Sense
重新指定值的用法#
const superMan = {
name : "Superman",
power : "Super Sense",
color : "blue"
};
({ name, power, color } = superMan);
console.log("name:", name);
console.log("color:", color);
console.log("power:", power);
指定值給新的變數#
const superHero = {
name : "Spiderman",
power : "Spider Sense",
color : "red"
};
const { name : n, power : p, color : c } = superHero;
console.log("color:", c); // red
console.log("power:", p); // Spider Sense
console.log("name:", n); // Spiderman
預設值#
const person = {
name: 'Skay',
age: 38
};
// Assign default value of Canada to country if undefined
const { name, age, country = 'Canada' } = person;
console.log(`I am ${name} from ${country} and I am ${age} years old.`);
// Output -> I am Skay from Canada and I am 38 years old.'
解構回傳值#
const data = () => ({ name: 'George', role: 'SA' });
const { name, role } = data();
槽狀的解構#
const superHero = {
name : "Spiderman",
power : "Spider Sense",
"character" : {
"realName" : "Tom Holland",
"citizenship" : "British",
"appearances" : {
"movie" : "captain america civil war",
"releaseDate" : "6 May 2016"
}
}
};
const { character } = superHero;
console.log(character);
{
realName: 'Tom Holland',
citizenship: 'British',
appearances: { movie: 'captain america civil war', releaseDate: '6 May 2016' }
}
const superHero = {
name : "Spiderman",
power : "Spider Sense",
"character" : {
"realName" : "Tom Holland",
"citizenship" : "British",
"appearances" : {
"movie" : "captain america civil war",
"releaseDate" : "6 May 2016"
}
}
};
const { character : {appearances : { movie }} } = superHero;
console.log(movie);
captain america civil war
陣列解構#
// we have an array with the name and surname
let arr = ["John", "Smith"]
// destructuring assignment
// sets firstName = arr[0]
// and surname = arr[1]
let [firstName, surname] = arr;
console.log(firstName); // John
console.log(surname); // Smith
let [firstName, surname] = "John Smith".split(' ');
alert(firstName); // John
alert(surname); // Smith
// 變數值互換
const a = 1, b = 2;
[b, a] = [a, b] //a=2, b=1
const [a, [b, [c, d]]] = [1, [2, [[[3, 4], 5], 6]]];
console.log(c); //[ [ 3, 4 ], 5 ]
乎略某些值#
// second element is not needed
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
console.log(title); // Consul
支援任何可疊代的值#
let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);
預設值#
let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);