首页 > 编程笔记

JS解构赋值(对象解构赋值+数组解构赋值)

在 ES 5 中,如果需要从某个对象或者数组中提取需要的数据赋给变量,可以采用如下方式:
let goods = {
    name:"苹果",
    city:"烟台",
    price:"烟台"
}
//提取对象中的数据赋给变量
let name = goods.name;
let city = goods.city;
let price = goods.price;
//提取数组中的数据赋给变量
let arr = [100,200,300,400];
let a1 = arr[0], a2 = arr[1], a3 = arr[2], a4 = arr[3];
在 ES 6 中,通过使用解构赋值的功能,可以从对象和数组中提取数值,并对变量进行赋值。

1. JS 对象解构赋值

对象解构的方法是在一个赋值操作符的左边放置一个对象字面量。
let {name,city,price} = goods;
如果变量已经声明了,之后想要用解构语法给变量赋值,则需要把整个解构赋值语句放到一个圆括号中。
({name,city,price} = goods);

2. JS 数组解构赋值

因为没有对象属性名的问题,所以数组解构相对比较简单,使用方括号即可。
let arr = [100,200,300,400];
let [a1,a2,a3,a4] = arr;
由于变量值是根据数组中元素的顺序进行选取的,因此,如果需要获取指定位置的元素值,可以只为该位置的元素提供变量名。
let arr = [100,200,300,400];
//获取第4个位置的元素
let [,,,a4] = arr;
console.log(a4);    //输出400
和对象解构不同,如果为已经声明过的变量进行数组解构赋值,不需要把整个解构赋值语句放到一个圆括号中。
let arr = [100,200,300,400];
let a1,a2,a3,a4;
[a1,a2,a3,a4] = arr;

推荐阅读