資訊專欄INFORMATION COLUMN
摘要：類似數組的對象都有一個屬性，因此還可以對這個屬性解構賦值。默認值解構賦值允許指定默認值當結構不成功時使用默認值。用途變量的解構賦值用途很多。有了解構賦值，取出這些值就非常方便。
原始操作
我們先看看下面的兩個代碼段，它們使用 ES6 之前的技巧提取數據：
const point = [10, 25, -34]; const x = point[0]; const y = point[1]; const z = point[2]; console.log(x, y, z); //10 25 -34
上述示例顯示了從數組中提取值的過程。
const gemstone = {
type: "quartz",
color: "rose",
karat: 21.29
};
const type = gemstone.type;
const color = gemstone.color;
const karat = gemstone.karat;
console.log(type, color, karat); //quartz rose 21.29
該示例顯示了從對象中提取值的過程。
二者都很簡單，但是這兩個示例都沒用到解構。
那么解構到底是什么？
解構ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。
解構數組中的值const point = [10, 25, -34]; const [x, y, z] = point; console.log(x, y, z); //10 25 -34
在此示例中，方括號 [ ] 表示被解構的數組，x、y 和 z 表示要將數組中的值存儲在其中的變量。注意，你不需要指定要從中提取值的索引，因為索引可以暗示出來。
本質上，這種寫法屬于“模式匹配”，只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值。
let [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 bar // 2 baz // 3 let [ , , third] = ["foo", "bar", "baz"]; third // "baz"
如果解構不成功，變量的值就等于undefined。
let [bar, foo] = [1]; // foo: undefined解構對象中的值
const gemstone = {
type: "quartz",
color: "rose",
karat: 21.29
};
const {type, color, karat} = gemstone;
console.log(type, color, karat);
在此示例中，花括號 { } 表示被解構的對象，type、color 和 karat 表示要將對象中的屬性存儲到其中的變量。注意不用指定要從其中提取值的屬性。因為 gemstone 具有 type 屬性，值自動存儲在 type 變量中。類似地，gemstone 具有 color 屬性，因此 color 的值自動存儲在 color 變量中。
你還可以指定在解構對象時要選擇的值。例如，let {color} = gemstone; 將僅選擇 gemstone 對象中的 color 屬性。
注意：對象的解構與數組有一個重要的不同。數組的元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。
如果變量名與屬性名不一致，必須寫成下面這樣。
let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
//foo是匹配的模式，baz才是變量。真正被賦值的是變量baz，而不是模式foo。
這實際上說明，對象的解構賦值是下面形式的簡寫:
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
字符串的解構賦值
字符串也可以解構賦值。這是因為此時，字符串被轉換成了一個類似數組的對象。
const [a, b, c, d, e] = "hello"; a // "h" b // "e" c // "l" d // "l" e // "o"
類似數組的對象都有一個length屬性，因此還可以對這個屬性解構賦值。
let {length} = "hello";
length // 5
默認值
解構賦值允許指定默認值, 當結構不成功時, 使用默認值。
let [x = 1] = [undefined]; x // 1 let [x = 1] = [null]; x // null let [x, y = "b"] = ["a"]; // x="a", y="b"
在函數參數中指定參數的默認值，就避免了在函數體內部再寫var foo = config.foo || "default foo";這樣的語句。
用途變量的解構賦值用途很多。
交換變量的值let x = 1; let y = 2; [x, y] = [y, x]; //x: 2, y: 1從函數返回多個值
函數只能返回一個值，如果要返回多個值，只能將它們放在數組或對象里返回。有了解構賦值，取出這些值就非常方便。
// 返回一個數組
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一個對象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
函數參數的定義
// 參數是一組有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 參數是一組無次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
提取 JSON 數據
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
上面代碼可以快速提取 JSON 數據的值。
輸入模塊的指定方法const { SourceMapConsumer, SourceNode } = require("source-map");
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/90559.html
摘要：它是一個通用標準，奠定了的基本語法。年月發(fā)布了的第一個版本，正式名稱就是標準簡稱。結語的基本擴展還有一些沒有在這里詳細介紹。 前言 ES6標準以及頒布兩年了，但是，好像還沒有完全走進我們的日常開發(fā)。這篇文章從ES6的基本類型擴展入手，逐步展開對ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創(chuàng)造的，該公司1996年11月將JavaSc...
摘要：具體的分析暫時不討論解決的方式很簡單，把上面的代碼塊變成一段表達式就小明總結解構賦值是提供一個十分方便的表達式。的解構賦值小明的對象賦值這里可以被賦予初始值小明對象的屬性不存在能夠賦值給多個變量 對象解構賦值 ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構(Destructuring)。 --- 阮一峰《ECMAScript...
摘要：對象解構如果使用解析聲明變量，則必須提供初始化程序也就是等號右側的值以下語句有語法錯誤解構賦值表達式也就是右側的表達式如果為或會導致程序拋出錯誤，因為任何嘗試讀取或的屬性的行為都會觸發(fā)運行時錯誤上面代碼是聲明變量同時賦值相應的屬性值那如果已 對象解構 如果使用var、let、const解析聲明變量，則必須提供初始化程序（也就是等號右側的值）以下語句有語法錯誤 var { type, n...
閱讀 1886·2021-11-12 10:36
閱讀 2324·2021-09-01 10:29
閱讀 2358·2019-08-30 15:56
閱讀 1026·2019-08-30 12:56
閱讀 2357·2019-08-26 13:58
閱讀 2278·2019-08-23 18:38
閱讀 1498·2019-08-23 18:32
閱讀 2114·2019-08-23 16:53
