阅读 3248

深入的理解数组和对象的解构赋值。

es6提供了一个非常好的特性,即变量的解构赋值。从而我们可以方便的从数组和对象中提取数据并将它们赋值给变量。这是非常必要的。先来看在这个新特性发布之前我们是如何从数组中提取数据的。如下:

let nums = [1,2,3,4,5];
let num1 = nums[0];
let num2 = nums[1];

console.log(num1); // logs 1
console.log(num2); // logs 2
复制代码

为了从 nums 数组中提取到数据,我们多次重复着相同的代码。es6的解构赋值将会让这个操作变得非常的容易且易于理解。

数组的解构赋值

从数组中取值并按照对应位置对变量进行赋值。如下:

 let [num1,num2,num3] = [1,2,3];
 console.log({num1},{num2},{num3})
复制代码

“模式匹配”赋值

这属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。

let [num_s,nums,num_e] = [1,[2,3,4],5];
console.log(num_s) // logs 1
console.log(nums) // logs [2,3,4]
console.log(num_e) // logs 5
复制代码

用逗号跳过元素

let [num1,,,num4] = [1,2,3,4];
console.log(num1) // logs 1
console.log(num4) // logs 4

let [,num2,,num4] = [1,2,3,4];
console.log(num2) // logs 2
console.log(num4) // logs 4
复制代码

查看变量赋值左侧的数组。注意这里不是只有一个逗号,而是三个。逗号分隔符用于跳过数组中的值。所以如果你想要跳过数组中的一个项,只要用逗号就可以了。

数组中的其余部分的赋值

如果我们想将数组中的一些元素赋值给变量,而将数组中的其余元素存为一个数组赋值给指定的变量怎么办?在这种情况下,我们可以这样做:

let [num1,...nums] = [1,2,3,4];
console.log(num1) // logs 1
console.log(nums) // logs [2,3,4]
复制代码

应用这种方式,你可以轻松的把剩余的元素赋值给一个指定的变量。

解构失败,赋值undefined

let [num1] = [];
let [num2, num3] = [1];
console.log(num1) // logs undefined
console.log(num3) // logs undefined
复制代码

代码中的变量num1与变量num3 按照模式匹配原则,并没有对应的值与之匹配,故而返回undefined。而变量num2 按照模式匹配原则,被赋值为2。

函数的解构赋值

解构赋值还可以从函数返回的数组中提取数据。假设我们有一个返回数组的函数,如下例所示:

function getLists() {
    let lists = [1,2,3,4,5]
    return lists;
}
let [num1,...nums] = getLists();

console.log(num1); // logs 1
console.log(nums); // logs [2,3,4,5]
复制代码

使用默认值

数组的解构赋值可以给变量设定默认值,以防万一从数组中提取的值是 undefined(防止解构失败的情况)

let [name = "暂无姓名",sex = "女"] = ["April"];

console.log(name); // "April"
console.log(sex); // "女"
复制代码

代码中变量name 默认的值为 "暂无姓名" 但是按照左右模式匹配的原则,name 被赋值为 "April" ,因为变量sex并未匹配到值,所以它的值依旧是默认值"女"

注意点1:ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。

let [num1 = 1] = [undefined];
console.log(num1) // logs 1

let [num2 = 2] = [null];
console.log(num2) // logs null
复制代码

代码中,因为null不严格等于undefined,默认值就不会生效。故而输出了 null

注意点2:如果默认值是函数,这个函数就会非常的懒,即只有在用到的时候,才会执行函数。

 function getLists(){
    let lists = [1,2,3,4,5]
    return lists; 
 }
let [lists = getLists()] = [1];
console.log(lists) // logs 1
// 因为变量 lists 可以匹配到值,所以函数 getLists() 并不会执行。

 function getLists(){
    let lists = [1,2,3,4,5]
    return lists; 
 }
let [lists = getLists()] = [];
console.log(lists) // logs [1,2,3,4,5]
// 因为变量 lists 无法匹配到值,函数 getLists() 就会执行。故而返回数据 [1,2,3,4,5]
复制代码

注意点3:默认值可以引用解构赋值的其他变量,但该变量必须已经声明。

let [x = 1, y = x] = [];     // logs x=1; y=1
let [x = 1, y = x] = [2];    // logs x=2; y=2
let [x = 1, y = x] = [1, 2]; // logs x=1; y=2
let [x = y, y = 1] = [];     //logs 这就要报错啦,因为x用y做默认值时,y还没有声明。
复制代码

交换变量

let num1 = 1;
let num2 = 2;

[num1,num2] = [num2,num1];

console.log({num1}); // logs 2
console.log({num2}); // logs 1
复制代码

对象的解构赋值

为什么要用对象的解构赋值呢??

 let profiles = {
    name:'April',
    nickname:"二十七刻",
    sign:"不以物喜,不以己悲。"
 }
           
