JavaScript - 解構(陣列/物件)並賦值

1.解構陣列
2.拆解字元到單一變數上
3.解構物件
4.解構陣列並賦予預設值
5.解構物件並賦予預設值
6.縮寫(物件合併)
7.縮寫物件內的關鍵字 function

1.解構陣列

let characters = ['A', 'B', 'C', 'D', 'E'];
// 使用 陣列解構 的方式將陣列內的元素
// "深層複製"到前面列舉變數內
// 中間如果有需要跳過的變數,可用兩個逗號隔開
let [_first, _second, _third, , _five] = characters;
console.log(_first, _second, _third, _five);
//改變原陣列內的元素,不影響變數內的值
characters[0] = 'A1'; 
console.log(_first, _second, _third, _five);

2.拆解字元到單一變數上

// 請拆解以下字元到單一變數上
let str = '基紐特攻隊';
let [a, b, c, d, e] = str;
console.log(a, b, c, d, e);

3.解構物件

// 請取出物件內的兩個值到單一變數上
let family = {
 ming: '小明',
 jay: '杰倫',
};
// 將family這個物件內的屬性ming鏡射到新的變數ming
let {
 ming,
 jay
} = family;
console.log(ming, jay);

// 將family這個物件內的屬性ming鏡射到新的變數ming,
// 再重新命名為NewMing
let {
 ming: NewMing,
 jay: NewJay
} = family;
// 這時候變數ming已經不能用!
// 已經被賦予到NewMing裡面了
console.log(NewMing, NewJay);

4.解構陣列並賦予預設值

// 變數ming的預設值是小明
// 變數jay的預設值是杰倫
let [ming = '小明', jay = '杰倫'] = ['阿明']
// 第一個會被右邊的阿明賦值,
// 第二個會用預設
console.log('ming:', ming, ' jay:', jay);
//Result:ming: 阿明  jay: 杰倫

5.解構物件並賦予預設值

let {
  family: ming = '小明'
} = {}
console.log('ming:', ming);
// Result:ming: 小明

6.ES6 縮寫用在 物件合併的時候 

// 請將以下兩個合併至一個物件上
const Frieza = '弗利沙'
const GinyuTeam = {
	Ginyu: '基紐',
	Jeice: '吉斯',
	burter: '巴特'
}
// 沒有縮寫
const NewObject = {
	Frieza: Frieza,
	GinyuTeam: GinyuTeam
};

// 縮寫:如果名稱一樣,可以直接縮寫
const NewObject2 = {
	Frieza,
	GinyuTeam
}
console.log('NewObject:', NewObject);
console.log('NewObject2:', NewObject2);

7.縮寫物件內的關鍵字 function

const newTeam = {
 // ES6 可以縮寫 不用寫function 
 showPosture() {
  console.log('Message')
 }
}

newTeam.showPosture();