解构赋值
大约 5 分钟约 1398 字
数组的解构赋值
解构赋值是什么？
解析某一数据的结构，将我们想要的东西提取出来，赋值给变量或常量
const [a, b, c] = [1, 2, 3]
console.log(a, b, c) // 1,2,3
数组解构赋值的原理
- 模式（结构）匹配
const [a, b, c] = [1, 2, 3] // 等号左右结构相同
索引值相同的完成赋值
不取的，可以直接用逗号跳过
eg:我们要取 3
const [, , c] = [1, 2, 3]
console.log(c) // 3
数组解构赋值的默认值
const [a = 1, b = 2] = []
- 默认值的生效条件
只有当一个数组成员严格等于（===）undefined 时，对应的默认值才会生效
const [a = 1, b = 2] = [3, null]
console.log(a, b) // 3,null
const [a = 1, b = 2] = [3]
console.log(a, b) // 1,2
- 默认值表达式
如果默认值是表达式，默认表达式是惰性求值的
const func = () => {
console.log('我被执行了')
return 2
}
const [x = fun()] = [1]
console.log(x) // 1
数组解构赋值的应用
- 常见的类数组的解构赋值
- arguments
function func() {
const [a, b] = arguments
console.log(a, b)
}
func(1, 2)
- nodeList
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
const [p1, p2, p3] = document.querySelectorAll('p')
console.log(p1, p2, p3)
</script>
</body>
- 函数参数的解构赋值
const arr = [1, 2]
const add = ([x, y]) => x + y
console.log(add(arr))
- 交换变量的值
es6 之前需要引入中间变量:
let x = 1
let y = 2
let temp = x
x = y
y = temp
console.log(x, y) //2,1
es6:
let x = 1
let y = 2
;[x, y] = [y, x]
console.log(x, y) // 2,1
对象的解构赋值
对象的解构赋值的原理
- 模式（结构）匹配
{}={}
- 属性名相同的完成赋值
const { age, username } = { username: 'alex', age: 18 }
console.log(age, username) // 18 "alex"
// 完整写法
// const{'age':age,'username':username}= {username:"alex",age:18}
// 取别名
// const{age:age,username:uname}={username:"alex",age:18}
console.log(age, uname) // 18 "alex"
对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。
对象的解构赋值的注意事项
- 默认值的生效条件
对象的属性值严格等于 undefined 时，对应的默认值才会生效。
const { username = 'alex', age = 0 } = { username: 'alex' }
console.log(username, age) // 'alex', 0
- 默认值表达式
如果默认值是表达式，默认值表达式是惰性求值的
- 将一个已经声明的变量用于解构赋值
let x = 2
// let{x}={x:1} ❌
// {x}={x:1} ❌
;({ x } = { x: 1 })
console.log(x)
- 可以取到继承的属性
const { toString } = {}
console.log(toString) //继承自Object()
对象的解构赋值的应用
1.函数参数的解构赋值
const logPersonInfo = ({ age = 1, username = 'alex' }) => {
console.log(age, username) // 18 , 'alex'
}
logPersonInfo({ age: 18 })
- 复杂的嵌套
const obj = {
x: 1,
y: [2, 3, 4],
z: {
a: 5,
b: 4,
},
}
// const{x,y,z}=obj
// console.log(x,y,z);
const {
y: [, yy],
y,
z: { a: a1 },
} = obj
console.log(y, yy, a1)
其它数据类型的解构赋值
字符串的解构赋值
- 数组形式的解构赋值
const [a, b, , , c] = 'hello'
console.log(a, b, c) // h e o
- 对象形式的解构赋值
const { 0: a, 1: b, length } = 'hello'
console.log(a, b, length) // h e 5
数值和布尔值的解构赋值
js 会先将等号右边的值转为对象
const { a = 1, toString } = 123
console.log(a, toString)
const { b = 1, toString } = true
console.log(b, toString)
undefined 和 null 的解构赋值
由于 undefined 和 null 无法转为对象，所以对它们进行解构赋值，都会报错
解构赋值常见的应用场景
交换变量的值
let x = 1
let y = 2
;[x, y] = [y, x] // tips：x 和 y 已经声明了，这里就不用再添加 let 等关键字声明了
console.log(x, y) // 2 1
交换后 x 的值为 2，y 的值为 1
从函数返回多个值
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回，可以使用解构赋值，非常方便的取出这些值。
- 返回一个数组
function fun() {
return [1, 2, 3]
}
let [a, b, c] = fun()
console.log(a, b, c) // 1 2 3
- 返回一个对象
function fun() {
return {
name: 'frank',
age: 18,
}
}
let { name, age } = fun()
console.log(name, age) // frank 18
函数参数的定义
可以方便地将一组参数与变量名对应起来
（1）参数是一组有次序的值
function f([x, y, z]) {
console.log(x, y, z)
}
f([1, 2, 3])
传入函数的参数是数组时，可以对参数进行解构，获取数组中每一项的值
（2）参数是一组无次序的值
function f({ x, y, z }) {
console.log(x, y, z)
}
f({
z: 1,
x: 2,
y: 3,
})
传入函数的参数是对象时，可以对参数进行解构，获取对象中对应的属性值
指定函数参数的默认值
指定参数的默认值，就避免了在函数体内部再去判断传入的参数是否有值了
function foo({ x, y = 5 }) {
console.log(x, y)
}
foo({}) // undefined 5
foo({ x: 1 }) // 1 5
foo({ x: 1, y: 2 }) // 1 2
遍历 Map 解构
解构赋值，获取键名和键值就非常方便
var map = new Map()
map.set('李四', '18')
map.set('张三', '20')
for (let [key, value] of map) {
console.log(`${key}今年${value}岁`)
}
加载模块
这里也是用到了解构，可以让你引入的部分更加明确
import { x, y } from 'xxx'
提取 JSON 数据
解构赋值可以快速提取 JSON 数据的值
var jsonData = {
name: '小慕',
age: '18',
data: [1, 2, 3, 4],
status: 'OK',
}
let { name, age, data, status } = jsonData
console.log(name, age, data, status)