「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」
导读
推荐细读模块...
🍇 数组解构 - 【进阶用法】
🍇 对象解构 - 【注意！！！】
解构赋值概念
解构赋值语法是一种 Javascript 表达式。
- 通过解构赋值，可以将属性/值从对象/数组中取出,赋值给其他变量。
- 解构赋值是通过将结构中的各元素复制到变量中来达到“解构”的目的。但对象/数组本身不会被修改。
数组解构
基本使用
📖 可以在定义变量的同时，使用解构进行赋值
let [one, two, three] = foo;
//等同于
let one = foo[0];
let two = foo[1];
let three = foo[2];
复制代码📖 也可以先声明变量，在进行解构赋值
设置默认值
当【左边≠右边】时，可以先设置一个默认值，否则取不到值的变量会变成undefined
剩余值处理
可以使用三个点 "..."+ 参数来接收剩余的所有元素，变量名称随意，必须在最后一个参数的位置上
进阶用法
🎨 可以和split 函数结合使用，比如
let [Mother,Father] = "judy,pete".split(',');
console.log(Mother) //judy
console.log(Father) //pete
复制代码🎨 可以使用逗号忽略元素，比如
let [name1,,name3] = ["Julius01", "Caesar02", "Consul03"]
复制代码🎨 可以直接赋值给对象的属性，比如
let user = {};
[user.name, user.surname] = ["Ilya","Kantor"]
复制代码🎨 可以结合.entries() 方法来遍历对象的“键—值”对，比如
for (let [key, value] of Object.entries(fruit)) {...}
复制代码🎨 可以利用解构来进行变量交换，比如
对象解构
基本使用
注意变量名称保持一致
let {a, b} = {a:"Julius01", b:"Caesar02"}
复制代码📖 新的变量名称
如果想要从一个对象中提取变量并赋值给和对象属性名不同的新的变量名。应该这样写：
let {name1: a,name2: b} = {name1:"Julius01", name2:"Caesar02"}
复制代码冒号表示“什么值：赋值给谁”，如以上示例表示，把name1赋值给变量a，把name2赋值给变量b
设置默认值
对象的解构同样可以设置默认值
let { a, b = 2} = {a:"Julius01"}
复制代码📖 命名并且设置默认值
一个属性可以同时
- 1）从一个对象解构，并分配给一个不同名称的变量
- 2）分配一个默认值，以防未解构的值是
undefined。
剩余值的处理
当对象拥有的属性数量比我们提供的变量数量还多时，可以只取其中部分属性，然后用1个变量来存剩余的值，比如
let fruit = {
apple:'苹果',
banana:'香蕉',
grape:'葡萄'
}
let {grape, ...restFruit} = fruit;
复制代码注意！！！
🎨 对象解构赋值，变量的顺序不重要，比如：
🎨 不支持直接先声明变量，后解构赋值
可以看到，数组的解构先声明后赋值是正确的，但是对象的会报错。
这是因为在 JavaScript 中会把{...}当做一个代码块。所以这样的代码{a, b, c} = {a: "hi", b: 'axjy', c: 99};是无效的。如果想要使它有效，则需要把整个赋值表达式用括号 (...) 包起来，以此来告诉JavaScript 这不是一个代码块。
( ... )表达式之前一定要有一个分号，否则它可能会被当成上一行中的函数执行。
总结
- 解构数组的完整语法
let [item1 = default, item2, ...rest] = array - 解构对象的完整语法
let {prop : varName = default, ...rest} = object
参考资料：
javaScript Destructuring assignment
🎨【点赞】【关注】不迷路，更多前端干货等你解锁
往期推荐
