前端码易

解构是一种从对象/数组中取值的全新写法。

一个简单的例子就能搞定它。

首先假设有如下对象。

code.ts
1
var tom = {

2
  name: 'TOM',

3
  age: 20,

4
  gender: 1,

5
  job: 'studend'

6
}

我们使用对象的方式，保存了 TOM 的一些基本信息。在传统方法中，当我们想要取得其中的信息时，通常会采用如下的方式

code.ts
1
var name = tom.name;

2
var age = tom.age;

3
var gender = tom.gender;

4
var job = tom.job;

新的结构语法则要简单许多

code.ts
const { name, age, gender, job } = tom;

name, age, gender, job 此时就已经是可以使用的变量。

但是需要注意的是，这样的写法是一种缩写。完整的写法应该为

code.ts
1
// 左侧是 key 值，右侧是变量

2
// 变量名与值是对应关系

3
const { 

4
  name: name, 

5
  age: age, 

6
  gender: gender, 

7
  job: job 

8
} = tom;

因此，当我们结合缩写，并且想要对变量重命名时，就应该放弃缩写的形式

code.ts
1
// 此时的变量名为 name2，age, gedner, job

2
const { name: name2, age, gender, job } = tom;

还可以给变量指定默认值

code.ts
1
// 如果数据中能找到 name，则变量的值与数据中相等，找不到，则使用默认值

2
const { name = 'Jake', stature = '170' } = tom;

我们还可以利用解析结构获取嵌套数据中的值。

code.ts
1
const peoples = {

2
  counts: 100,

3
  detail: {

4
    tom: {

5
      name: 'tom',

6
      age: 20,

7
      gender: 1,

8
      job: 'student'

9
    }

10
  }

11
}

12


13
// 获取tom

14
const { detail: { tom } } = peoples;

15


16
// 直接获取tom的age与gender

17
const { detail: { tom: { age, gender } } } = peoples;

如果你暂时看不懂这样的嵌套结构，在使用时你也可以拆解来看。

code.ts
1
const { detail } = peoples;

2
const { tom } = detail;

3
const { age, gender } = tom;

从对象中取值时，会查找原型链。

code.ts
1
const p = {

2
  name: 'tony'

3
}

4
p.__proto__.age = 20

5


6
const {name, age} = p

7
console.log(name, age) // tony  20

除此之外，数组也具有自己的解析结构。当然，写法上与对象的解析结构略有不同，通过一个简单的例子观察。

code.ts
1
const arr = [1, 2, 3];

2
const [a, b, c] = arr;

3


4
// 等价于

5
const a = arr[0];

6
const b = arr[1];

7
const c = arr[2];

与对象不同的是，数组中变量与值的关系是与序列号一一对应的，这是一个有序的对应关系。而对象则根据属性名一一对应，这是一个无序的对应关系。因此在实践中，对象的解析结构使用更加频繁与便利。

在使用时，无论是对象还是数组，建议大家将解析结构的运用重点放在取值上，而不是试图利用解析结构来声明初始变量。

运用重点放在取值上的意思就是，当我们想要从一个已经有的数据中，获取我们想要的信息时使用解析结构。而不是为了声明几个初始变量，自己拼凑一个对象或者数组出来。

在一个函数中，当传入的参数是数组或者对象时，我们也可以使用解析结构来简化我们的代码。这是解析结构在不同场景下的取值。

code.ts
1
const fn = ({ name, age }) => {

2
  return `${name} is age is ${age}`;

3
}

4


5
fn({ name: 'TOM', age: 20 });

另外总结一个关于默认值应用场景的小知识点。

code.ts
1
// 对象解析结构中的默认值

2
const { name, age = 20 } = tom;

3


4
// 数组解析结构中的默认值

5
const [a, b = 20] = [1]

6


7
// 函数参数中的默认值

8
const fn = (x = 20, y = 30) => x + y;

9
fn(); // 50

另外还有一些小技巧

例如，使用解构语法进行变量交换

code.ts
1
var a = 10;

2
var b = 20;

3


4
[a, b] = [b, a];

5
console.log(a); // 20

6
console.log(b); // 10
上一篇
2、模板字符串
下一篇
4、展开运算符
专栏首页
到顶
专栏目录