ES6 中引入的解构分配可以轻松地将数组值和对象属性分配给不同的变量。例如, ES6之前的版本:
// 将对象属性分配给变量
const person = {
name: 'Sara',
age: 25,
gender: 'female'
}
let name = person.name;
let age = person.age;
let gender = person.gender;
console.log(name);//Sara
console.log(age);//25
console.log(gender);//female
从ES6:
// 将对象属性分配给变量
const person = {
name: 'Sara',
age: 25,
gender: 'female'
}
// 解构赋值
let { name, age, gender } = person;
console.log(name);//Sara
console.log(age);//25
console.log(gender);//female
注意:名称的顺序在对象解构中无关紧要。
例如,您可以将上述程序编写为:
let { age, gender, name } = person;
console.log(name);//Sara
注意:在分解对象时,应为变量使用与对应的对象键相同的名称。
例如,
let {name1, age, gender} = person;
console.log(name1);//undefined
如果要为对象键分配不同的变量名,则可以使用:
const person = {
name: 'Sara',
age: 25,
gender: 'female'
}
// 解构赋值
// 使用不同的变量名
let { name: name1, age: age1, gender:gender1 } = person;
console.log(name1);//Sara
console.log(age1);//25
console.log(gender1);//female
您也可以以类似的方式执行数组解构。例如,
const arrValue = ['one', 'two', 'three'];
// 数组中的解构赋值
const [x, y, z] = arrValue;
console.log(x);//one
console.log(y);//two
console.log(z);//three
您可以在使用解构时为变量分配默认值。例如,
let arrValue = [10];
// 分配默认值 5 和 7
let [x = 5, y = 7] = arrValue;
console.log(x);//10
console.log(y);//7
在上面的程序中, arrValue 只有一个元素。因此,
在对象分解中,您可以通过类似的方式传递默认值。例如,
const person = {
name: 'Jack',
}
// 如果未定义,则将默认值 26 分配给age年龄
const { name, age = 26} = person;
console.log(name);//Jack
console.log(age);//26
在此示例中,使用解构赋值语法交换了两个变量。
// 交换变量的程序
let x = 4;
let y = 7;
// 交换变量
[x, y] = [y, x];
console.log(x);//7
console.log(y);//4
您可以跳过数组中不需要的项目,而无需将其分配给局部变量。例如,
const arrValue = ['one', 'two', 'three'];
// 数组中的解构赋值
const [x, , z] = arrValue;
console.log(x);//one
console.log(z);//three
在上述程序中,使用逗号分隔符,
省略了第二个元素。
您可以使用Spread语法将数组的其余元素分配给变量 ...
. 例如,
const arrValue = ['one', 'two', 'three', 'four'];
//数组中的解构赋值
//将剩余元素分配给 y
const [x, ...y] = arrValue;
console.log(x);//one
console.log(y);//["two", "three", "four"]
在此,将一个
分配给 x 变量。并将其余的数组元素分配给 y 变量。
您还可以将其余的对象属性分配给单个变量。 例如,
const person = {
name: 'Sara',
age: 25,
gender: 'female'
}
//解构赋值
// 将剩余属性分配给 rest
let { name, ...rest } = person;
console.log(name);//Sara
console.log(rest);//{age: 25, gender: "female"}
注意:具有Spread语法的变量不能带有逗号 .
。您应该使用此rest元素作为最后一个变量。
例如,
const arrValue = ['one', 'two', 'three', 'four'];
// throws an error
const [ ...x, y] = arrValue;
console.log(x);//eror
您可以对数组元素执行嵌套解构。例如,
// 嵌套数组元素
const arrValue = ['one', ['two', 'three']];
// 数组中的嵌套解构赋值
const [x, [y, z]] = arrValue;
console.log(x);//one
console.log(y);//two
console.log(z);//three
在这里,变量 y 和 z 被分配了嵌套元素 two
和 3
。
为了执行嵌套的解构分配,您必须将变量包含在数组结构中(通过包含在 []
内部)。
您还可以对对象属性执行嵌套解构。 例如,
const person = {
name: 'Jack',
age: 26,
hobbies: {
read: true,
playGame: true
}
}
// nested destructuring
const {name, hobbies: {read, playGame}} = person;
console.log(name);//Jack
console.log(read);//true
console.log(playGame);//true
为了执行对象的嵌套解构分配,您必须将变量包含在对象结构中(通过包含在 {}
内部)。
注意: ES6 中引入了销毁分配函数。某些浏览器可能不支持使用解构分配。访问 Javascript Destructuring支持以了解更多信息。
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)
Tony Bai · Go语言第一课 -〔Tony Bai〕