为何 JS 中存有重构？

这是两个一般的第一类，包涵4对个人的英文名字。

const names = { taylor: 小光, shawn: 前端小光, zayn: 文才, halsey: 王文才, }

那时，假如让你全自动列印其他人名到控制面板，你会怎么做。可能会这种做：

console.log(names.taylor) console.log(names.shawn) console.log(names.zayn) console.log(names.halsey)

此种点的形式recommend人，若想让它显得更快？

consttaylor = names.taylorconst shawn = names.shawn const zayn = names.zayn consthalsey = 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], } = taylorconsole.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 重构习题。

作者：Ruphring-30e5