项目中关于解构的常用用法，我都帮你整理好了
在本文串，你将学到所有你需要知道的 JS 解构知识点。
为什么 JS 中存在解构？
这是一个普通的对象，包含4个人的名字。
const names = {
taylor: '小智',
shawn: '前端小智',
zayn: '大志',
halsey: '王大志',
}复制代码现在，如果让你手动打印所有人名到控制台，你会怎么做。可能会这样做：
console.log(names.taylor) console.log(names.shawn) console.log(names.zayn) console.log(names.halsey)复制代码
这种点的方式有点烦人，怎样才能让它变得更好？
const taylor = names.taylor const shawn = names.shawn const zayn = names.zayn const halsey = names.halsey console.log(taylor) console.log(shawn) console.log(zayn) console.log(halsey)复制代码
好多了。但我们仍然在重复同样的工作。如果我们可以在单个变量上声明和分配对象属性呢？
这样会更好，对吧?这就是对象解构帮助我们的地方。所以我们可以这样做：
const { taylor, shawn, zayn, halsey} = names
console.log(taylor)
console.log(shawn)
console.log(zayn)
console.log(halsey)复制代码这比以前好多了。
它是如何工作的呢?
这很简单。我们只是从对象中取出属性并将它们存储在一个变量中。默认情况下，变量名与属性名相同。所以我们可以这样写：
const { taylor, shawn, zayn: zaynMalik, halsey} = names复制代码数组解构？
数组解构与对象的解构类似，但有一些区别。我们知道数据被存储在一个带有索引的数组中。它们是有顺序的。因此，在进行解构时，我们必须保持顺序。比如：
const albums = ['Lover', 'Evermore', 'Red', 'Fearless'] const [lover, ever] = albums // Lover Evermore复制代码
而且，数组也没有值的属性。所以，可以直接给出你想要的任何变量名称。
我们继续看看对象和数组解构的一些用例。
数组解构
交换变量
let a = 1; let b = 3; [a, b] = [b, a]; console.log(a); // 3 console.log(b); // 1复制代码
忽略一些返回值
function f() {
return [1, 2, 3];
}
const [a, , b] = f();
console.log(a); // 1
console.log(b); // 3复制代码默认值
let a, b; [a=5, b=7] = [1]; console.log(a); // 1 console.log(b); // 7复制代码
用 Rest 参数创建子数组
const albums = ['Lover', 'Evermore', 'Red', 'Fearless'] const [, ...albums2] = albums console.log(albums2) // ['Evermore', 'Red', 'Fearless']复制代码
对象解构
从作为函数参数传递的对象中解构字段
const anjan = {
name: '前端小智', age: 20
}
const statement = ({name, age}) => {
return `My name is ${name}. I am ${age} years old.`
}
statement(anjan)
// My name is 前端小智. I am 20 years old.复制代码嵌套对象解构
const profile= {
name: 'Anjan',
age: 20,
professional: {
profession: '前端开发',
}
}
const {name, age, professional: {profession}} = profile
console.log(professional) // 这句会报错
console.log(profession) // 前端开发复制代码默认值
const {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5复制代码嵌套对象和数组解构
const taylor = {
name: 'Taylor Swift',
age: 31,
address: {
city: 'New York',
country: 'USA',
},
albums: ['Lover', 'Evermore', 'Red', 'Fearless'],
}
const {
name,
age,
address: { city },
albums: [lover, ...rest],
} = taylor
console.log(name) // Taylor Swift
console.log(age) // 31
console.log(city) // New York
console.log(lover) // Lover
console.log(rest) // [ 'Evermore', 'Red', 'Fearless' ]复制代码这就是关于 JS 所有你需要知道的 JS 解构知识点。
作者：前端小智
链接：https://juejin.cn/post/7026495227112194062