【ES6】解构赋值(整理篇)

前言

上一篇文章整理的变量声明一块的,这一篇将对解构赋值一块的。数组

解构的概念

ES6规定了一种变量赋值的模式,从数组和对象中提取变量的值的方式,称为解构。函数

解构的基本用法

  • 左边数量等于右边数量的状况
let [a, b, c] = [1, 2, 3];
a; // 1
b; // 2
c; // 3
复制代码

这种状况应该是最好理解的,从数组中提取值,按照对应位置,对变量赋值。ui

  • 左边数量大于右边数量的状况
let [bar, foo] = [1];
bar // 1
foo //undefined
复制代码

若是出现这样的状况,属于解构不成功。那么不成功的部分,将被赋值为undefined。google

  • 左边数量小于右边数量的状况
let [x, y] = [1, 2, 3];
x // 1
y // 2
复制代码

这种状况叫不彻底解构。解构操做依然能够成功。也是提取对应位置上的值。spa

默认值的用法

由于在实际业务中,总不可能右边的数组长度不发生变化,可是你又但愿解构出来不是一个undefined的话。就能够给那个值添加默认值code

let [x = 1, y] = [];  // 1 undefined
let [x = 1, y] = [2, 3] // 2 3
复制代码

固然,默认值也能够用变量来代替,可是代替的变量必定要申明且赋值的。对象

let [x = 1, y = x] = [];  // 1 1
let [x = 1, y = x] = [2]; // 2 2
let [x = 1, y = x] = [1, 2]; // 1 2
let [x = y, y = 1] = []; // 报错
复制代码

对象的解构

上面的基本用法,咱们只拿数组举例了,其实对象也是能够用解构的。继承

let {bar, foo} = {bar: 'bar'} // bar undefined
复制代码

对象解构是按照键值匹配,而数组解构是按照位置匹配。其余不少特性和数组同样。字符串

对象解构能够取到继承的属性

const obj1 = {};
const obj2 = { x: '1' };
Object.setPrototypeOf(obj1, obj2);

let {x} = obj1  // 1
复制代码

obj1自己并不包含x属性,其属性是在它原型上的。因此对象的解构,能够从继承的原型上面取到值。原型

默认值

对于默认值这一块,想强调一点对象属性必须严格等于undefined,才会出发默认值

let {x = 1} = {x: undefined} // 1
let {y = 1} = {y: null} // null
复制代码

上述例子中,null是不等于undefined,因此并不会触发默认值条件。

对象解构中的注意点

  • 已经申明的变量用于解构赋值
// 错误的用法
let x;
{x} = {x: 1};  //报错
复制代码

这种状况会发生报错,报错是由于js将{x}理解成了代码块,从而发生了语法错误。 如何解决呢?只要不讲{写在开始位置。

// 正确用法
let x;
({x} = {x: 1});
复制代码
  • 对数组进行对象解构

在js中数组就是一种特殊的对象。因此,咱们也能够对一个数组,进行对象的解构。举个例子:

let arr = [1, 2, 3];
let {0: first, 1: second, 2: third} = arr; // 1 2 3
复制代码

其余类型的赋值解构

字符串的赋值解构

当字符串被解构时,会将字符串处理成类数组对象。

let [a, b, c, d] = '12345'
a // 1
b // 2
c // 3
d // 4
复制代码

数组和布尔值的解构

这一块极少用到,想了解的能够本身google搜索。

函数参数的解构

这一块在业务中用到的是最多的。函数参数不少时,没有办法作到一一对应,那么解构即是一种很好的途径。

function add({a, b, c, d, e}) {
    return a + b + c + d + e;
}
add({a: 1, c: 3, b: 2, d: 4, e: 5}); // 15
复制代码

并不须要在意参数的前后顺序,只须要参数的名字一一对应,并且还能给参数设定默认值。

解构的其余用途

交换变量值

之前交换变量值,须要第三个中间变量来帮忙,可是有了解构以后就很简单了。

let x = 1;
let y = 2;

[x, y] = [y, x];
复制代码

加载模块时

import {x, y} from 'xxx';
复制代码

这里也是用到了解构,可让你引入的部分更加明确。

总结

解构其实仍是有迹可循的,须要掌握还得花点时间。下一篇文章将会整理Symbol相关的知识点。

相关文章
相关标签/搜索