成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

es6 解構(gòu)筆記分享

Hancock_Xu / 2435人閱讀

摘要：只要某種數(shù)據(jù)結(jié)構(gòu)具有接口，都可以采用數(shù)組形式的解構(gòu)賦值。解構(gòu)賦值允許指定默認(rèn)值。默認(rèn)值可以引用解構(gòu)賦值的其他變量，但該變量必須已經(jīng)聲明。解構(gòu)也可以用于嵌套結(jié)構(gòu)的對象。

Es6 新增了destructuring(解構(gòu))語法糖, 我們快來了解一下:

可以按照一定的模式從數(shù)組/對象中提取值,為變量賦值
數(shù)組解構(gòu)

var a = 1;
var b = 2;
var c = 3;

可以寫作:

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

本質(zhì)上，這種寫法屬于“模式匹配”，只要等號兩邊的模式相同，左邊的變量就會被賦予對應(yīng)的值。

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"

只要某種數(shù)據(jù)結(jié)構(gòu)具有Iterator接口，都可以采用數(shù)組形式的解構(gòu)賦值。

解構(gòu)賦值允許指定默認(rèn)值。

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內(nèi)部使用嚴(yán)格相等運算符（===），判斷一個位置是否有值。所以，如果一個數(shù)組成員不嚴(yán)格等于undefined，默認(rèn)值是不會生效的。

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

function f() {
  console.log("aaa");
}
let [x = f()] = [1];

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

默認(rèn)值可以引用解構(gòu)賦值的其他變量，但該變量必須已經(jīng)聲明。

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

對象解構(gòu)

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

對象的解構(gòu)與數(shù)組有一個重要的不同,變量必須與屬性同名，才能取到正確的值。

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"

解構(gòu)也可以用于嵌套結(jié)構(gòu)的對象。

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]

對象的解構(gòu)也可以指定默認(rèn)值

var {x = 3} = {};
x // 3var {x, y = 5} = {x: 1};
x // 1
y // 5var { message: msg = "Something went wrong" } = {};
msg // "Something went wrong"

對象的解構(gòu)賦值，可以很方便地將現(xiàn)有對象的方法，賦值到某個變量。

let { log, sin, cos } = Math;

解構(gòu)的用途
交換變量值

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

函數(shù)參數(shù)默認(rèn)值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
};

對解構(gòu)的學(xué)習(xí)先到這里吧

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91070.html

相關(guān)文章

  • ES6 學(xué)習(xí)筆記（一）let，const和解構(gòu)賦值

    摘要：另外對于已經(jīng)聲明的變量進(jìn)行解構(gòu)賦值時，要非常小心。因此在行首加，將其強(qiáng)制轉(zhuǎn)化為表達(dá)式執(zhí)行。由于和無法轉(zhuǎn)為對象，所以對它們進(jìn)行解構(gòu)賦值，都會報錯。 let和const let和const是es6新增的兩個變量聲明關(guān)鍵字，與var的不同點在于： （1）let和const都是塊級作用域，在{}內(nèi)有效，這點在for循環(huán)中非常有用，只在循環(huán)體內(nèi)有效。var為函數(shù)作用域。 （2）使用let和con...

    iOS122 評論0 收藏0

  • ES6筆記之 變量解構(gòu)賦值

    摘要：變量的解構(gòu)賦值中允許按照一定模式，從數(shù)組和對象中提取，對變量進(jìn)行賦值。數(shù)組的解構(gòu)賦值上面的代碼標(biāo)示可以從數(shù)組中提取值，按照位置的對應(yīng)關(guān)系對變量進(jìn)行賦值。默認(rèn)值解構(gòu)賦值允許指定默認(rèn)值。 變量的解構(gòu)賦值 ES6中允許按照一定模式，從數(shù)組和對象中提取，對變量進(jìn)行賦值。 數(shù)組的解構(gòu)賦值 var [a,b,c] = [1,2,3]; a // 1; b // 2; c // 3; 上面的代碼標(biāo)示...

    baukh789 評論0 收藏0

  • 《深入理解ES6》筆記——解構(gòu)：使數(shù)據(jù)訪問更便捷（5）

    摘要：解構(gòu)，一種黑魔法解構(gòu)是從對象中提取出更小元素的過程。賦值是對解構(gòu)出來的元素進(jìn)行重新賦值?？偨Y(jié)本章講解了對象解構(gòu)賦值和數(shù)組解構(gòu)賦值，以及對象和數(shù)組混合情況下的解構(gòu)賦值操作，最后一個知識點是解構(gòu)函數(shù)的參數(shù)。 解構(gòu)，一種黑魔法 解構(gòu)是從對象中提取出更小元素的過程。賦值是對解構(gòu)出來的元素進(jìn)行重新賦值。 下面的代碼你可能無法在瀏覽器上實時測試，推薦在babel官網(wǎng)在線測試代碼：在線測試ES6代碼...

    Drinkey 評論0 收藏0

  • 深入理解ES6筆記（五）解構(gòu)：使訪問數(shù)據(jù)更便捷

    摘要：當(dāng)冒號右側(cè)存在花括號時，表示目標(biāo)被嵌套在對象的更深一層中。在對象的嵌套解構(gòu)中同樣能為本地變量使用不同的名稱提取數(shù)組解構(gòu)結(jié)構(gòu)賦值基本忽略一些選項重新賦值默認(rèn)值數(shù)組解構(gòu)賦值同樣允許在數(shù)組任意位置指定默認(rèn)值。 主要知識點：對象解構(gòu)、數(shù)組解構(gòu)、混合解構(gòu)以及參數(shù)解構(gòu)showImg(https://segmentfault.com/img/bVbfWgH?w=1020&h=585); 《深入理解...

    _DangJin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<