本篇的內容關於 destructuring / spread 跟 rest

destructuring

就是從 array 或 object 中，快速拆出想要的值並將值指定給宣告出來的變數

1. 從物件中拆出值，且新宣告的變數名恰與物件內的名稱相同

const voxel = { x: 2, y: 7.4, z: 9.6 };
let { x, y, z } = voxel;

2. 從物件中拆出值，新宣告的變數名跟物件內的名稱不同

const pets = { dog: "汪汪", cat: "喵喵" , fish: "..." , snake: "sss" }
let { dog: petA, cat: petB, ...otherPets } = pets;
// petA：複製 dog 的值，指定為 petA
// petB：複製 cat 的值，指定為 petB
// ...otherPets 把剩下的都裝在一起

3. 巢狀的物件也可以如法炮製，新宣告的變數名跟物件內的名稱不同
   

const linearMovement = {
    startPos: { x: 5, y: 6 },
    endPos: { x: 6, y: -9 }
};

const {startPos: { x: startPosX, y: startPosY } } = linearMovement; 
// 將 linearMovement 中 startPos 的 x 指定到 startPosX 這個變數上(startPosY 同理)
console.log(startPosX, startPosY);  // 5 6 

再更多層的話..
也可以 一層一層解構

const person = {
    name: "Cathy",
    age: 32,
    address: {
        city: "Tainan",
        postCode: 702
    }
}

const { name: firstPerson, address: { city: firstCity , postCode: firstPostCode} } = person;
console.log(firstPerson); // "Cathy"
console.log(firstCity); // "Tainan"
console.log(firstPostCode); // 702 

4. 除了物件外 陣列也可使用

const [a, b] = [1, 3, 5, 7, 9]; // 從 array 內取值 指定給變數 a , b
console.log(a, b); // a 跟 b 對應到陣列內的前兩位，分別為 1 跟 3 

function sumAndMultiply ( a,b ){
    return [ a+b,a*b ];
}
const [ sumResult,multiplyResult ] = sumAndMultiply( 3,4 );
console.log(sumResult); // 7 (對應 a+b)
console.log(multiplyResult); // 12 (對應 a*b)

5. 如果要的值不是剛好在陣列的連續位置上，可以插入,改變要取的陣列位置

const [c , , d] = [11,12,13,14];
console.log(c ,d); // 11,13

6. 傳入整個 object 做為函式的參數，再從 object 取出要的內容
   原本的寫法是這樣..

const profileUpdate = (profileData)=>{
    const {name , age , birthDay} = profileData; // 從傳入的 profileData 物件內取出要的值
    // do something..
}

可以這樣改寫

const profileUpdate = ({name , age , birthDay})=>{
    // do something..
}

rest / spread

兩者外觀都是 ... 三個點符號

rest

簡單來說 就是把剩下的東西裝在一起，另外 rest operator 一定要放在最後方

const [c, ...restNum , d] = [99, 98, 97, 96, 95]; // 會產生錯誤

正確的寫法如下..

const [c, ...restNum] = [99, 98, 97, 96, 95];
console.log(restNum); // [98, 97, 96, 95]

spread

spread operator 可能出現在以下三個位置

1. function calls
   把內容打散傳進 function 內執行

const nums =[12, 8, 2, -2, 5];
Math.min(...nums); // -2

2. 把內容打散，建立新陣列 array literial

const petGroupA = [
    { name: 'Birdy', species: "chicken" }, 
    { name: 'Chick', species: "parrot" }, 
    { name: 'Harry', species: "sparrow" }
];
const petGroupB = [
    { name: 'Blackie', species: "dog" },
    { name: 'Sausage', species: "cat" },
    { name: 'Frank', species: "goat" }
];
const mixedPets = [...petGroupA, ...petGroupB];

獲得全新陣列(當然也可以用 mixedPets = petGroupA.concat(petGroupB)，結果一樣)

也可以用此方法快速進行陣列複製 (僅限一層深度的陣列)

const numArr = [12, 8, 2, -2, 5];
const numArr2 = [...numArr];
numArr2.unshift(88); // [88 , 12, 8, 2, -2, 5 ]

3. 把內容打散，建立物件 object literial
   方法跟建立 array 類似

const worker = {job:"developer" , skill:["js" , "css"] };
const profile = {name:"Caden" , age:28};
const mixedInfo = { ...worker , ...profile };

下篇來談談 arrow function 跟讓人頭痛的 this