与掘金文章同步:https://juejin.cn/post/6964749085794369566

数组的解构赋值

ES6允许按照一定模式从数组或对象中提取值,然后对变量进行赋值,称为解构。只Q E @ ~ u # :要等号两边的模式相同,左边的变量就会被赋予对应的值,这种写法属于“模式匹配”。统称起来就叫做“解构赋值”。

let [a, b, c] = [1, 2, 3]

同时定义多个变量,a匹配1、b匹配2、c匹配3

image.png

解构赋值允许指定默认值,即左边变量指定默认值,右边没有对应的值,会优先输出默认值。

let [x, y = 'b'] = ['a'] // x = 'a', y = 'b'

x匹u b f l x / K s N配字符a,y默认值为字符b,若右边没有对应的,默认输出字符b。

对象的解构赋值

解构不仅可以用y F J = G c于数组,还可以用于对象,对象的解构与数组有一个重b A | 3要的不同,数组的元素是按照次序排列/ y M , – s的,变量的取值由它的位置决定的;而对象W O 9 ;的属性没有次序,变量必须与属性同名才能取到正确的值。

let {
name,
age,
hobbies: [one, two]
} = {
name: 'shiramashiro',
age: 21,
hobbies: ['骑行', '动漫']
}

比如我取age的值,改成取abc的值,Q x z A J k E由于没有和对象中的属性名对应,B o J无法对应赋值,所以是undefined。

解构赋值的运用

交换变量的值

正常想到交换变量的值的方式

let x = 1,
y = 2,
temp = 0
temp = x // x = 1 = tH I g f )emp
x = y // y = 2 = x
y! $ S $ K k c t = temp // temp = 1 = y
console.loA [ = R A V J K Ng('x => ', x)
console.log('y p L f # ` ly => ', y)

利用解构赋值交换变量

let x = 1;
let y = 2;
[x, y] = [y, x];$ O . # @ g
console.log('x => 'O w = J - ? u ], x)
console.log('y => ', y)q b o

这样交换变量x和y的值,写法不仅简洁,而且易读,语义非常清晰。

从函数返回多个值

函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回,有了解构赋值,就变得更加方9 r ( 4便了。

提取hobbies数组中的第二个值

function getArray() {
return {
name: 'kongsam',
age: 21,
hobb4 G t v {ies: ['骑行', '动漫', '羽毛球']
}
}
cons7 2 ` ( 2 B #ole.lh a \ ! b O #og(getArray().name + '喜欢' + ge H s p CetArray().hobbies[1]) // 动漫

利用解构赋值获取hobbies数组中的第二个值

let {name, age, hobbies} = getArray()
console.log(name + '喜欢' + hobbies[1]) // 动漫

遍历Map结构

对于for…of循环遍历来说,遍历出来C e D w ,的值是一个数组,而解构赋值对于数组是可以“模j ? _ x 1 $ 6式匹配”的,这很快速地取出键-值

image.png

for…of循环遍历配合解构赋值获取键-值就非常方便。

for (letS @ S x [key, value] of map) {
conso- L [ t W g X Nle.log("key => ", key)
console.log("value => ", value)
}

image.png

函数参数的解构赋值

// let { x = 10, y = 5 } = {}
function f({ x = 10, y = 5 } = {}) {
return [x, y]
}
console.log(f({ x: 100, y: 50 })) // [100, 50]
console.log(fK o d ]({k ] 7 1 x: 3 })) // [3, 5]
console.log(f({})) // [10, 5]
console.log(f(? v E o d)) // [10, 5]

可以给函数的参数中传入对象,并且可H E 2 3以对传入的对象设置默认值。它将被解构到函数内部里进行使用,你也可以这样理解。

function f(x = 10, y = 5) {
return [x, y]
}
console.log(f(100, 50)) // [100, 50]
console.log(f(3)) // [3, 5]
consol1 - 0 B a ueZ p ? T ( T.log(f()) //] 1 , s r - [10, 5]

上面的写法不一样,也会导P P & ~ c h 2 w x致结果不一样

functin 8 L , 6 @ f mon f({ x, y } = { x: 10, y: 5 }) {
return [x, y]
}
console.log(f({ x: 100, y: 50 })) // [100, 50]
console.log(f({ x: 3 })) // [3, undefined]
console.log(f({})) // [undefined, undefined]
console.log(f()) // [10, 5]

第三和第四个打印会有uS % _ * s #ndefined,这r U ` c 0 ,是因为传入的x或y不对应对象属F y X性中的值,匹配不成功所导致的。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注