[JavaScript] ES6:Destructuring 解構


Posted by Nicolakacha on 2020-09-05

Destructuring 解構

拆掉拆掉,通通拆掉,利用解構語法,我們可以把陣列或物件中的資料解開成為獨立的變數,不用像以前一樣一個個宣告變數,省下了好幾行程式碼啊!

解構陣列

基本語法:

const arr = [1, 2, 3, 4]
let first = arr[0];
let second = arr[1];
let third = arr[2];
let fourth = arr[3];
// 可以這樣寫
let [first, second, third, fourth] = arr
console.log(second, third) // 2 3

可以把宣告和指派分開敘述

let a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

可以設定預設值,當對應的值是 undefined 時,變數就會被宣告為預設值

let a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

利用解構來交換變數

let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

利用解構來解析函式回傳的陣列

function f() {
  return [1, 2];
}

let a, b; 
[a, b] = f(); 
console.log(a); // 1
console.log(b); // 2

忽略某些回傳值

function f() {
  return [1, 2, 3];
}

const [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

使用其餘參數,把陣列的其餘部分解構到一個變數

const [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

解構物件

基本語法:

let family = {
  ming: '小明',
  jay: '杰倫',
};

let ming = family.ming
let jay = family.jay

// 可以這樣寫
let { ming, jay } = family
// ming: 小明
// jay: 杰倫

一樣可以把宣告和指派分開敘述,但要注意要用()包住,且最後要加上 ;,不然左邊的區塊會被當成 block 而非物件

let a, b;
({a, b} = {a:1, b:2});

可以把物件中的屬性解構並擷取到名稱跟該屬性不一樣的變數

const o = {p: 42, q: true};
const {p: foo, q: bar} = o;

console.log(foo); // 42 
console.log(bar); // true

設定預設值

const {a = 10, b = 5} = {a: 3};

console.log(a); // 3
console.log(b); // 5

從作為函式參數的物件中提取某屬性的值

const user = {
  id: 42,
  displayName: 'jdoe',
  fullName: {
    firstName: 'John',
    lastName: 'Doe'
  }
};

function userId({id}) {
  return id;
}

function whois({displayName, fullName: {firstName: name}}) {
  return `${displayName} is ${name}`;
}

console.log(userId(user)); // 42
console.log(whois(user));  // "jdoe is John"

巢狀物件的解構

const obj = {
    name: 'nick',
    age: 30,
    family: {
        father: 'John'  
    },
}

let {name, age, family} = obj
console.log(name, age) // nick 30

let {father} = family
console.log(father) //John

循環取出的解構

const people = [
  {
    name: 'Mike Smith',
    family: {
      mother: 'Jane Smith',
      father: 'Harry Smith',
      sister: 'Samantha Smith'
    },
    age: 35
  },
  {
    name: 'Tom Jones',
    family: {
      mother: 'Norah Jones',
      father: 'Richard Jones',
      brother: 'Howard Jones'
    },
    age: 25
  }
];

for (const {name: n, family: {father: f}} of people) {
  console.log('Name: ' + n + ', Father: ' + f);
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"

在物件解構的時候也可以使用其餘參數

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
console.log(a); // a
console.log(rest) //  {c: 30, d: 40}

混合使用解構陣列與物件

const props = [
  { id: 1, name: 'Fizz'},
  { id: 2, name: 'Buzz'},
  { id: 3, name: 'FizzBuzz'}
];

const [,, { name }] = props;

console.log(name); // "FizzBuzz"

#ES6 #javascript #destructuring







Related Posts

MTR04_0907

MTR04_0907

[ Day 01 ] Python unittest 單元測試 | 專案應用分享

[ Day 01 ] Python unittest 單元測試 | 專案應用分享

[Week6] 給自己看的 HTML 基礎

[Week6] 給自己看的 HTML 基礎


Comments