JavaScript解构赋值

前言

本文章源自《JavaScript知识小册》专栏，感兴趣的话还请关注点赞收藏.

上一篇文章：《JavaScript变量声明let、const、var》

下一篇文章：《JavaScript花样百出的数组遍历》

解构赋值

JavaScript解构赋值即按照一定模式，从数组和对象中提取值，对变量进行赋值。简单来说就是从对象或数组中获取值的另一种方式。

数组解构赋值

传统的JS获取数组的值方式如下：

let arr = [1,2,3]
let a = arr[0]
let b = arr[1]
let c = arr[2]
console.log(1,2,3)

输出1 2 3

换成解构赋值的方式

let [a,b,c] = [1,2,3] // 代码等同于上面的操作
console.log(a,b,c)

输出1 2 3

嵌套数组也可以解构赋值

let [a,b, [c,d]] = [1,2,[3,4]]
console.log(a,b,c,d)

输出1 2 3 4

左右两边不对等的情况下的解构赋值

let [a,b,[c]] = [1,2,[3,4]]
console.log(a,b,c)

输出1 2 3

等同于

let arr = [1,2,[3,4]]
let a = arr[0]
let b = arr[1]
let c = arr[2][0]

同时也可以设置默认值

let [a,b,c,d = 10 ] = [1,2,[3,4]]
console.log(a,b,c,d)

输出1 2  [3, 4] 10

默认值也可以是调用函数

function getNum() {
    return 1
}

let [a = getNum()] = []
console.log(a)

输出1

对象解构赋值

传统对象取值方式

let user = {
    name: 'Bruse',
    age: 16
}

let name = user.name
let age = user.age

console.log(name, age)

输出Bruse 16

换成解构赋值的方式

let user = {
    name: 'Bruse',
    age: 16
}

let {name, age} = user

console.log(name, age)

和数组按照顺序把右边的值赋给左边的变量不同，因为对象的每个属性名是唯一的，所以可以像下边这样调换顺序

let user = {
    name: 'Bruse',
    age: 16
}

let {age, name} = user

console.log(name, age)

依然输出Bruse 16

也可以给赋值变量起别名，例如下面将user.name赋值给nickname变量并输出

let user = {
    name: 'Bruse',
    age: 16
}

let {name: nickname, age} = user
console.log(nickname, age)

解构对象时也可以设置默认值

let user = {
    name: 'Bruse',
    age: 16
}
let {name: nickname, age, school = '深大'} = user
console.log(nickname, age, school)

输出Bruse 16 深大

字符串解构赋值

let str ='bruse'
let [q,w,e,r,t] =str
console.log(q,w,e,r,t)

输出b r u s e

方法参数解构赋值

function oop([a,b,c]) {
    console.log(a,b,c)
}

let arr = [1,2,3]
oop(arr)

输出1 2 3

若方法形参是对象，其实也跟上边提到的对象解构赋值一样。

JSON解构赋值

let json ='{"v":"hello","n":"world"}'  // json字符串
let {v,n} = JSON.parse(json)
console.log(v,n)

输出hello world