資訊專欄INFORMATION COLUMN
摘要：只要某種數據結構具有接口，都可以采用數組形式的解構賦值。解構賦值允許指定默認值。默認值可以引用解構賦值的其他變量，但該變量必須已經聲明。解構也可以用于嵌套結構的對象。
Es6 新增了destructuring(解構)語法糖, 我們快來了解一下:
可以按照一定的模式從數組/對象中提取值,為變量賦值
數組解構
var a = 1; var b = 2; var c = 3;
可以寫作:
var [a, b, c] = [1, 2, 3];
本質上，這種寫法屬于“模式匹配”，只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值。
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 let [x, y, z] = new Set(["a", "b", "c"]); x // "a"
只要某種數據結構具有Iterator接口，都可以采用數組形式的解構賦值。
解構賦值允許指定默認值。
var [foo = true] = []; foo // true var [x, y = "b"] = ["a"]; // x="a", y="b" var [x, y = "b"] = ["a", undefined]; // x="a", y="b"
ES6內部使用嚴格相等運算符（===），判斷一個位置是否有值。所以，如果一個數組成員不嚴格等于undefined，默認值是不會生效的。
如果默認值是一個表達式，那么這個表達式是惰性求值的，即只有在用到的時候，才會求值。
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
對象解構
var { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
對象的解構與數組有一個重要的不同,變量必須與屬性同名，才能取到正確的值。
var { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined
如果變量名與屬性名不一致，必須寫成下面這樣。
var { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
let obj = { first: "hello", last: "world" };
let { first: f, last: l } = obj;
f // "hello"
l // "world"
解構也可以用于嵌套結構的對象。
var obj = {
p: [
"Hello",
{ y: "World" }
]
};
var { p: [x, { y }] } = obj;
x // "Hello"
y // "World"
這時p是模式，不是變量，因此不會被賦值。
嵌套賦值的例子:
let obj = {};
let arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
obj // {prop:123}
arr // [true]
對象的解構也可以指定默認值
var {x = 3} = {};
x // 3var {x, y = 5} = {x: 1};
x // 1
y // 5var { message: msg = "Something went wrong" } = {};
msg // "Something went wrong"
對象的解構賦值，可以很方便地將現有對象的方法，賦值到某個變量。
let { log, sin, cos } = Math;
解構的用途
交換變量值
[x, y] = [y, x];
函數參數默認值
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true,
// ... more config
}) {
// ... do stuff
};
對解構的學習先到這里吧
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91070.html
摘要：另外對于已經聲明的變量進行解構賦值時，要非常小心。因此在行首加，將其強制轉化為表達式執行。由于和無法轉為對象，所以對它們進行解構賦值，都會報錯。 let和const let和const是es6新增的兩個變量聲明關鍵字，與var的不同點在于： （1）let和const都是塊級作用域，在{}內有效，這點在for循環中非常有用，只在循環體內有效。var為函數作用域。 （2）使用let和con...
摘要：變量的解構賦值中允許按照一定模式，從數組和對象中提取，對變量進行賦值。數組的解構賦值上面的代碼標示可以從數組中提取值，按照位置的對應關系對變量進行賦值。默認值解構賦值允許指定默認值。 變量的解構賦值 ES6中允許按照一定模式，從數組和對象中提取，對變量進行賦值。 數組的解構賦值 var [a,b,c] = [1,2,3]; a // 1; b // 2; c // 3; 上面的代碼標示...
摘要：解構，一種黑魔法解構是從對象中提取出更小元素的過程。賦值是對解構出來的元素進行重新賦值?？偨Y本章講解了對象解構賦值和數組解構賦值，以及對象和數組混合情況下的解構賦值操作，最后一個知識點是解構函數的參數。 解構，一種黑魔法 解構是從對象中提取出更小元素的過程。賦值是對解構出來的元素進行重新賦值。 下面的代碼你可能無法在瀏覽器上實時測試，推薦在babel官網在線測試代碼：在線測試ES6代碼...
摘要：當冒號右側存在花括號時，表示目標被嵌套在對象的更深一層中。在對象的嵌套解構中同樣能為本地變量使用不同的名稱提取數組解構結構賦值基本忽略一些選項重新賦值默認值數組解構賦值同樣允許在數組任意位置指定默認值。 主要知識點：對象解構、數組解構、混合解構以及參數解構showImg(https://segmentfault.com/img/bVbfWgH?w=1020&h=585); 《深入理解...
閱讀 1877·2021-11-12 10:36
閱讀 2309·2021-09-01 10:29
閱讀 2337·2019-08-30 15:56
閱讀 1015·2019-08-30 12:56
閱讀 2343·2019-08-26 13:58
閱讀 2264·2019-08-23 18:38
閱讀 1486·2019-08-23 18:32
閱讀 2103·2019-08-23 16:53
