資訊專欄INFORMATION COLUMN
摘要：數(shù)組的解構(gòu)賦值基本用法屬于模式匹配，只要等號(hào)兩邊的模式相同，左邊的變量就會(huì)被賦予對(duì)應(yīng)的值對(duì)于結(jié)構(gòu)，也可以使用數(shù)組的解構(gòu)賦值。結(jié)構(gòu)原生支持接口，配合變量的解構(gòu)賦值，獲取鍵名和鍵值就非常方便。
1、數(shù)組的解構(gòu)賦值 基本用法
let [foo, [[bar], baz]] = [1, [[2], 3]]; let [head, ...tail] = [1, 2, 3, 4];
屬于“模式匹配”，只要等號(hào)兩邊的模式相同，左邊的變量就會(huì)被賦予對(duì)應(yīng)的值
對(duì)于Set結(jié)構(gòu)，也可以使用數(shù)組的解構(gòu)賦值。
let [x, y, z] = new Set(["a", "b", "c"]) x // "a"
這不懂？？？？
事實(shí)上，只要某種數(shù)據(jù)結(jié)構(gòu)具有Iterator接口，都可以采用數(shù)組形式的解構(gòu)賦值。
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是一個(gè)Generator函數(shù)，原生具有Iterator接口。解構(gòu)賦值會(huì)依次從這個(gè)接口獲取值。
默認(rèn)值var [foo = true] = []; foo // true
ES6內(nèi)部使用嚴(yán)格相等運(yùn)算符（===），判斷一個(gè)位置是否有值。所以，如果一個(gè)數(shù)組成員不嚴(yán)格等于undefined，默認(rèn)值是不會(huì)生效的。
2、對(duì)象的解構(gòu)賦值var { foo, bar } = { foo: "aaa", bar: "bbb" };
數(shù)組的元素是按次序排列的，變量的取值由它的位置決定；
而對(duì)象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。
var { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined
//foo是模式，不會(huì)賦值或者聲明，baz是變量
let baz;
let {bar: baz} = {bar: 1}; // SyntaxError: Duplicate declaration "baz"
let baz;
({bar: baz} = {bar: 1}); // 成功
采用這種寫法時(shí)，變量的聲明和賦值是一體的。對(duì)于let和const來說，變量不能重新聲明，所以一旦賦值的變量以前聲明過，就會(huì)報(bào)錯(cuò)。
重點(diǎn)：
let { log, sin, cos } = Math;
對(duì)象的解構(gòu)賦值，可以很方便地將現(xiàn)有對(duì)象的方法，賦值到某個(gè)變量。
上面代碼將Math對(duì)象的對(duì)數(shù)、正弦、余弦三個(gè)方法，賦值到對(duì)應(yīng)的變量上，使用起來就會(huì)方便很多。
字符串也可以解構(gòu)賦值。這是因?yàn)榇藭r(shí)，字符串被轉(zhuǎn)換成了一個(gè)類似數(shù)組的對(duì)象。
const [a, b, c, d, e] = "hello"; a // "h" b // "e" c // "l" d // "l" e // "o"
類似數(shù)組的對(duì)象都有一個(gè)length屬性，因此還可以對(duì)這個(gè)屬性解構(gòu)賦值。
let {length : len} = "hello";
len // 5
4、數(shù)值和布爾值的解構(gòu)賦值
解構(gòu)賦值時(shí)，如果等號(hào)右邊是數(shù)值和布爾值，則會(huì)先轉(zhuǎn)為對(duì)象。
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
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]
上面代碼是為函數(shù)move的參數(shù)指定默認(rèn)值，而不是為變量x和y指定默認(rèn)值，所以會(huì)得到與前一種寫法不同的結(jié)果。
6、用途（1）交換變量的值
[x, y] = [y, x];
上面代碼交換變量x和y的值，這樣的寫法不僅簡(jiǎn)潔，而且易讀，語義非常清晰。
（2）從函數(shù)返回多個(gè)值
函數(shù)只能返回一個(gè)值，如果要返回多個(gè)值，只能將它們放在數(shù)組或?qū)ο罄锓祷亍Ｓ辛私鈽?gòu)賦值，取出這些值就非常方便。
// 返回一個(gè)數(shù)組
function example() {
return [1, 2, 3];
}
var [a, b, c] = example();
// 返回一個(gè)對(duì)象
function example() {
return {
foo: 1,
bar: 2
};
}
var { foo, bar } = example();
（3）函數(shù)參數(shù)的定義
解構(gòu)賦值可以方便地將一組參數(shù)與變量名對(duì)應(yīng)起來。
// 參數(shù)是一組有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3])
// 參數(shù)是一組無次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1})
（4）提取JSON數(shù)據(jù)
解構(gòu)賦值對(duì)提取JSON對(duì)象中的數(shù)據(jù)，尤其有用。
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數(shù)據(jù)的值。
（5）函數(shù)參數(shù)的默認(rèn)值
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true,
// ... more config
}) {
// ... do stuff
};
指定參數(shù)的默認(rèn)值，就避免了在函數(shù)體內(nèi)部再寫var foo = config.foo || "default foo";這樣的語句。
（6）遍歷Map結(jié)構(gòu)
任何部署了Iterator接口的對(duì)象，都可以用for...of循環(huán)遍歷。Map結(jié)構(gòu)原生支持Iterator接口，配合變量的解構(gòu)賦值，獲取鍵名和鍵值就非常方便。
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）輸入模塊的指定方法
加載模塊時(shí)，往往需要指定輸入那些方法。解構(gòu)賦值使得輸入語句非常清晰。
const { SourceMapConsumer, SourceNode } = require("source-map");
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/87888.html
摘要：比如上面展示的情況都是可以聯(lián)合使用的比如對(duì)象的解構(gòu)賦值對(duì)象的解構(gòu)賦值是基于屬性的。當(dāng)給已存在的變量解構(gòu)賦值時(shí)，注意加這是由于如果不加會(huì)把左邊看成一個(gè)代碼塊，會(huì)報(bào)錯(cuò)。注意事項(xiàng)數(shù)組的解構(gòu)賦值中，使用的變量必須放在最后。 解構(gòu)賦值 解構(gòu)賦值是一個(gè)聽起來比較高大上的特性，但按我的理解，它就是一種語法糖。它并沒有賦予js更強(qiáng)大的能力，只是讓賦值操作更加的靈活，效率。 在es6之前，賦值操作需要=...
摘要：在語法中，操作符有兩種意義剩余語法，參數(shù)和展開語法，展開數(shù)組對(duì)象，作為函數(shù)數(shù)組對(duì)象的擴(kuò)展運(yùn)算符。使用和參數(shù)進(jìn)行操作其余參數(shù)傳給原始函數(shù)展開語法運(yùn)算則可以看作是參數(shù)的逆運(yùn)算。 在ES6語法中，...操作符有兩種意義：rest(剩余語法，rest參數(shù)) 和 spread(展開語法，展開數(shù)組/對(duì)象)，作為函數(shù)、數(shù)組、對(duì)象的擴(kuò)展運(yùn)算符。 從某種意義上說，剩余語法與展開語法是相反的：剩余語法將多...
摘要：返回一個(gè)對(duì)象，遍歷對(duì)象自身和繼承的所有可枚舉屬性不含，與相同和在紅寶書中就已經(jīng)提到過屬性，表示的是引用類型實(shí)例的一個(gè)內(nèi)部指針，指向該實(shí)例的構(gòu)造函數(shù)的原型對(duì)象。 半個(gè)月前就決定要將ES6的學(xué)習(xí)總結(jié)一遍，結(jié)果拖延癥一犯，半個(gè)月就過去了，現(xiàn)在補(bǔ)起來，慚愧慚愧。 阮一峰的《ES6標(biāo)準(zhǔn)入門》這本書有300頁左右，除了幾個(gè)新的API和js語法的擴(kuò)展,真正有價(jià)值的內(nèi)容并不多。所謂存在即合理，每部分的...
摘要：通過字面量語法擴(kuò)展新增方法改進(jìn)原型等多種方式加強(qiáng)對(duì)象的使用，并通過解構(gòu)簡(jiǎn)化對(duì)象的數(shù)據(jù)提取過程。四解構(gòu)賦值為數(shù)組和對(duì)象字面量提供了新特性解構(gòu)，可以簡(jiǎn)化數(shù)據(jù)提取的過程，減少同質(zhì)化的代碼。 ES6 通過字面量語法擴(kuò)展、新增方法、改進(jìn)原型等多種方式加強(qiáng)對(duì)象的使用，并通過解構(gòu)簡(jiǎn)化對(duì)象的數(shù)據(jù)提取過程。 一、字面量語法擴(kuò)展 在 ES6 模式下使用字面量創(chuàng)建對(duì)象更加簡(jiǎn)潔，對(duì)于對(duì)象屬性來說，屬性初始值可...
摘要：是國(guó)際組織于年月日發(fā)布的第六版，正式名為通常被成為或。二模版字面量提供一種簡(jiǎn)單實(shí)現(xiàn)表達(dá)式嵌套的字符串字面量操作，簡(jiǎn)而言之就是能夠以簡(jiǎn)單的方法實(shí)現(xiàn)字符串拼接操作。 本文同步 帶你入門 JavaScript ES6 (一)，轉(zhuǎn)載請(qǐng)注明出處。 ES6: 是 ECMA國(guó)際組織于 2015 年 6 月 17 日發(fā)布的 ECMAScript 第六版，正式名為 ECMAScript 2015,通常被...
閱讀 3078·2021-11-24 09:38
閱讀 1330·2021-09-22 15:27
閱讀 2968·2021-09-10 10:51
閱讀 1504·2021-09-09 09:33
閱讀 917·2021-08-09 13:47
閱讀 2072·2019-08-30 13:05
閱讀 892·2019-08-29 15:15
閱讀 2425·2019-08-29 12:21
