Coding Diary

JavaScript 解構賦值

12 Mar 2019 |

JavaScript 的解構賦值, 可以將陣列、物件中的資料取出成為一個獨立變數

Destructuring Objects

const personalInfo = {
  firstName: "David",
  lastName: "Wu",
  gender: "Male",
  city: "Taichung"
};

若要取得 personalInfo 這個物件的 firstName 及 city 屬性則可以這樣使用

const { firstName, city } = personalInfo;
console.log(firstName); // David
console.log(city); // Taichung

但假如物件裡的屬性名稱值很長, 就會需要將取出來的值做 rename

const { firstName: fn, lastName: ln } = personalInfo;
console.log(fn); // David
console.log(ln); // Wu

有時再 function 裡會接收多個參數, 可以將參數組成 Object,再function接受參數值裡解構

function getParams({ firstName: fn, lastName: ln, gender, city }) {
  console.log(`${fn}, ${ln}, ${gender}, ${city}`); //* "David, Wu, Male, Taichung"
}

function getParams_2({ firstName: fn, lastName: ln, ...other }) {
  console.log(`${fn}, ${ln}, ${gender}, ${other}`); //* "David, Wu, [object Object]"
  //* 此處的[object Object] 為 {city: "Taichung" gender: "Male"}
}

getParams(personalInfo);
getParams_2(personalInfo);

Destructuring Arrays

依照陣列位置, 依序輸入變數值名稱便能取得陣列值

const [favor1, favor2, favor3] = ["baseball", "basketball", "tennis"];

console.log(favor1); // baseball
console.log(favor2); // basketball
console.log(favor3); // tennis

若變數值宣告次數超過陣列長度值, 那麼超過的變數名稱則為 undefined

const [favor1, favor2] = ["baseball"];

console.log(favor1); // baseball
console.log(favor2); // undefined

參考資料：

Comments