摘要:解構(gòu)賦值的分類數(shù)組解構(gòu)賦值對象解構(gòu)賦值字符串解構(gòu)賦值數(shù)值解構(gòu)賦值布爾值解構(gòu)賦值函數(shù)參數(shù)解構(gòu)賦值。嵌套情況默認(rèn)值解構(gòu)賦值允許設(shè)置默認(rèn)值,當(dāng)數(shù)組成員嚴(yán)格等于,默認(rèn)值將生效。報錯報錯函數(shù)參數(shù)的解構(gòu)賦值函數(shù)的參數(shù)也可以使用解構(gòu)賦值和指定默認(rèn)值
ES6可以從數(shù)組和對象中提取值,然后對變量進(jìn)行賦值。解構(gòu)賦值的分類:數(shù)組解構(gòu)賦值、對象解構(gòu)賦值 、字符串解構(gòu)賦值、數(shù)值解構(gòu)賦值、布爾值解構(gòu)賦值、 函數(shù)參數(shù)解構(gòu)賦值。
1 數(shù)組的解構(gòu)賦值 1.1 基本用法let [a, b, c] = [1, 2, 3]; //等同于 let a = 1; let b = 2; let c = 3;
如上所示,只要等號兩邊的模式相同,左邊的變量就會被賦予右邊對應(yīng)的值。還可以使用嵌套數(shù)組進(jìn)行結(jié)構(gòu)。
let [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 bar // 2 baz // 3 let [x, , y] = [1, 2, 3]; x // 1 y // 21.2 解構(gòu)不成功
如果結(jié)構(gòu)不成功,變量的值就等于undefined。
let [x, y, ...z] = ["a"]; x // "a" y // undefined z // [] //以下兩種情況,foo的值都等于undefined。 let [foo] = []; let [bar, foo] = [1];1.3 不完全解構(gòu)
即等號左邊的模式只匹配一部分等號右邊的數(shù)組,依然可以解構(gòu)成功。
let[x, y] = [1, 2, 3]; x // 1 y // 2 //嵌套情況 let [a, [b], d] = [1, [2, 3], 4]; a // 1 b // 2 c // 41.4 默認(rèn)值
解構(gòu)賦值允許設(shè)置默認(rèn)值,當(dāng)數(shù)組成員嚴(yán)格等于undefined,默認(rèn)值將生效。
let [x = 1] = [undefined]; x // 1 let [y = 1] = [null]; y // null2 對象的解構(gòu)賦值
解構(gòu)同樣適用于對象。
let {foo, bar, barz} = {foo: "aaa", bar: "bbb"}; foo // "aaa" bar // "bbb" barz // undefined
對象的解構(gòu)賦值實際上是先找到同名屬性,然后再賦值給對應(yīng)的變量,前者是匹配模式,后者才是真正的變量。
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" }; let obj = { first: "hello", last: "world" }; let { first: f, last: g } = obj; f // "hello" g // "world" first // first id not undefined
解構(gòu)也可以用于嵌套結(jié)構(gòu)的對象
let obj = { p: [ "hello", { y: "world" } ] }; let { p, p: [x, { y }] } = obj; x // "hello" y // "world" p // ["hello", { y: "world" }]
對象的解構(gòu)同樣可以指定默認(rèn)值
let { x = 1 } = {}; x // 13 字符串的解構(gòu)賦值
字符串進(jìn)行解構(gòu)賦值時,會被轉(zhuǎn)換成一個類數(shù)組對象。
const [a, b, c] = "red"; a // "r" b // "e" c // "d"
類數(shù)組對象的length屬性也可以進(jìn)行解構(gòu)賦值
let { length: len } = "hello"; len // 54 數(shù)值和布爾值的解構(gòu)賦值
解構(gòu)賦值時,如果等號右邊不是數(shù)組和對象,則會先轉(zhuǎn)為對象,如果是undefined和null則無法轉(zhuǎn)為對象,此時會報錯。
let { toString: s } = 123; s === Nunmber.prototype.toString // true; let { toString: s } = true; s === Boolean.prototype.toString // true; let { prop : x } = undefined; // 報錯 let { prop : y } = null; // 報錯5 函數(shù)參數(shù)的解構(gòu)賦值
函數(shù)的參數(shù)也可以使用解構(gòu)賦值和指定默認(rèn)值
function add([x, y]){ return x + y; } add([1,2]); // 3 function move({ x = 0, y = 0 } = {}) { return [x, y]; }; move({ x: 3, y: 8 }); // [3, 8]
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/109691.html
摘要:另外對于已經(jīng)聲明的變量進(jìn)行解構(gòu)賦值時,要非常小心。因此在行首加,將其強制轉(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...
摘要:前言前言該篇筆記是第二篇變量的解構(gòu)賦值。這一章原文鏈接變量的解構(gòu)賦值解構(gòu)賦值解構(gòu)賦值允許按照一定模式,從數(shù)組和對象中提取值,對變量進(jìn)行賦值,這被稱為解構(gòu)。對象的解構(gòu)賦值是根據(jù)對象值進(jìn)行匹配。前言該篇筆記是第二篇 變量的解構(gòu)賦值。這一章原文鏈接: 變量的解構(gòu)賦值解構(gòu)賦值ES6 允許按照一定模式,從數(shù)組和對象中提取值,對變量進(jìn)行賦值,這被稱為解構(gòu)(Destructuring)。解構(gòu)賦值是對賦值運...
摘要:前言該篇筆記是第二篇變量的解構(gòu)賦值。這一章原文鏈接變量的解構(gòu)賦值解構(gòu)賦值允許按照一定模式,從數(shù)組和對象中提取值,對變量進(jìn)行賦值,這被稱為解構(gòu)。對象的解構(gòu)賦值是根據(jù)對象值進(jìn)行匹配。 前言該篇筆記是第二篇 變量的解構(gòu)賦值。 這一章原文鏈接: 變量的解構(gòu)賦值解構(gòu)賦值ES6 允許按照一定模式,從數(shù)組和對象中提取值,對...
摘要:默認(rèn)值同時,對象解構(gòu)賦值也允許設(shè)置默認(rèn)值,默認(rèn)值生效的判斷條件同數(shù)組,只有在對應(yīng)值嚴(yán)格等于時會生效。報錯如果要將一個已經(jīng)聲明的變量用于解構(gòu)賦值,必須非常小心。的規(guī)則是,只要有可能導(dǎo)致解構(gòu)的歧義,就不得使用圓括號。 ECMAScript6/ES6 入門 let和const命令 四、變量的解構(gòu)賦值 在ES6之前,數(shù)組和對象屬性賦值只能直接指定固定值,ES6 允許按照一定模式,從數(shù)組和對象中...
摘要:它是一個通用標(biāo)準(zhǔn),奠定了的基本語法。年月發(fā)布了的第一個版本,正式名稱就是標(biāo)準(zhǔn)簡稱。結(jié)語的基本擴展還有一些沒有在這里詳細(xì)介紹。 前言 ES6標(biāo)準(zhǔn)以及頒布兩年了,但是,好像還沒有完全走進(jìn)我們的日常開發(fā)。這篇文章從ES6的基本類型擴展入手,逐步展開對ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創(chuàng)造的,該公司1996年11月將JavaSc...
閱讀 2586·2021-10-11 10:58
閱讀 1169·2021-09-29 09:34
閱讀 1528·2021-09-26 09:46
閱讀 3851·2021-09-22 15:31
閱讀 748·2019-08-30 15:54
閱讀 1472·2019-08-30 13:20
閱讀 1266·2019-08-30 13:13
閱讀 1499·2019-08-26 13:52