js中的解构赋值

手机

光庭信息跌4.57% 2021上市超募11亿2022扣非降74% 时快讯

搜狐汽车全球快讯 | 大众汽车最新专利曝光：仪表支持拆卸可用手机、平板替代-环球关注

家电

js中的解构赋值

2023-06-30 11:57:03 来源：博客园

【资料图】

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"

本节重点

数组的解构赋值
对象的解构赋值

关键词：