《ECMAScript 6 入门》【二、变量的解构赋值】（持续更新中……）

亦凉 2021-08-13 19:12 203阅读 0赞

> 本系列是针对于阮一峰大佬的文章进行简化，更方便的让大家学习阅读

## 前言： ##

让我们看下es6的新语法**解构**，跟模式匹配类似。

## 一、数组的解构赋值 ##

举个例子给多个变量赋值的写法：

var a =1;
    var b =2;
    var c =3;

需要写多个变量特别麻烦，我们先使用以前的简化方法。

var a=1,b=2,c=3;

现在es6引入了解构，我们可以使用数组的解构赋值来更简便的进行赋值。

### 1、完全解构 ###

let [a,b,c]=[1,2,3];

可以从数组中提取值，按照对应位置，对变量赋值。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。  
接下来，我们再举几个例子：

// 1、一一对应
    let [,,v]=[,,1];
    console.log(v) // 1
    // 2、可以利用扩展符合并数组项
    let [a,...b]=[1,2,3];
    console.log(a) // 1
    console.log(b) //[2,3]
    // 3、如果左边不能一一对应右边的话，使用扩展符并且位置在末尾时，打印的为空数组，c没有对应，则是undefined;
    let [a,c,...b]=[1];
    console.log(a); // 1
    console.log(b); // []
    console.log(c); // undefined
    // 4、如果没有一一对应的情况下，扩展符在中间，就会出错 `let [a,...b,d,c]=[1];`这种情况也一样
    let [a,...b,c]=[1];
    // Uncaught SyntaxError: Rest element must be last element

如果解构不成功，变量的值就等于undefined。在第4种情况中，我们把`...b`的位置放在中间，就会出错，而放在末尾只是打印空数组。

我们再举几个实际用到的例子，比如说交换值。以前交换值必须再声明定义一个变量，就像这样。

var a = 10;
    var b = 20;
    var temp = a;
    a = b;
    b = temp;

看起来，比较绕而且代码长，现在我们使用了es6的解构，可以这样。

let a = 10;
    let b = 20;
    [a,b] = [b,a];

### 2、不完全结构 ###

接下来，我们来看下一个特殊的例子，叫做不完全解构。就是等号左边的模式，只匹配一部分的等号右边的数组

let [x, y] = [1, 2, 3];
    x // 1
    y // 2
    
    let [a, [b], d] = [1, [2, 3], 4];
    a // 1
    b // 2
    d // 4

### 3、默认值 ###

let [x, y = 'b'] = ['a', 'c'];
        console.log(y) // 'c'
        let [x, y = 'b'] = ['a'];
        console.log(y) // 'b'
        let [x, y = 'b'] = ['a', undefined];
        console.log(y) // 'b'

**总结：数组的元素是按次序排列的，变量的取值由它的位置决定。**

## 二、对象的解构赋值 ##

解构不仅可以用于数组，而且还可以用于对象。就像这样。

let {  a, b } = {  a: '1', b: '2' };
       console.log(a); // '1'
       console.log(b); // '2'

**对象的属性没有次序，变量必须与属性同名，才能取到正确的值。**  
否则会弹出 `undefined`

let {  a, c } = {  a: '1', b: '2' };
       console.log(c); // undefined

如果非得输出`c`的话，必须写成这样:

let {  a, b:c } = {  a: '1', b: '2' };
       console.log(c); // 2

这里模式匹配的是`b`，真正被赋值的是变量是`c`。

这里我们讲一下一个实用的例子，就是将现有对象的方法，赋值到某个变量。

// 数学对象中的几个方法
    let {  log, sin, cos } = Math;
    
    // 这里必须是log。不能是log1或者其他的变量，因为log是console的一个方法。
    const {  log } = console;
    log('hello') // hello

再讲一个例子。

// 获取到的数据
    let jsonData = { 
    id: 1,
    status: "OK",
    data: [1, 2]
    };
    
    let {  id, status, data: number } = jsonData;
    console.log(id, status, data); // 1，“OK”，[1,2]

对象的解构也可以指定默认值。

var { x: y = 3} = { x: 5};
    console.log(y) // 5
    var { x: y = 3} = { };
    console.log(y) // 3

## 三、字符串的解构赋值 ##

const [a, b, c, d, e] = 'hello';
    console.log(a); // "h"
    console.log(b); // "e"
    let { length : x} = 'hello'; // 我们可以使用字符串自带的length属性，来获取值。
    console.log(x) // 5

--------------------

## 结语： ##

最后，我们根据数组跟对象自身的特性讲一下两个实用的例子：  
**1、**

// 返回数组
    function example() { 
      return [1, 2, 3];
    }
    let [a, b, c] = example();
    
    // 返回对象
    
    function example() { 
      return { 
        foo: 1,
        bar: 2
      };
    }
    let {  foo, bar } = example();

**2、**

// 参数是一组有次序的值，利用数组的解构赋值。
    function f([x, y, z]) {  ... }
    f([1, 2, 3]);
    
    // 参数是一组无次序的值，利用对象的解构赋值。
    function f({ x, y, z}) {  ... }
    f({ z: 3, y: 2, x: 1});

> 谢谢浏览哦！欢迎浏览下一章。前端的路上我们一起努力