JavaScript的解构赋值语句是一种方便的语法,用于从数组或对象中提取值,并将它们赋给变量。它可以让你以一种简洁的方式从复杂的数据结构中提取数据。
数组的解构赋值
例如,假设有一个数组[1, 2, 3],你可以使用解构赋值语句将数组中的值分别赋给变量:
const [a, b, c] = [1, 2, 3]; console.log(a); // 输出: 1 console.log(b); // 输出: 2 console.log(c); // 输出: 3
通过数组的解构赋值,可以实现变量的数据交换:
var n1 = 10; var n2 = 20; [n1,n2]=[n2,n1]; console.log(n1,n2) //输出:20,10
多维数组的解构赋值:
[n1,n2,[n3,n4]] = [12,33,[16]]; console.log(n1,n2,n3,n4); //输出:12,33,16,undefined
需要注意的是多维数组的解构赋值,赋值号两边数组的层级要对应,否则就会出错。
对象的解构赋值
你也可以使用解构赋值语句从对象中提取值:
const person = { name: 'John', age: 30, city: 'New York' }; const { name:name, age:age, city:address } = person; console.log(name); // 输出: 'John' console.log(age); // 输出: 30 console.log(address); // 输出: 'New York'
请注意对象解构赋值的实质是,当赋值号两边对象的key一致的情况下,对对象的value进行赋值。当左边对象的key和value一致的情况直接写出key就可以了:
const person = { name: 'John', age: 30, city: 'New York' }; const { name, age, city:address } = person; console.log(name); // 输出: 'John' console.log(age); // 输出: 30 console.log(address); // 输出: 'New York'
本节重点
- 数组的解构赋值
- 对象的解构赋值