解析结构是一种从对象或者数组中取得值的一种全新的写法。
我们只需要通过一个简单的例子就能立刻明白是怎么回事了。
首先假设我们有如下这样一个json数据。
var tom = {
name: 'TOM',
age: 20,
gender: 1,
job: 'studend'
}
我们用对象的方式保存了TOM
的一些基本信息,在传统方式中,当我们想要取得其中的某些信息时,我们通常会这样做:
var name = tom.name;
var age = tom.age;
var gender = tom.gender;
var job = tom.job;
而当我们使用解析结构时,我们这样做:
const { name, age, gender, job } = tom;
// 上面方式实际上是下面这种方式的简写,但实践中我们并不会这么使用
// const {name: name, age: age, gender: gender, job: job } = tom;
是不是简单了很多。
我们还可以给变量指定默认值。
// 如果数据中能找到name,则变量的值与数据中相等,找不到,则使用默认值
const { name = 'Jake', stature = '170' } = tom;
我们还可以给变量重新命名。
const { gender: t, job } = tom;
重命名之后,gender将无法访问,而只能通过新的变量名t来访问对应的数据。
我们还可以利用解析结构获取嵌套数据中的值。
const peoples = {
counts: 100,
detail: {
tom: {
name: 'tom',
age: 20,
gender: 1,
job: 'student'
}
}
}
// 获取tom
const { detail: { tom } } = peoples;
// 直接获取tom的age与gender
const { detail: { tom: { age, gender }}} = peoples;
如果你暂时看不懂这样的嵌套结构,在使用时你也可以拆解来看。
const { detail } = peoples;
const { tom } = detail;
const { age, gender } = tom;
除此之外,数组也具有自己的解析结构。当然,写法上与对象的解析结构略有不同,通过一个简单的例子观察。
const arr = [1, 2, 3];
const [a, b, c] = arr;
// 等价于
const a = arr[0];
const b = arr[1];
const c = arr[2];
与对象不同的是,数组中变量与值的关系是与序列号一一对应的,这是一个有序的对应关系。而对象则根据属性名一一对应,这是一个无序的对应关系。因此在实践中,对象的解析结构使用更加频繁与便利。
在使用时,无论是对象还是数组,建议大家讲解析结构的运用重点放在取值上,而不是试图利用解析结构来声明初始变量。
运用重点放在取值上的意思就是,当我们想要从一个已经有的数据中,获取我们想要的信息时使用解析结构。而不是为了声明几个初始变量,自己拼凑一个对象或者数组出来。
在一个函数中,当传入的参数是数组或者对象时,我们也可以使用解析结构来简化我们的代码。这是解析结构在不同场景下的取值。
const fn = ({name, age}) => {
return `${name} is age is ${age}`;
}
fn({ name: 'TOM', age: 20 });
另外总结一个关于默认值应用场景的小知识点。
// 对象解析结构中的默认值
const { name, age = 20 } = tom;
// 数组解析结构中的默认值
const [a, b = 20] = [1]
// 函数参数中的默认值
const fn = (x = 20, y = 30) => x + y;
fn(); // 50