阮一峰es6第三章學習筆記-變量的解構賦值

數(shù)組的解構賦值

基本用法

  • 解構：按照一定模式，從數(shù)組和對象中提取值，對變量進行賦值。

  • 本質：解構的本質其實是一種“模式匹配”，只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值。而模式相同包括①左右兩邊結構完全相同②等號左邊的模式，只匹配等號右邊的一部分數(shù)組。

    • 例子：
    let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

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

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []



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

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

  • 如果解構不成功，變量就會變成undefined

    let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

上面的foo都會變成undefined

  • 額外：Set結構和Generator函數(shù)都是具有Iterator借口，所以可以也可以進行解構賦值。

默認值

-解構賦值允許指定默認值，但要注意一點，只有當右邊的數(shù)組成員嚴格等于”undefined“的時候，默認值才會生效
- 默認值生效的例子
```
let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
```
- 默認值不生效的例子
```
    let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null
```
備注：null === undefined 返回的是false，所以null不算是嚴格等于undefined，因此默認值不能生效
- 當默認值是一個表達式的時候，只有在用到的時候才會求值，這鐘叫`惰性求值`
```
    function f() {
  console.log('aaa');
}

let [x = f()] = [1];
```
根據(jù)我們上面所說的，x是等于1，因為1不是嚴格等于undefined，因此默認值不生效。
- 在默認值中，你可以引用解構賦值的其他變量，但這個變量必須在引用之前（意思是該變量必須已經聲明），否則報錯
```
    let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined
```

對象的解構賦值

  • 對象的解構與數(shù)組解構的不同點：數(shù)組元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

    let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

  • 對象解構的實際形式如下：

    let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };

    它是先找到同名屬性，然后再賦給對象的變量，所以真正被賦值的是后者，前者則是它的模式，我的理解是用來匹配的。

  • 根據(jù)上面的知識，可以知道，如果變量名與屬性名不一樣，則要寫成下面解構

    let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

  • 解構賦值用在嵌套結構的對象中

    const node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};

let { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc  // Object {start: Object}
start // Object {line: 1, column: 5}

    值得關注的是，對象嵌套中，如果想要賦值給對象的屬性，那么要寫完整，如loc：{start}，不能直接寫start。

對象解構中的默認值

  • 對象中的解構也可以使用默認值，生效的條件和數(shù)組一樣，必須右邊的值是嚴格的undefinedvar

    {x = 3} = {};
x // 3

var {x, y = 5} = {x: 1};
x // 1
y // 5

var {x: y = 3} = {};
y // 3

var {x: y = 3} = {x: 5};
y // 5

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

var {x = 3} = {x: undefined};
x // 3

var {x = 3} = {x: null};
x // null

  • 將一個已經聲明的變量用于解構賦值，需要使用圓括號

    // 錯誤的寫法
let x;
{x} = {x: 1};
// SyntaxError: syntax error
// 正確的寫法
let x;
({x} = {x: 1});

    圓括號的作用是避免javascript將其解釋為代碼塊。

  • 對象解構賦值的一些好的用法：將現(xiàn)有的對象方法賦值到某個變量let { log, sin, cos } = Math;

  • 數(shù)組也可以進行對象屬性的解構

    let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

字符串的解構賦值

  • 字符串也可以解構賦值。這是因為此時，字符串被轉換成了一個類似數(shù)組的對象。

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

  • 類似數(shù)組的對象都有一個length屬性，因此還可以對這個屬性解構賦值。

    let {length : len} = 'hello';
len // 5

數(shù)值和布爾值的解構賦值

  • 解構賦值時，如果等號右邊是數(shù)值和布爾值，則會先轉為對象

    let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

    上面代碼中，數(shù)值和布爾值的包裝對象都有toString屬性，因此s可以拿到值。

  • 解構賦值的規(guī)則是：只要等號右邊的值不是對象或數(shù)組，就先將其轉為對象。由于undefined和null無法轉為對象，所以對它們進行解構賦值都會報錯

    let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

函數(shù)參數(shù)的解構賦值

  • 函數(shù)參數(shù)進行解構賦值

    function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

  • 函數(shù)參數(shù)解構使用默認值

    // 第一種寫法
function move({x = 0, y = 0} = {}) {
      return [x, y];
    }
    
    move({x: 3, y: 8}); // [3, 8]
    move({x: 3}); // [3, 0]
    move({}); // [0, 0]
    move(); // [0, 0]

    // 第二種寫法
    function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

    上面兩種寫法得到不同的結果原因是：第一種寫法是為x和y設定默認值，而第二種寫法是為參數(shù)設定默認值，而不是為x和y，什么意思呢，就是只有當沒有參數(shù)傳進來的時候，整個參數(shù)才會取默認值。

圓括號問題

  • ES6對于圓括號的規(guī)則：只要有可能導致解構的歧義，就不得使用圓 括號
  • 建議：能不用則不用

不能使用圓括號的情況

  • 變量聲明語句

    // 全部報錯
let [(a)] = [1];

let {x: (c)} = {};
let ({x: c}) = {};
let {(x: c)} = {};
let {(x): c} = {};

let { o: ({ p: p }) } = { o: { p: 2 } };

  • 函數(shù)參數(shù)
    函數(shù)參數(shù)也是變量聲明的一種，因此不能使用圓括號

    // 報錯
function f([(z)]) { return z; }
// 報錯
function f([z,(x)]) { return x; }

  • 賦值語句的模式

  • 將整個模式放在圓括號之中，導致報錯。

// 全部報錯
({ p: a }) = { p: 42 };
([a]) = [5];
  • 上面代碼將一部分模式放在圓括號之中，導致報錯。
// 報錯
[({ p: a }), { x: c }] = [{}, {}];

可以使用圓括號的情況

  • 可以使用圓括號的情況只有一種：賦值語句的非模式部分，可以使用圓括號。
[(b)] = [3]; // 正確
({ p: (d) } = {}); // 正確
[(parseInt.prop)] = [3]; // 正確
  • 上面三行語句都可以正確執(zhí)行，因為首先它們都是賦值語句，而不是聲明語句；其次它們的圓括號都不屬于模式的一部分。第一行語句中，模式是取數(shù)組的第一個成員，跟圓括號無關；第二行語句中，模式是p，而不是d；第三行語句與第一行語句的性質一致。

解構賦值的用途

交換變量的值

let x = 1;
let y = 2;

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

優(yōu)點：簡潔，易讀，語義清晰

從函數(shù)返回多個值

可以十分方便的從多個返回值中取值

// 返回一個數(shù)組

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一個對象

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

函數(shù)參數(shù)的定義

解構賦值可以方便地將一組參數(shù)與變量名對應起來。

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

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

提取JSON數(shù)據(jù)

解構賦值對提取 JSON 對象中的數(shù)據(jù)，尤其有用。

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

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

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

函數(shù)參數(shù)的默認值

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

遍歷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

如果只想獲取鍵名，或者只想獲取鍵值，可以寫成下面這樣。

// 獲取鍵名
for (let [key] of map) {
  // ...
}

// 獲取鍵值
for (let [,value] of map) {
  // ...
}

輸入模塊的指定方法

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

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

參考資料

阮一峰es6教程

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容