看了bilibili的“技术蛋”老师的视频，整理了如下的23种解构赋值的方式。文末附上了笔记链接。ES6的解构赋值在数组，对象，map，正则，等都有非常强大的应用。在调用接口，函数调用等等场景都很常用。有小伙伴如果有更多的方式，欢迎分享。如果有错误，欢迎指正，亲喷。
1. 数组
// 1. 解构赋值 - 交换变量
let a = 'b'
let b = 'a'
console.log(a, b); // 这句代码去掉 会报错，但是我就实在有点想不通是为什么
[a, b] = [b, a]
console.log(a, b);
// 2. 解构赋值 能够进行变量的排序
let num1 = 30
let num2 = 10
let num3 = 40
let num4 = 20
console.log(num1, num2, num3, num4);
[num1, num2, num3, num4] = [num2, num4, num1, num3]
console.log(`第一: ${num1}, 第二：${num2}, 第三：{num3}, 第四：{num4}`);
// 3. 解构赋值 只从数组中 取出一部分值
const arr = ['蛋同学', '鸡同学', '鸭同学', '鹅同学', '牛同学', '羊同学']
const [num1, num2, num3] = arr
console.log(`第一名${num1} 第二名${num2} 第三名${num3}`);// 第一名蛋同学 第二名鸡同学 第三名鸭同学
// 4 只解构数组里面的部分值 其余用逗号跳过
const arr = ['蛋同学', '鸡同学', '鸭同学', '鹅同学', '牛同学', '羊同学']
const [, , num3, , num5] = arr
console.log(`第三名：${num3}，第五名: ${num5}`); // 第三名：鸭同学，第五名: 牛同学
// 5 这种写法应该是错的，第四句代码是报错的
const arr = ['蛋同学', '鸡同学', '鸭同学', '鹅同学', '牛同学', '羊同学']
let num3 = '狗同学'
let num5 = '猪同学'
// [, , num3, , num5] = arr
// 6 能够给解构不到的值 添加默认值
const arr = ['蛋同学', '鸡同学', '鸭同学', '鹅同学', '牛同学', '羊同学']
let [, , num3, , num5, , num7 = '鹿同学'] = arr
console.log(num3, num5, num7); // 鸭同学 牛同学 鹿同学
// 7 能够用对象的形式 解构 这样结构更加的清晰
const arr = ['蛋同学', '鸡同学', '鸭同学', '鹅同学', '牛同学', '羊同学']
const { 2: num3, 4: num5 } = arr
console.log(num3, num5); // 鸭同学 牛同学
// 8 能够解构数组里面特定的几个数据 其余的用一个参数【剩余参数 保存起来】
const arr = ['蛋同学', '鸡同学', '鸭同学', '鹅同学', '牛同学', '羊同学']
const [num1, num2, num3, ...restNum] = arr
console.log(num1, num2, num3, restNum); // 蛋同学 鸡同学 鸭同学 ['鹅同学', '牛同学', '羊同学']
// 9 解构第一个数据
const arr = ['蛋同学', '鸡同学', '鸭同学', '鹅同学', '牛同学', '羊同学']
const [notExist = '数组为空'] = arr
console.log(notExist); // 蛋同学、
// 10 就是数组的拷贝
const arr = ['蛋同学', '鸡同学', '鸭同学']
const [...copyArr] = arr
console.log(copyArr);
copyArr[0] = 1
console.log(copyArr);
console.log(arr); // 还是原样
// 11 数组解构复杂类型
let arr = [
{ name: '123', age: 456 },
[1, 2],
7
]
// 11 可解构数组里面的整个“数组”“对象”
let [user, xuHao, num] = arr
console.log(user, xuHao, num); // {} [] 7
// 可以在深一层次的解构里面具体的值
let [{ name, age }, [num1, num2], num3] = arr
console.log(name, age, num1, num2, num3); // 123 456 1 2 7
// 11 解构不成功 就会返回undefined 想起来了null和 undefined的区别
let arr = [1]
let [num1, num2] = arr
console.log(num1, num2); // 1 undefined
2. 对象
解构对象的注意点，变量名一定要对应上，不然就会报错
// 11 从对象里面解构出特定的属性 采用{}的形式
const obj = {
id: '1',
name: '蛋老师',
age: 18,
gender: '男',
email: '1111'
}
const { name: eggName, email: eggEmail } = obj
console.log(eggName, eggEmail); // 蛋老师 1111
// 12 从对象里面解构出特定的属性 解构时 利用已有数组里面的值 作为属性 注意[arr[0]]这个写法 最外层有一个方括号(对象的键只能是字符串，加[]表示计算，结果是字符串，不加就会报错)
const obj = {
id: '1',
name: '蛋老师',
age: 18,
gender: '男',
email: '1111'
}
const arr = ['name', 'email']
const { [arr[0]]: eggName, [arr[1]]: eggEmail } = obj
console.log(eggName, eggEmail); // 蛋老师 1111
// 13 对象解构 取名
const obj = {
id: '1',
name: '蛋老师',
age: 18,
gender: '男',
email: '1111'
}
const { name: eggName, email: eggEmail } = obj
console.log(eggName, eggEmail); // 蛋老师 1111
// 14 对象解构 剔除掉一部分不要的属性
const obj = {
id: '1',
name: '蛋老师',
age: 18,
gender: '男',
email: '1111'
}
const { id, age, ...resObj } = obj
console.log(resObj); // {email: "1111", gender: "男", name: "蛋老师"}
// 10 对象解构 已有的一个变量 根据对象里面的数据 改值
const obj = {
id: '1',
name: '蛋老师',
age: 18,
gender: '男',
email: '1111'
}
// let 后面最好加个分号 不然格式有误
let gender = '女';
({ gender } = obj)
console.log(gender);
// 16 对象解构 从嵌套对象里面解构出值
const obj = {
name: '蛋老师',
skills: {
cook: {
main: '炒鸡蛋',
language: {
frontEnd: 'javaScript',
backEnd: java
}
}
}
}
let { skills: {
language: { frontEnd }
} } = obj
// 17 传递对象给函数 -> 函数转化为数组 返回数组 -> 我们再从中解构
function getAPI(data) {
return [data.name, data.age]
}
const [eggName, eggAge] = getAPI({ name: '蛋老师', age: 18 })
console.log(eggName, eggAge); // 蛋老师 18
// 18 函数的参数是个对象 对象里面的参数也可以用默认值
function Fn({ x = 3, y = 4 } = {}) {
console.log(x, y);
return x + y
}
console.log(Fn({ x: 5 })) // 9
console.log(Fn()) // 7
// 18 从数组里面解构出一个个对象的属性name和age
const arr = [
{ name: '蛋老师', age: 18 },
{ name: '鸡老师', age: 28 },
{ name: '鸭老师', age: 38 },
]
arr.forEach(({ name, age }) => {
console.log(`姓名：${name} 年龄${age}`);
})
// 解析json对象
let json = {
username: "lizhihang",
age: 19,
hobby: "sleep"
}
let { username, age, hobby } = json
console.log(username, age, hobby); // lizhihang 19 sleep
3. 字符串
// 19 解构字符串
const str = '蛋老师'
const [first, second, third] = str
console.log(first, second, third); // 蛋 老 师
// 20 获取数组的每一项的第一个字符
const arr = ['蛋同学', '狗同学', '鸡同学', '鸭同学', '鹅同学', '牛同学']
arr.forEach(([item], index) => {
console.log(item); // 获取数组的每一项的第一个字符
})
// 21 字符串 解构出length属性
let name = 'abcde'
// let { length } = name
// console.log(length); // length
// 22 数组
let arr = [1, 2, 3]
let { length } = arr
console.log(length); // 3
4. map
// 20 map 只解构里面的值出来
let map = new Map()
map.set('name1', '蛋老师')
map.set('name2', '猪老师')
map.set('name3', '鸡老师')
for (let [, value] of map) {
console.log(value); // 蛋老师 猪老师 鸡老师 只打印里面的值 不打印里面的键
}
// 21 一般引入一个第三包包 要从里面里面引入方法 就用这样的方式 是按需引入
import name from 'b'
const { good } = name
5. 正则
// 23 从正则表达式中解构值出来
const str = '再见了886爱你20'
const arrReg = /(\D+)(\d+)(\D+)(\d+)/.exec(str)
const { 1: bye, 3: loveYou } = arrReg
console.log(bye, loveYou); // 再见了 爱你
下面github地址里，有测试的代码 github.com/lizhihang12…
