ES6 -- 變量的解構復制

ingood 發布于2019-08-21 14:21 / 651人閱讀

摘要：數組的解構賦值基本用法屬于模式匹配，只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值對于結構，也可以使用數組的解構賦值。結構原生支持接口，配合變量的解構賦值，獲取鍵名和鍵值就非常方便。

1、數組的解構賦值 基本用法

let [foo, [[bar], baz]] = [1, [[2], 3]];
let [head, ...tail] = [1, 2, 3, 4];

屬于“模式匹配”，只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值

對于Set結構，也可以使用數組的解構賦值。

let [x, y, z] = new Set(["a", "b", "c"])
x // "a"

這不懂？？？？
事實上，只要某種數據結構具有Iterator接口，都可以采用數組形式的解構賦值。

function* fibs() {
  var a = 0;
  var b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

var [first, second, third, fourth, fifth, sixth] = fibs();
sixth // 5

上面代碼中，fibs是一個Generator函數，原生具有Iterator接口。解構賦值會依次從這個接口獲取值。

默認值

var [foo = true] = [];
foo // true

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

2、對象的解構賦值

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

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

var { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined
//foo是模式，不會賦值或者聲明，baz是變量

let baz;
let {bar: baz} = {bar: 1}; // SyntaxError: Duplicate declaration "baz"

let baz;
({bar: baz} = {bar: 1}); // 成功

采用這種寫法時，變量的聲明和賦值是一體的。對于let和const來說，變量不能重新聲明，所以一旦賦值的變量以前聲明過，就會報錯。

重點：

let { log, sin, cos } = Math;

對象的解構賦值，可以很方便地將現有對象的方法，賦值到某個變量。
上面代碼將Math對象的對數、正弦、余弦三個方法，賦值到對應的變量上，使用起來就會方便很多。

3、字符串的解構賦值

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

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

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

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

4、數值和布爾值的解構賦值

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

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

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

解構賦值的規則，只要等號右邊的值不是對象，就先將其轉為對象。由于undefined和null無法轉為對象，所以對它們進行解構賦值，都會報錯。

5、函數參數的解構賦值

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]

上面代碼是為函數move的參數指定默認值，而不是為變量x和y指定默認值，所以會得到與前一種寫法不同的結果。

6、用途

（1）交換變量的值

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

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

（2）從函數返回多個值

函數只能返回一個值，如果要返回多個值，只能將它們放在數組或對象里返回。有了解構賦值，取出這些值就非常方便。

// 返回一個數組

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

// 返回一個對象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
var { 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對象中的數據，尤其有用。

var jsonData = {
  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接口，配合變量的解構賦值，獲取鍵名和鍵值就非常方便。

var 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) {
  // ...
}

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

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

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

云服務器 GPU云服務器對象解構解構函數解構賦值復制的鏡像

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

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

es6 - 解構賦值

摘要：比如上面展示的情況都是可以聯合使用的比如對象的解構賦值對象的解構賦值是基于屬性的。當給已存在的變量解構賦值時，注意加這是由于如果不加會把左邊看成一個代碼塊，會報錯。注意事項數組的解構賦值中，使用的變量必須放在最后。解構賦值解構賦值是一個聽起來比較高大上的特性，但按我的理解，它就是一種語法糖。它并沒有賦予js更強大的能力，只是讓賦值操作更加的靈活，效率。在es6之前，賦值操作需要=...

DirtyMind 2019-08-26 11:45 評論0 收藏0
ES6 ...操作符

摘要：在語法中，操作符有兩種意義剩余語法，參數和展開語法，展開數組對象，作為函數數組對象的擴展運算符。使用和參數進行操作其余參數傳給原始函數展開語法運算則可以看作是參數的逆運算。在ES6語法中，...操作符有兩種意義：rest(剩余語法，rest參數) 和 spread(展開語法，展開數組/對象)，作為函數、數組、對象的擴展運算符。從某種意義上說，剩余語法與展開語法是相反的：剩余語法將多...

MorePainMoreGain 2019-08-23 12:12 評論0 收藏0
ES6學習總結（1）

摘要：返回一個對象，遍歷對象自身和繼承的所有可枚舉屬性不含，與相同和在紅寶書中就已經提到過屬性，表示的是引用類型實例的一個內部指針，指向該實例的構造函數的原型對象。半個月前就決定要將ES6的學習總結一遍，結果拖延癥一犯，半個月就過去了，現在補起來，慚愧慚愧。阮一峰的《ES6標準入門》這本書有300頁左右，除了幾個新的API和js語法的擴展,真正有價值的內容并不多。所謂存在即合理，每部分的...

happyfish 2019-08-20 15:38 評論0 收藏0
【ES6】對象的新功能與解構賦值

摘要：通過字面量語法擴展新增方法改進原型等多種方式加強對象的使用，并通過解構簡化對象的數據提取過程。四解構賦值為數組和對象字面量提供了新特性解構，可以簡化數據提取的過程，減少同質化的代碼。 ES6 通過字面量語法擴展、新增方法、改進原型等多種方式加強對象的使用，并通過解構簡化對象的數據提取過程。一、字面量語法擴展在 ES6 模式下使用字面量創建對象更加簡潔，對于對象屬性來說，屬性初始值可...

Lowky 2019-08-23 12:26 評論0 收藏0
帶你入門 JavaScript ES6 (一)

摘要：是國際組織于年月日發布的第六版，正式名為通常被成為或。二模版字面量提供一種簡單實現表達式嵌套的字符串字面量操作，簡而言之就是能夠以簡單的方法實現字符串拼接操作。本文同步帶你入門 JavaScript ES6 (一)，轉載請注明出處。 ES6: 是 ECMA國際組織于 2015 年 6 月 17 日發布的 ECMAScript 第六版，正式名為 ECMAScript 2015,通常被...

lindroid 2019-08-21 18:24 評論0 收藏0