摘要:類似數(shù)組的對(duì)象都有一個(gè)屬性,因此還可以對(duì)這個(gè)屬性解構(gòu)賦值。默認(rèn)值解構(gòu)賦值允許指定默認(rèn)值當(dāng)結(jié)構(gòu)不成功時(shí)使用默認(rèn)值。用途變量的解構(gòu)賦值用途很多。有了解構(gòu)賦值,取出這些值就非常方便。
原始操作
我們先看看下面的兩個(gè)代碼段,它們使用 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ù)組中提取值的過(guò)程。
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
該示例顯示了從對(duì)象中提取值的過(guò)程。
二者都很簡(jiǎn)單,但是這兩個(gè)示例都沒(méi)用到解構(gòu)。
那么解構(gòu)到底是什么?
解構(gòu)ES6 允許按照一定模式,從數(shù)組和對(duì)象中提取值,對(duì)變量進(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
在此示例中,方括號(hào) [ ] 表示被解構(gòu)的數(shù)組,x、y 和 z 表示要將數(shù)組中的值存儲(chǔ)在其中的變量。注意,你不需要指定要從中提取值的索引,因?yàn)樗饕梢园凳境鰜?lái)。
本質(zhì)上,這種寫(xiě)法屬于“模式匹配”,只要等號(hào)兩邊的模式相同,左邊的變量就會(huì)被賦予對(duì)應(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)對(duì)象中的值
const gemstone = { type: "quartz", color: "rose", karat: 21.29 }; const {type, color, karat} = gemstone; console.log(type, color, karat);
在此示例中,花括號(hào) { } 表示被解構(gòu)的對(duì)象,type、color 和 karat 表示要將對(duì)象中的屬性存儲(chǔ)到其中的變量。注意不用指定要從其中提取值的屬性。因?yàn)?gemstone 具有 type 屬性,值自動(dòng)存儲(chǔ)在 type 變量中。類似地,gemstone 具有 color 屬性,因此 color 的值自動(dòng)存儲(chǔ)在 color 變量中。
你還可以指定在解構(gòu)對(duì)象時(shí)要選擇的值。例如,let {color} = gemstone; 將僅選擇 gemstone 對(duì)象中的 color 屬性。
注意:對(duì)象的解構(gòu)與數(shù)組有一個(gè)重要的不同。數(shù)組的元素是按次序排列的,變量的取值由它的位置決定;而對(duì)象的屬性沒(méi)有次序,變量必須與屬性同名,才能取到正確的值。
如果變量名與屬性名不一致,必須寫(xiě)成下面這樣。
let { foo: baz } = { foo: "aaa", bar: "bbb" }; baz // "aaa" //foo是匹配的模式,baz才是變量。真正被賦值的是變量baz,而不是模式foo。
這實(shí)際上說(shuō)明,對(duì)象的解構(gòu)賦值是下面形式的簡(jiǎn)寫(xiě):
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };字符串的解構(gòu)賦值
字符串也可以解構(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} = "hello"; length // 5默認(rèn)值
解構(gòu)賦值允許指定默認(rèn)值, 當(dāng)結(jié)構(gòu)不成功時(shí), 使用默認(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)部再寫(xiě)var foo = config.foo || "default foo";這樣的語(yǔ)句。
用途變量的解構(gòu)賦值用途很多。
交換變量的值let x = 1; let y = 2; [x, y] = [y, x]; //x: 2, y: 1從函數(shù)返回多個(gè)值
函數(shù)只能返回一個(gè)值,如果要返回多個(gè)值,只能將它們放在數(shù)組或?qū)ο罄锓祷亍S辛私鈽?gòu)賦值,取出這些值就非常方便。
// 返回一個(gè)數(shù)組 function example() { return [1, 2, 3]; } let [a, b, c] = example(); // 返回一個(gè)對(duì)象 function example() { return { foo: 1, bar: 2 }; } let { foo, bar } = example();函數(shù)參數(shù)的定義
// 參數(shù)是一組有次序的值 function f([x, y, z]) { ... } f([1, 2, 3]); // 參數(shù)是一組無(wú)次序的值 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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/90559.html
摘要:的語(yǔ)法已經(jīng)出了很長(zhǎng)的時(shí)間了,在使用上也可以通過(guò)這類的編譯工具轉(zhuǎn)譯為瀏覽器可以識(shí)別的的語(yǔ)法,但是依舊有很多開(kāi)發(fā)在寫(xiě)代碼的時(shí)候,依舊沒(méi)有用的語(yǔ)法,而是習(xí)慣使用老的語(yǔ)法,這篇文章主要會(huì)介紹解構(gòu)賦值基本用法以及在實(shí)際使用場(chǎng)景中相比語(yǔ)法的優(yōu)勢(shì),讓大家 es6的語(yǔ)法已經(jīng)出了很長(zhǎng)的時(shí)間了,在使用上也可以通過(guò)babel這類的編譯工具轉(zhuǎn)譯為瀏覽器可以識(shí)別的es5的語(yǔ)法,但是依舊有很多開(kāi)發(fā)在寫(xiě)代碼的時(shí)候,...
摘要:它是一個(gè)通用標(biāo)準(zhǔn),奠定了的基本語(yǔ)法。年月發(fā)布了的第一個(gè)版本,正式名稱就是標(biāo)準(zhǔn)簡(jiǎn)稱。結(jié)語(yǔ)的基本擴(kuò)展還有一些沒(méi)有在這里詳細(xì)介紹。 前言 ES6標(biāo)準(zhǔn)以及頒布兩年了,但是,好像還沒(méi)有完全走進(jìn)我們的日常開(kāi)發(fā)。這篇文章從ES6的基本類型擴(kuò)展入手,逐步展開(kāi)對(duì)ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創(chuàng)造的,該公司1996年11月將JavaSc...
摘要:具體的分析暫時(shí)不討論解決的方式很簡(jiǎn)單,把上面的代碼塊變成一段表達(dá)式就小明總結(jié)解構(gòu)賦值是提供一個(gè)十分方便的表達(dá)式。的解構(gòu)賦值小明的對(duì)象賦值這里可以被賦予初始值小明對(duì)象的屬性不存在能夠賦值給多個(gè)變量 對(duì)象解構(gòu)賦值 ES6 允許按照一定模式,從數(shù)組和對(duì)象中提取值,對(duì)變量進(jìn)行賦值,這被稱為解構(gòu)(Destructuring)。 --- 阮一峰《ECMAScript...
摘要:對(duì)象解構(gòu)如果使用解析聲明變量,則必須提供初始化程序也就是等號(hào)右側(cè)的值以下語(yǔ)句有語(yǔ)法錯(cuò)誤解構(gòu)賦值表達(dá)式也就是右側(cè)的表達(dá)式如果為或會(huì)導(dǎo)致程序拋出錯(cuò)誤,因?yàn)槿魏螄L試讀取或的屬性的行為都會(huì)觸發(fā)運(yùn)行時(shí)錯(cuò)誤上面代碼是聲明變量同時(shí)賦值相應(yīng)的屬性值那如果已 對(duì)象解構(gòu) 如果使用var、let、const解析聲明變量,則必須提供初始化程序(也就是等號(hào)右側(cè)的值)以下語(yǔ)句有語(yǔ)法錯(cuò)誤 var { type, n...
閱讀 1877·2021-11-12 10:36
閱讀 2309·2021-09-01 10:29
閱讀 2337·2019-08-30 15:56
閱讀 1015·2019-08-30 12:56
閱讀 2342·2019-08-26 13:58
閱讀 2264·2019-08-23 18:38
閱讀 1486·2019-08-23 18:32
閱讀 2103·2019-08-23 16:53