ES6之解構賦值

Simon 發布于2019-08-26 10:40 / 707人閱讀

摘要：解構賦值允許指定默認值內部使用嚴格相等運算符，判斷一個位置是否有值。默認值可以引用解構賦值的其他變量，但該變量必須已經聲明。注意，對象的解構賦值可以取到繼承的屬性。解構賦值使得輸入語句非常清晰。

數組解構

只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值。

let [a, b, c] = [1, 2, 3];

如果解構不成功，變量的值就等于 undefined。

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo  // 1
bar  // 2
baz  // 3

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

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

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

不完全解構情況下，解構依然可以成功。即等號左邊的模式，只匹配一部分的等號右邊的數組。

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

解構賦值允許指定默認值

ES6 內部使用嚴格相等運算符（===），判斷一個位置是否有值。所以，只有當一個數組成員嚴格等于undefined，默認值才會生效。

let [x, y = "b"] = ["a"];             // x="a", y="b"
let [x, y = "b"] = ["a", undefined];  // x="a", y="b"
let [x = 1] = [null];                 // x=null

如果默認值是一個表達式，那么這個表達式是惰性求值的，即只有在用到的時候，才會求值。

function f() {
  console.log("aaa");
}

let [x = f()] = [1];

上面代碼中，因為 x 能取到值，所以函數 f 根本不會執行。

默認值可以引用解構賦值的其他變量，但該變量必須已經聲明。

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

對象解構

對象的解構與數組有一個重要的不同。數組的元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。如果解構失敗，變量的值等于 undefined。

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

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

如果變量名與屬性名不一致，必須寫成下面這樣。

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"

也就是說，對象的解構賦值的內部機制，是先找到同名屬性，然后再賦給對應的變量。真正被賦值的是后者，而不是前者。

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined

與數組一樣，解構也可以用于嵌套結構的對象。

let obj = {};
let arr = [];

({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });

obj // {prop:123}
arr // [true]

注意，對象的解構賦值可以取到繼承的屬性。

const obj1 = {};
const obj2 = { foo: "bar" };
Object.setPrototypeOf(obj1, obj2);

const { foo } = obj1;
foo // "bar"

對象的解構也可以指定默認值

默認值生效的條件是，對象的屬性值嚴格等于(===) undefined。

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

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

如果要將一個已經聲明的變量用于解構賦值，必須將整個解構賦值語句，放在一個圓括號里面，才可以正確執行。

let x;
{x} = {x: 1};   // SyntaxError: syntax error

// 正確的寫法
let x;
({x} = {x: 1});

因為 JavaScript 引擎會將 {x} 理解成一個代碼塊，從而發生語法錯誤。只有不將大括號寫在行首，避免 JavaScript 將其解釋為代碼塊，才能解決這個問題。

解構賦值用途 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 數據

解構賦值對提取 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. 輸入模塊的指定方法

對象的解構賦值，可以很方便地將現有對象的方法，賦值到某個變量。
加載模塊時，往往需要指定輸入哪些方法。解構賦值使得輸入語句非常清晰。

let { log, sin, cos } = Math;

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

參考鏈接：
變量的解構賦值

GPU云服務器云服務器解構賦值對象解構解構函數 ES6

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106581.html

ES6筆記之變量解構賦值

摘要：變量的解構賦值中允許按照一定模式，從數組和對象中提取，對變量進行賦值。數組的解構賦值上面的代碼標示可以從數組中提取值，按照位置的對應關系對變量進行賦值。默認值解構賦值允許指定默認值。變量的解構賦值 ES6中允許按照一定模式，從數組和對象中提取，對變量進行賦值。數組的解構賦值 var [a,b,c] = [1,2,3]; a // 1; b // 2; c // 3; 上面的代碼標示...

baukh789 2019-08-19 17:34 評論0 收藏0
es6之解構賦值

摘要：的語法已經出了很長的時間了，在使用上也可以通過這類的編譯工具轉譯為瀏覽器可以識別的的語法，但是依舊有很多開發在寫代碼的時候，依舊沒有用的語法，而是習慣使用老的語法，這篇文章主要會介紹解構賦值基本用法以及在實際使用場景中相比語法的優勢，讓大家 es6的語法已經出了很長的時間了，在使用上也可以通過babel這類的編譯工具轉譯為瀏覽器可以識別的es5的語法，但是依舊有很多開發在寫代碼的時候，...

yeooo 2019-08-23 13:57 評論0 收藏0
ES6入門之變量的解構賦值

摘要：數組的解構賦值基本用法允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為結構。如下以上都會報錯但是如果左邊為數組，右邊為字符串，將會取字符串的第一個下標的值對于結構，同樣可以使用數組的解構賦值。 showImg(https://segmentfault.com/img/remote/1460000018826068); 數組的解構賦值基本用法 ES6 允許按照一定模式...

gityuan 2019-08-23 16:51 評論0 收藏0
ES6學習手稿之基本類型擴展

摘要：它是一個通用標準，奠定了的基本語法。年月發布了的第一個版本，正式名稱就是標準簡稱。結語的基本擴展還有一些沒有在這里詳細介紹。前言 ES6標準以及頒布兩年了，但是，好像還沒有完全走進我們的日常開發。這篇文章從ES6的基本類型擴展入手，逐步展開對ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創造的，該公司1996年11月將JavaSc...

tommego 2019-08-21 18:25 評論0 收藏0
JavaScript基礎之ES6對象解構賦值

摘要：具體的分析暫時不討論解決的方式很簡單，把上面的代碼塊變成一段表達式就小明總結解構賦值是提供一個十分方便的表達式。的解構賦值小明的對象賦值這里可以被賦予初始值小明對象的屬性不存在能夠賦值給多個變量對象解構賦值 ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構(Destructuring)。 --- 阮一峰《ECMAScript...

sutaking 2019-08-22 15:31 評論0 收藏0
ES6語法之解構賦值

摘要：類似數組的對象都有一個屬性，因此還可以對這個屬性解構賦值。默認值解構賦值允許指定默認值當結構不成功時使用默認值。用途變量的解構賦值用途很多。有了解構賦值，取出這些值就非常方便。原始操作我們先看看下面的兩個代碼段，它們使用 ES6 之前的技巧提取數據： const point = [10, 25, -34]; const x = point[0]; const y = point[...

Hancock_Xu 2019-08-21 18:32 評論0 收藏0