您好,登錄后才能下訂單哦!
小編給大家分享一下JS ES新特性之變量的解耦賦值怎么用,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
ECMAScript 2015中允許按照一定模式,從數(shù)組和對(duì)象中提取值,對(duì)變量進(jìn)行賦值,這被稱為 解耦賦值 。
在ECMAScript 2015之前中為變量賦值的方式如下所示:
let a = 1; let b = 2; let c = 3;
在ECMAScript 2015允許寫成下面這樣。
let [a, b, c] = [1, 2, 3];
ECMAScript 2015
的解耦賦值本質(zhì)上屬于模式匹配。賦值運(yùn)算符兩邊的模式相同,左邊的變量會(huì)被賦予對(duì)應(yīng)位置的值。
如果解耦賦值失敗的話,變量的值等于 undefined。示例代碼如下所示:
// 如果數(shù)組的某個(gè)索引值的位置的變量,在 = 運(yùn)算符的右邊沒有數(shù)組中沒有對(duì)應(yīng)的索引值與之對(duì)應(yīng),則解耦賦值失敗,其值為 undefined let [v] = [] let [a, b] = [1] console.log(v, a, b); // undefined 1, undefined
如果想解決解耦賦值失敗的問(wèn)題,需要將其賦值運(yùn)算符的左右兩邊的數(shù)量保持一致。
所謂的不完全解耦賦值就是指賦值運(yùn)算符的右邊數(shù)組中的數(shù)量要大于左邊數(shù)組中的數(shù)量,導(dǎo)致右邊數(shù)組中的有些變量失效,但是這這種情況下解耦賦值還是會(huì)成功的。
示例代碼如下所示:
// 賦值運(yùn)算符左邊變量的數(shù)量小于右邊值的數(shù)量 let [a, b, c] = [1, 2, 3, 4] // 依然會(huì)解耦賦值成功 console.log(a, b, c); // 1 2 3
解耦賦值允許指定默認(rèn)值的。示例代碼如下所示:
/* * 解耦賦值中允許指定默認(rèn)值 * 語(yǔ)法結(jié)構(gòu)如下 * let [var1 = value1, var2 = value2 ,...] = [val1, val2,...] var1,var2 表示變量名 value1,value2 表示默認(rèn)值 val1,val2, 表示指定的值 */ let [a = 1, b = 2] = [100] console.log(a, b); // 100 2
在使用默認(rèn)值的時(shí)候值得注意的一點(diǎn)就是,ECMAScript6
內(nèi)部會(huì)使用全等于 === 運(yùn)算符來(lái)判斷指定位置的值是否全等于undefined
。只有當(dāng) 全等于undefined時(shí),其默認(rèn)值才會(huì)生效。
測(cè)試代碼如下所示:
let [a = 1, b = 2] = [100, undefined] console.log(a, b); // 100 2
當(dāng)我們使用null值時(shí),雖然null
也表示為空,但是null !== undefined
。所以我們的默認(rèn)值并不會(huì)生效,
測(cè)試代碼如下:
let [a = 1, b = 2] = [100, null] console.log(a, b); // 100 null
由于JavaScript
是一個(gè)弱類型的語(yǔ)言,所以賦值號(hào)右邊是什么類型都是允許的,那就會(huì)出現(xiàn)以下幾種特殊情況:
情況一:運(yùn)算符右邊是一個(gè)函數(shù),示例代碼如下
// 1. 運(yùn)算符右邊是一個(gè)函數(shù) let [a, b] = [1, function () { return 10; }] console.log(b()); // 10
情況二:運(yùn)算符右邊是一個(gè)對(duì)象,示例代碼如下
// 2. 運(yùn)算符右邊是一個(gè)對(duì)象 let [a, b] = [1, { name: '狐妖小紅娘' }] console.log(b); // { name: '狐妖小紅娘' }
情況三:運(yùn)算符右邊函數(shù)數(shù)組,示例代碼如下
// 3. 運(yùn)算符右邊是含有數(shù)組 let [a, b] = [1, [2, 3]] console.log(b); // [ 2, 3 ]
情況四:運(yùn)算符左右兩邊都含有數(shù)組,示例代碼如下所示
// 4. 運(yùn)算符左右兩邊都含有數(shù)組,示例代碼如下所示 let [a, [b, c]] = [1, [2, 3]] console.log(b); // 2
對(duì)象的解耦賦值是通過(guò)變量名稱實(shí)現(xiàn)與對(duì)象的屬性名稱一一對(duì)應(yīng)實(shí)現(xiàn)的。示例代碼如下所示:
/* * 對(duì)象的解耦賦值 - 從對(duì)象中提取值,為變量賦值 ! 變量名稱必須與對(duì)象的屬性名稱一一對(duì)應(yīng),否則就會(huì)導(dǎo)致失敗。 */ let { x, y } = { x: 10, y: 20 } console.log(x, y); //10 20
值得注意的是賦值運(yùn)算符兩邊的格式需要保持一致。
由于 JavaScript
是一個(gè)弱類型的語(yǔ)言,所以賦值號(hào)右邊是什么類型都是允許的,那就會(huì)出現(xiàn)以下幾種特殊情況:
情況一:運(yùn)算符右邊是一個(gè)函數(shù),示例代碼如下
// 1. 運(yùn)算符右邊是一個(gè)函數(shù) let { a, b } = { a: 1, b: function () { return 10; } } console.log(b());// 10
情況二:運(yùn)算符右邊是一個(gè)對(duì)象,示例代碼如下
// 2. 運(yùn)算符右邊是一個(gè)對(duì)象 let {a, b} = { a: 1, b: { name: 'ywanzhou' } } console.log(b); // { name: 'ywanzhou' }
情況三:運(yùn)算符右邊函數(shù)數(shù)組,示例代碼如下
// 3. 運(yùn)算符右邊是含有數(shù)組 let {a, b} = { a: 1, b: [1, 2] } console.log(b); //[ 1, 2 ]
情況四:運(yùn)算符左右兩邊都含有對(duì)象,示例代碼如下所示
// 4. 運(yùn)算符左右兩邊都含有對(duì)象 let { m: { name, age }, n } = { m: { name: 'test', age: 20 }, n: 20 } console.log(name, age); // test 20
如果解耦賦值失敗的話,變量的值等于undefined。示例代碼如下所示:
// 解耦賦值失敗 let { a, b } = { a: 10 } console.log(b);
所謂的不完全解耦賦值就是指賦值運(yùn)算符的右邊對(duì)象中屬性的數(shù)量要大于左邊對(duì)象中屬性的數(shù)量,導(dǎo)致右邊對(duì)象中屬性的有些變量失效,但是這這種情況下解耦賦值還是會(huì)成功的。
// 不完全解耦賦值 let { a } = { a: 10, b: 20 } console.log(a);
解耦賦值允許指定默認(rèn)值的。示例代碼如下所示:
// 默認(rèn)值 let { a, b = 100 } = { a: 10, b: 20 } console.log(b);
字符串也可以解構(gòu)賦值。這是因?yàn)榇藭r(shí),字符串被轉(zhuǎn)換成了一個(gè)類似數(shù)組的對(duì)象。
let [h2, y, x] = "一碗周" console.log(h2, y, x, h3); // 一 碗 周
如果直接對(duì)數(shù)字值/布爾值進(jìn)行解耦賦值會(huì)拋出異常,在對(duì)數(shù)字值和布爾值進(jìn)行操作時(shí),其賦值運(yùn)算符的右邊是數(shù)值和布爾值,則會(huì)先轉(zhuǎn)為對(duì)象。
// let [a] = 100; // 拋出異常 描述信息為 TypeError: 100 is not iterable // console.log(a); // 對(duì)布爾或者數(shù)值進(jìn)行解耦賦值的話, 需要現(xiàn)將其改變成為對(duì)象類型。 let { toString: b } = 1; console.log(b === Number.prototype.toString); // true let { toString: c } = true; console.log(c === Boolean.prototype.toString); // true
解構(gòu)賦值的規(guī)則是,只要等號(hào)右邊的值不是對(duì)象或數(shù)組,就先將其轉(zhuǎn)為對(duì)象。由于undefined
和null
無(wú)法轉(zhuǎn)為對(duì)象,所以對(duì)它們進(jìn)行解構(gòu)賦值,都會(huì)報(bào)錯(cuò)。
函數(shù)的參數(shù)也可以使用解構(gòu)賦值。示例代碼如下所示:
// 使用數(shù)組 function f([a, b]) { console.log(a, b); } f([10, 20]) // 10 20 // 使用對(duì)象 function fn({ a, b }) { console.log(a, b); } fn({ a: 10, b: 20 }) // 10 20
解耦賦值雖然很方便,但是解析起來(lái)并不容易。對(duì)于編譯器來(lái)說(shuō),一個(gè)式子到底是模式,還是表達(dá)式,沒有辦法從一開始就知道,必須解析到(或解析不到)等號(hào)才能知道。
由此帶來(lái)的問(wèn)題是,如果模式中出現(xiàn)小括號(hào)怎么處理。ECMAScript 2015
的規(guī)則是,只要有可能導(dǎo)致解構(gòu)的歧義,就不得使用小括號(hào)。
但是,這條規(guī)則實(shí)際上不那么容易辨別,處理起來(lái)相當(dāng)麻煩。因此,建議只要有可能,就不要在模式中放置小括號(hào)。
如下三種情況不能使用小括號(hào)
情況一:變量聲明語(yǔ)句,示例代碼如下所示
// 如下情況全部會(huì)報(bào)錯(cuò) let [(a)] = [1]; let {x: (c)} = {}; let ({x: c}) = {}; let {(x: c)} = {}; let {(x): c} = {}; let { o: ({ p: p }) } = { o: { p: 2 } };
上面6個(gè)語(yǔ)句都會(huì)報(bào)錯(cuò),因?yàn)樗鼈兌际亲兞柯暶髡Z(yǔ)句,模式不能使用小括號(hào)。
情況二:作為函數(shù)參數(shù)
函數(shù)參數(shù)也屬于變量聲明,因此不能帶有小括號(hào)。
// 報(bào)錯(cuò) function f([(z)]) { return z; } // 報(bào)錯(cuò) function f([z,(x)]) { return x; }
情況三:賦值語(yǔ)句的模式
// 全部報(bào)錯(cuò) ({ p: a }) = { p: 42 }; ([a]) = [5];
上面代碼將整個(gè)模式放在小括號(hào)之中,導(dǎo)致報(bào)錯(cuò)。
// 報(bào)錯(cuò) [({ p: a }), { x: c }] = [{}, {}];
上面代碼將一部分模式放在小括號(hào)之中,導(dǎo)致報(bào)錯(cuò)。
可以使用小括號(hào)的情況只有一種:賦值語(yǔ)句的非模式部分,可以使用小括號(hào)。
[(b)] = [3]; // 正確 ({ p: (d) } = {}); // 正確 [(parseInt.prop)] = [3]; // 正確
上面三行語(yǔ)句都可以正確執(zhí)行,因?yàn)槭紫人鼈兌际琴x值語(yǔ)句,而不是聲明語(yǔ)句;其次它們的小括號(hào)都不屬于模式的一部分。第一行語(yǔ)句中,模式是取數(shù)組的第一個(gè)成員,跟小括號(hào)無(wú)關(guān);第二行語(yǔ)句中,模式是p,而不是d;第三行語(yǔ)句與第一行語(yǔ)句的性質(zhì)一致。
變量解耦賦值的用處有很多,下面舉幾個(gè)比較常見的例子。
如果沒有解耦賦值交換變量需要借助第三個(gè)變量才能完成,示例代碼如下所示:
var a = 10, b = 20; var c = a; a = b b = c c = null /// 釋放變量 console.log(a, b); // 20 10
借助變量解耦賦值完成 ,示例代碼如下所示:
let a = 10, b = 20; [a, b] = [b, a] console.log(a, b); // 20 10
使用這種方式不僅簡(jiǎn)潔,而且易讀,語(yǔ)義清晰。
函數(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();
解構(gòu)賦值可以方便地將一組參數(shù)與變量名對(duì)應(yīng)起來(lái)。
// 參數(shù)是一組有次序的值 function f([x, y, z]) { console.log(x, y, z); } f([1, 2, 3]); // 1 2 3 // 參數(shù)是一組無(wú)次序的值 function fn({x, y, z}) { console.log(x, y, z); } fn({ z: 3, y: 2, x: 1 }); // 1 2 3
解構(gòu)賦值對(duì)提取 JSON 對(duì)象中的數(shù)據(jù),尤其有用。
// 提取json數(shù)據(jù) let jsonData = { id: 42, status: "OK", data: [867, 5309] }; let { id, status, data: number } = jsonData; console.log(id, status, number); // 42, "OK", [867, 5309]
看完了這篇文章,相信你對(duì)“JS ES新特性之變量的解耦賦值怎么用”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。