国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

ES6語法之解構(gòu)賦值

Hancock_Xu / 2818人閱讀

摘要：類似數(shù)組的對象都有一個屬性，因此還可以對這個屬性解構(gòu)賦值。默認(rèn)值解構(gòu)賦值允許指定默認(rèn)值當(dāng)結(jié)構(gòu)不成功時使用默認(rèn)值。用途變量的解構(gòu)賦值用途很多。有了解構(gòu)賦值，取出這些值就非常方便。

原始操作

我們先看看下面的兩個代碼段，它們使用 ES6 之前的技巧提取數(shù)據(jù)：

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

上述示例顯示了從數(shù)組中提取值的過程。

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

該示例顯示了從對象中提取值的過程。

二者都很簡單，但是這兩個示例都沒用到解構(gòu)。

那么解構(gòu)到底是什么？

解構(gòu)

ES6 允許按照一定模式，從數(shù)組和對象中提取值，對變量進(jìn)行賦值，這被稱為解構(gòu)（Destructuring）。

解構(gòu)數(shù)組中的值 
const point = [10, 25, -34];

const [x, y, z] = point;

console.log(x, y, z); //10 25 -34

在此示例中，方括號 [ ] 表示被解構(gòu)的數(shù)組，x、y 和 z 表示要將數(shù)組中的值存儲在其中的變量。注意，你不需要指定要從中提取值的索引，因為索引可以暗示出來。

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

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

如果解構(gòu)不成功，變量的值就等于undefined。

let [bar, foo] = [1]; // foo: undefined
解構(gòu)對象中的值 
const gemstone = {
  type: "quartz",
  color: "rose",
  karat: 21.29
};

const {type, color, karat} = gemstone;

console.log(type, color, karat);

在此示例中，花括號 { } 表示被解構(gòu)的對象，type、color 和 karat 表示要將對象中的屬性存儲到其中的變量。注意不用指定要從其中提取值的屬性。因為 gemstone 具有 type 屬性，值自動存儲在 type 變量中。類似地，gemstone 具有 color 屬性，因此 color 的值自動存儲在 color 變量中。

你還可以指定在解構(gòu)對象時要選擇的值。例如，let {color} = gemstone; 將僅選擇 gemstone 對象中的 color 屬性。

注意：對象的解構(gòu)與數(shù)組有一個重要的不同。數(shù)組的元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

如果變量名與屬性名不一致，必須寫成下面這樣。

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

//foo是匹配的模式，baz才是變量。真正被賦值的是變量baz，而不是模式foo。

這實際上說明，對象的解構(gòu)賦值是下面形式的簡寫:

let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
字符串的解構(gòu)賦值

字符串也可以解構(gòu)賦值。這是因為此時，字符串被轉(zhuǎn)換成了一個類似數(shù)組的對象。

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

類似數(shù)組的對象都有一個length屬性，因此還可以對這個屬性解構(gòu)賦值。

let {length} = "hello";
length // 5
默認(rèn)值

解構(gòu)賦值允許指定默認(rèn)值, 當(dāng)結(jié)構(gòu)不成功時, 使用默認(rèn)值。

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

let [x, y = "b"] = ["a"]; // x="a", y="b"

在函數(shù)參數(shù)中指定參數(shù)的默認(rèn)值，就避免了在函數(shù)體內(nèi)部再寫var foo = config.foo || "default foo";這樣的語句。

用途

變量的解構(gòu)賦值用途很多。

交換變量的值 
let x = 1;
let y = 2;

[x, y] = [y, x]; //x: 2,  y: 1
從函數(shù)返回多個值

函數(shù)只能返回一個值，如果要返回多個值，只能將它們放在數(shù)組或?qū)ο罄锓祷亍Ｓ辛私鈽?gòu)賦值，取出這些值就非常方便。

// 返回一個數(shù)組

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

// 返回一個對象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();
函數(shù)參數(shù)的定義 
// 參數(shù)是一組有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 參數(shù)是一組無次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
提取 JSON 數(shù)據(jù) 
let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);

上面代碼可以快速提取 JSON 數(shù)據(jù)的值。

輸入模塊的指定方法 
const { SourceMapConsumer, SourceNode } = require("source-map");

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90559.html

相關(guān)文章

  • es6之解構(gòu)賦值

    摘要：的語法已經(jīng)出了很長的時間了，在使用上也可以通過這類的編譯工具轉(zhuǎn)譯為瀏覽器可以識別的的語法，但是依舊有很多開發(fā)在寫代碼的時候，依舊沒有用的語法，而是習(xí)慣使用老的語法，這篇文章主要會介紹解構(gòu)賦值基本用法以及在實際使用場景中相比語法的優(yōu)勢，讓大家 es6的語法已經(jīng)出了很長的時間了，在使用上也可以通過babel這類的編譯工具轉(zhuǎn)譯為瀏覽器可以識別的es5的語法，但是依舊有很多開發(fā)在寫代碼的時候，...

    yeooo 評論0 收藏0

  • ES6學(xué)習(xí)手稿之基本類型擴(kuò)展

    摘要：它是一個通用標(biāo)準(zhǔn)，奠定了的基本語法。年月發(fā)布了的第一個版本，正式名稱就是標(biāo)準(zhǔn)簡稱。結(jié)語的基本擴(kuò)展還有一些沒有在這里詳細(xì)介紹。 前言 ES6標(biāo)準(zhǔn)以及頒布兩年了，但是，好像還沒有完全走進(jìn)我們的日常開發(fā)。這篇文章從ES6的基本類型擴(kuò)展入手，逐步展開對ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創(chuàng)造的，該公司1996年11月將JavaSc...

    tommego 評論0 收藏0

  • JavaScript基礎(chǔ)之ES6對象解構(gòu)賦值

    摘要：具體的分析暫時不討論解決的方式很簡單，把上面的代碼塊變成一段表達(dá)式就小明總結(jié)解構(gòu)賦值是提供一個十分方便的表達(dá)式。的解構(gòu)賦值小明的對象賦值這里可以被賦予初始值小明對象的屬性不存在能夠賦值給多個變量 對象解構(gòu)賦值 ES6 允許按照一定模式，從數(shù)組和對象中提取值，對變量進(jìn)行賦值，這被稱為解構(gòu)(Destructuring)。 --- 阮一峰《ECMAScript...

    sutaking 評論0 收藏0

  • 深入理解ES6之《解構(gòu)》

    摘要：對象解構(gòu)如果使用解析聲明變量，則必須提供初始化程序也就是等號右側(cè)的值以下語句有語法錯誤解構(gòu)賦值表達(dá)式也就是右側(cè)的表達(dá)式如果為或會導(dǎo)致程序拋出錯誤，因為任何嘗試讀取或的屬性的行為都會觸發(fā)運(yùn)行時錯誤上面代碼是聲明變量同時賦值相應(yīng)的屬性值那如果已 對象解構(gòu) 如果使用var、let、const解析聲明變量，則必須提供初始化程序（也就是等號右側(cè)的值）以下語句有語法錯誤 var { type, n...

    DTeam 評論0 收藏0

發(fā)表評論

0條評論

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