資訊專(zhuān)欄INFORMATION COLUMN
摘要：函數(shù)參數(shù)中，模式不能帶有圓括號(hào)函數(shù)屬于聲明變量賦值語(yǔ)句中，不能將整個(gè)模式，或嵌套模式中的一層，放在圓括號(hào)之中。
解構(gòu)賦值的意思：允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)數(shù)組的解構(gòu)賦值
大多數(shù)變量賦值都是多帶帶進(jìn)行的 let a = 10 let b = 10 上面這樣寫(xiě)法就多帶帶進(jìn)行簡(jiǎn)單的賦值，那么數(shù)組解構(gòu)賦值如何去寫(xiě)，請(qǐng)看下面的例子 let [a] = 10 上面這樣寫(xiě)會(huì)報(bào)錯(cuò)，左邊[a]為匹配項(xiàng)，右邊10為賦值項(xiàng)，如果右邊不是數(shù)組，或不是可遍歷的結(jié)構(gòu)就會(huì)報(bào)錯(cuò) ------------------ 下面這樣就不會(huì)報(bào)錯(cuò)，匹配項(xiàng)可以匹配到，而且這也算是多帶帶賦值 let [a] = [10] console.log(a) // 將會(huì)得到10 結(jié)構(gòu)賦值的優(yōu)點(diǎn)就是多個(gè)賦值，結(jié)構(gòu)化賦值,下面的b會(huì)得到undefined，因?yàn)槠ヅ漤?xiàng)匹配到的賦值為undefined未定義 let [a,b] = [10] console.log(a) // 10 console.log(b) // undefined 那我們來(lái)看看結(jié)構(gòu)化多一點(diǎn)的賦值 let [a,[b,c,[d]],[e,f],g,[[h]]] = [1,[2,3,[4]],[5,6],7,[[8]]] console.log(a,b,c,d,e,f,g,h) // 1,2,3,4,5,6,7,8 如果去掉[[8]]的二維數(shù)組，變?yōu)橐痪S數(shù)組會(huì)怎樣 let [a,[b,c,[d]],[e,f],g,[[h]]] = [1,[2,3,[4]],[5,6],7,[8]] console.log(a,b,c,d,e,f,g,h) // 報(bào)錯(cuò) 那我們來(lái)看看數(shù)組解構(gòu)賦值的默認(rèn)值是如何定義的呢？ let [arr = 3] = [] console.log(arr) // 3 來(lái)看看下面這一組 let [arr1 = 1,arr2 = 2,arr3=3] = [] console.log(arr1,arr2,arr3) // 1，2，3 記住數(shù)組解構(gòu)賦值不管你有沒(méi)有默認(rèn)值，右邊只要匹配到并且有值都會(huì)覆蓋左邊的默認(rèn)值 let [arr1 = 1,arr2 = 2,arr3=3] = [3，2，1] console.log(arr1,arr2,arr3) // 3，2，1 但是有一種類(lèi)型除外不會(huì)右邊的不會(huì)覆蓋左邊的默認(rèn)值，undefined(只有它) let [a = 3] = [undefined] console.log(a) // 3對(duì)象的解構(gòu)賦值
對(duì)象的結(jié)構(gòu)賦值和數(shù)組的不太一樣，對(duì)象是對(duì)屬性進(jìn)行匹配的，而數(shù)組是按順序匹配的
下面我們來(lái)看看對(duì)象解構(gòu)賦值如何來(lái)寫(xiě)
let {re, ty} = {re: 1, ty: 2}
console.log(re,ty) // 1,2
下面這個(gè)例子obj會(huì)報(bào)錯(cuò)是因?yàn)閛bj是匹配項(xiàng)用來(lái)匹配右邊對(duì)象的屬性key，而左邊的baz才是變量
let {obj: baz} = {obj: "baz"}
console.log(baz) // baz
console.log(obj) // 報(bào)錯(cuò)
我們來(lái)試著寫(xiě)對(duì)象解構(gòu)化的解構(gòu)賦值
let obj = {
a: {
b: [1],
c: {
c1: "c1",
c2: "c2",
c3: true
}
}
}
let {a, a: {b,c: {c1,c2,c3}}} = obj
console.log(a) // 解構(gòu)出的結(jié)果
{
b: [1],
c: {
c1: "c1",
c2: "c2",
c3: true
}
}
會(huì)得到[1],這就是對(duì)象解構(gòu)賦值的原因，打印里面的屬性都會(huì)得到值而且不會(huì)報(bào)錯(cuò)
console.log(b)
我們?cè)賮?lái)看看對(duì)象解構(gòu)賦值默認(rèn)值
右邊的值永遠(yuǎn)覆蓋左邊的默認(rèn)值，除卻undefind
let {init = 4} = {init: 5}
console.log(init) //5
字符串，數(shù)值布爾，函數(shù)解構(gòu)賦值
字符串
我理解的啊就是字符串會(huì)被分割成數(shù)組，然后一一對(duì)應(yīng)，感覺(jué)和數(shù)組解構(gòu)賦值差不多
let [a,b,c,d,e,f] = "qwert"
console.log(a,b,c,d,e,f) // q,w,e,r,t,undefined
我們還可以獲取字符串的長(zhǎng)度，但是匹配屬性必須為length，否則會(huì)報(bào)錯(cuò)
let {length : len} = "哈哈哈哈哈哈";
len // 6
數(shù)值布爾
我看官方是給了兩個(gè)例子，數(shù)值和布爾解構(gòu)都會(huì)將之轉(zhuǎn)化為對(duì)象，軟老師的解釋就是數(shù)值和布爾值的包裝對(duì)象都有toString屬性，那我們來(lái)打印一下Number.prototype和Boolean.prototype果然兩個(gè)里面都有toString的方法，而且還有一個(gè)valueOf方法，我們來(lái)試試
let {toString: s} = 123;
console.log(s) // 這會(huì)是一個(gè)toString方法
let {valueOf: s3} = true
s3 === Boolean.prototype.valueOf // true
函數(shù)
我們這里會(huì)得到12，其實(shí)這和上邊的數(shù)組解構(gòu)賦值和對(duì)象解構(gòu)賦值一樣，只要你能匹配到就可以解構(gòu)
function add({a,b}) {
return a+b
}
console.log(add({a:10,b:2}))
function add({hh:[x, y],c}){
return x + y+c;
}
console.log(add({hh:[1,2],c: 1})) //4
圓括號(hào)
變量聲明語(yǔ)句中，不能帶有圓括號(hào)。
let [(x)] = [3]
let ({a}) = {a: 3}
函數(shù)參數(shù)中，模式不能帶有圓括號(hào)(函數(shù)屬于聲明變量)
賦值語(yǔ)句中，不能將整個(gè)模式，或嵌套模式中的一層，放在圓括號(hào)之中。
整個(gè)模式我理解的意思就是呢就是把左邊的匹配模式包起來(lái)了
([b]) = [123]
這種情況就是包裹一部分而且把模式包裹起來(lái)了
[({ p: a }), { x: c }] = [{}, {}];
那么正確的使用呢,就是例如下面這樣，有對(duì)象的話一定要包裹變量，或是全部包裹起來(lái)
[{ p: (a) }, { x: c }] = [{}, {}];
[{ p: (a) }, { x: (c) }] = [{}, {}];
[({ p: a }, { x: c })] = [({}, {})];
([{ p: a }, { x: c }] = [{}, {}]);
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100725.html
摘要：另外對(duì)于已經(jīng)聲明的變量進(jìn)行解構(gòu)賦值時(shí)，要非常小心。因此在行首加，將其強(qiáng)制轉(zhuǎn)化為表達(dá)式執(zhí)行。由于和無(wú)法轉(zhuǎn)為對(duì)象，所以對(duì)它們進(jìn)行解構(gòu)賦值，都會(huì)報(bào)錯(cuò)。 let和const let和const是es6新增的兩個(gè)變量聲明關(guān)鍵字，與var的不同點(diǎn)在于： （1）let和const都是塊級(jí)作用域，在{}內(nèi)有效，這點(diǎn)在for循環(huán)中非常有用，只在循環(huán)體內(nèi)有效。var為函數(shù)作用域。 （2）使用let和con...
摘要：比如上面展示的情況都是可以聯(lián)合使用的比如對(duì)象的解構(gòu)賦值對(duì)象的解構(gòu)賦值是基于屬性的。當(dāng)給已存在的變量解構(gòu)賦值時(shí)，注意加這是由于如果不加會(huì)把左邊看成一個(gè)代碼塊，會(huì)報(bào)錯(cuò)。注意事項(xiàng)數(shù)組的解構(gòu)賦值中，使用的變量必須放在最后。 解構(gòu)賦值 解構(gòu)賦值是一個(gè)聽(tīng)起來(lái)比較高大上的特性，但按我的理解，它就是一種語(yǔ)法糖。它并沒(méi)有賦予js更強(qiáng)大的能力，只是讓賦值操作更加的靈活，效率。 在es6之前，賦值操作需要=...
摘要：前言前言該篇筆記是第二篇變量的解構(gòu)賦值。這一章原文鏈接變量的解構(gòu)賦值解構(gòu)賦值解構(gòu)賦值允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)。對(duì)象的解構(gòu)賦值是根據(jù)對(duì)象值進(jìn)行匹配。前言該篇筆記是第二篇 變量的解構(gòu)賦值。這一章原文鏈接： 變量的解構(gòu)賦值解構(gòu)賦值ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)（Destructuring）。解構(gòu)賦值是對(duì)賦值運(yùn)...
摘要：前言該篇筆記是第二篇變量的解構(gòu)賦值。這一章原文鏈接變量的解構(gòu)賦值解構(gòu)賦值允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)。對(duì)象的解構(gòu)賦值是根據(jù)對(duì)象值進(jìn)行匹配。 前言該篇筆記是第二篇 變量的解構(gòu)賦值。 這一章原文鏈接： 變量的解構(gòu)賦值解構(gòu)賦值ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)...
摘要：數(shù)組的解構(gòu)賦值特點(diǎn)根據(jù)數(shù)據(jù)的下標(biāo)來(lái)賦值的，有次序。模式能夠匹配起來(lái)，如長(zhǎng)度為數(shù)值和布爾值的解構(gòu)賦值解構(gòu)賦值的規(guī)則是只要等號(hào)右邊的值不是對(duì)象或數(shù)組，就先將其轉(zhuǎn)為對(duì)象。布爾值解構(gòu)賦值為字符串的一種。在很多獨(dú)立細(xì)小的方面，解構(gòu)賦值都非常有用。 1、解構(gòu)賦值簡(jiǎn)介 官方解釋?zhuān)喊凑找欢ǖ哪Ｊ?，從?shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)（Destructuring）。 舉個(gè)例子，想獲取數(shù)組中...
摘要：解構(gòu)賦值的分類(lèi)數(shù)組解構(gòu)賦值對(duì)象解構(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)值將生效。報(bào)錯(cuò)報(bào)錯(cuò)函數(shù)參數(shù)的解構(gòu)賦值函數(shù)的參數(shù)也可以使用解構(gòu)賦值和指定默認(rèn)值 ES6可以從數(shù)組和對(duì)象中提取值，然后對(duì)變量進(jìn)行賦值。解構(gòu)賦值的分類(lèi)：數(shù)組解構(gòu)賦值、對(duì)象解構(gòu)賦值 、字符串解構(gòu)賦值、數(shù)值解構(gòu)賦值、布爾值解構(gòu)賦值、 函數(shù)參...
閱讀 2168·2023-04-26 00:43
閱讀 2688·2021-11-22 15:22
閱讀 3822·2021-11-11 16:55
閱讀 972·2021-11-04 16:06
閱讀 1790·2019-08-30 14:12
閱讀 1004·2019-08-30 14:02
閱讀 3374·2019-08-29 17:05
閱讀 1421·2019-08-29 12:27
