1. 程式人生 > >變數的解構賦值及用途

變數的解構賦值及用途

一、陣列的解構賦值
1、基本用法:
完全解構:
let a = 1;
let b = 2;
let c = 3; 可以寫成 let [a, b, c] = [1, 2, 3];
不完全解構:
等號左邊的模式,只匹配一部分的等號右邊的陣列,解構依然成功

2、預設值:
解構解析允許指定預設值
如:let [x, y = ‘b’] = [‘a’]; // x=‘a’, y=‘b’

注意:只有當一個數組成員嚴格等於undefined,預設值才會生效;null不嚴格等於undefined

預設值可以引用解構賦值的其他變數,但該變數必須已經宣告

二、物件的解構賦值
1、基本用法與陣列一致

2、不同點在於:陣列的元素是按次序排列的,變數的取值由它的位置決定;而物件的屬性沒有次序,變數必須與屬性同名,才能取到正確的值。

三、字串的解構賦值
1、字串被轉換成了一個類似陣列的物件,如:

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

四、數值和布林值的解構賦值、函式引數的解構賦值等

五、圓括號的問題
1、圓括號不能用在宣告語句,只能用在賦值語句
2、圓括號不能用在模式上(({ p: (d) } = {}); // 正確,其中p就是模式,d是變數)

六、用途
(1)交換變數的值

let x = 1;
let y = 2;

[x, y] = [y, x];

(2)從函式返回多個值(以陣列或物件形式),可以更方便的取到這些值

// 返回一個數組

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

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

(3)函式引數的定義:方便將一組引數與變數名對應起來

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

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

(4)提取json資料(※)

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

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

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

(5)函式引數的預設值
(沒搞明白,搞明白了再寫)

(6)for…of迴圈遍歷Map結構,用解構賦值去獲取鍵名和鍵值

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");