项目中关于解构的常用用法，我都帮你整理好了-...解构

在本文串，你将学到所有你需要知道的 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 解构知识点。

作者：Ruphaa 译者：前端小智

来源：dev 原文：https://dev.to/thatanjan/everything-you-need-to-know-about-javascript-destructuring-30e5