解構賦值

ladybug7發表於2024-06-02
賦值
  1. 陣列的解構賦值
  2. 物件的解構賦值
  3. 字串的解構賦值
  4. 數值和布林值的解構賦值
  5. 函式引數的解構賦值
  6. 圓括號問題
  7. 用途

https://wangdoc.com/es6/destructuring#navbar

網道

變數的解構賦值用途很多。

（1）交換變數的值

let x = 1;
let y = 2;
[x, y] = [y, x]

上面程式碼交換變數 x 和 y 的值，這樣的寫法不僅簡潔，而且易讀，語義非常清晰。

（2）從函式返回多個值

函式只能返回一個值，如果要返回多個值，只能將他們放在陣列或物件裡返回。有了結構賦值，取出這些值就非常方便。

// 返回一個陣列
function example() {
  return [1, 2, 3];
}
let {a, b, c} = example();


// 返回一個物件
function example2() {
     return {
        foo: 1,
        bar: 2
    }
}
let  { foo, bar } = example();

（3）函式引數的定義

結構賦值可以方便的將一組引數與變數名對應起來。

// 引數是一組有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 引數是一組無次序的值
function f2({x , y, z}) { ... }
f2({ z: 3, y: 2, x: 1 });

（4）提取 JSON 資料

結構賦值對提取 JSON 物件中的資料，尤其有用。

let jsonDta = {
    id: 42,
    status: 'OK',
    data: [867. 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, 'ok', [867, 5309]

上面程式碼可以快速提取 JSON 資料的值。

（5）函式引數的預設值

jQuery.ajax = function (url, {
    async = true,
    beforeSend = function () {},
    cache = true,
    complete = function () {},
    crossDomain = false,
    global = true,
    // ... more config
} = {}) {
   // ... do stuff     
};

指定引數的預設值，就避免了在函式體內部再寫 var foo = config.foo || 'default foo'; 這樣的語句。

（6）遍歷 Map 結構

任何部署了 Iterator 介面的物件，都可以用 for ... of 迴圈遍歷。Map 結構原生支援 Iterator 介面，配合變數的解構賦值，獲取鍵名和鍵值就非常方便。

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
    console.log(key + ' is ' + value);
}
// first is hello
// second is world

（7）輸入模組的指定方法

載入模組時，往往需要指定輸入哪些方法。結構賦值使得輸入語句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");

相關文章