let name = profiles.name;
let nickname = profiles.nickname;
let sign = profiles.sign;

console.log({name}) // "April"
console.log({nickname})// "二十七刻"
console.log({sign}) // "不以物喜,不以己悲。"
复制代码

假设我们要从对象profiles中获取数据并赋值给新变量。就得不断的重复着取值与赋值。代码冗长且不利于维护。利用对象的解构赋值,就不存在这一问题了。

同属性名赋值

对象的解构赋值变量必须与属性同名,才能取到正确的值。如下:

let profiles = {
     name:'April', 
     nickname:"二十七刻", 
     sign:"不以物喜,不以己悲。"
}
let {name,nickname,sign} = profiles;

console.log({name})    // logs "April"
console.log({nickname})// logs "二十七刻"
console.log({sign})    // logs "不以物喜,不以己悲。"
复制代码

解构失败,赋值undefined

let profiles = {
    name:'April',
    nickname:"二十七刻",
    sign:"不以物喜,不以己悲。"
}
let {name,sex} = profiles;

console.log(name) // logs "April"
console.log(sex) // logs undefined
复制代码

上面代码中,因为profiles对象没有 sex属性,所以变量sex取不到值,所以就赋值undefined

在赋值之前申明变量

在对象的解构赋值中,变量可以在赋值之前申明。如下:

let profiles = {
    name:'April',
    nickname:"二十七刻",
    sign:"不以物喜,不以己悲。"
}
let name,nickname,sign;
{name,nickname,sign} = profiles;

console.log(name) // logs Error : "Unexpected token ="
复制代码

嘿呀~报错了!为什么???

原因:因为忘记在{}外层写()了。

注意1 :当使用没有声明的对象字面量解构赋值时,必须使用()的赋值语句。因为 JavaScript 引擎会将{name,nickname,sign}理解成一个代码块,而不是对象字面量。

注意2 :使用此语法时,上一行代码一定要以;结束掉,否则的话会被当作函数,执行上一行的代码。

就是这个奇怪的语法 :({} = '');

正确的做法如下:

let profiles = {
    name:'April',
    nickname:"二十七刻",
    sign:"不以物喜,不以己悲。"
}
let name,nickname,sign;
({name,nickname,sign} = profiles);

console.log({name},{nickname},{sign})
// logs {name: "April"} {nickname: "二十七刻"} {sign: "不以物喜,不以己悲。"}
复制代码

使用新的变量名

如果我们想用新的变量名来替代对象的属性名怎么办呢?代码如下:

let profiles = {
    name:"April",
    age:"27"
}
let {name:userName,age:userAge} = profiles;

console.log(userName) // logs "April"
console.log(userAge) // logs "27"
复制代码

由此可知,对象的解构赋值其实就是let {name:name,age:age} = {name:"April",age:"27"}代码的简写。也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。

上面代码中,name是匹配的模式,userName才是变量。真正被赋值的是变量userName,而不是模式name

使用默认值

对象的解构赋值可以给变量设定默认值,以防万一从对象中获取的值是 undefined(防止解构失败的情况)需要注意的是:默认值生效的条件是,对象的属性值严格等于undefined

let staff = {name: "April", country: "China", job: "Developer"};
let {name = "暂无姓名", age = "暂无年龄"} = staff;

console.log({name}); // logs "April"
console.log({age}); // logs "暂无年龄"
复制代码

代码中变量name的默认值为“暂无姓名”,但是对象staff中有属性为name的字段,所以就被赋值April,而对象staff中并没有age这个属性,所以被赋值为"暂无年龄",取了它自己的默认值。

计算属性名称

计算属性名是另一个对象特性,也适用于对象的解构赋值。你可以通过一个表达式指定一个属性的名称,把它放在[]中,如下:

let staff = {name: "April", country: "China", job: "Developer"};
let prop = "name";
let {[prop]: name} = staff;

console.log({name}); // logs "April"
复制代码

对象中的其余部分的赋值

解构运算也可以被应运到解构赋值当中,来获取那些还没有被赋值的键值对,这些键值对都被放在一个新的对象里。如下:

let staff = {name: "April", country: "China", job: "Developer",nickname:"二十七刻"};
let {country,...infos} = staff;

console.log(country) //logs "China"
console.log(infos) // logs {name: "April", job: "Developer", nickname: "二十七刻"}
复制代码

嵌套对象的解构赋值

let staffs = {
    group1:[ { id:"007", name:"April"}]
}
let {group1,group1:[{id,name}]} = staffs;

console.log(group1) // logs [{ id:"007", name:"April"}]
console.log(id) // logs "007"
console.log(name) // logs "April"
复制代码

注意,代码中group1是模式,不是变量。如果想把group1也作为变量赋值,就要先进行定义再去赋值。

最后

数组和对象的解构赋值,本文就总结这么多。不足之处,万望指出。

文章分类
前端
文章标签