ES6解析赋值的应用-CSDN博客

ES6的新特性：解析赋值

解析赋值是es6引入的新特性，解析赋值拥有很强的灵活性。用的最多的莫过于

import { Component, createElement } from "react";
复制代码

类似的语句。解析赋值通常会在两个地方使用，一是对数组的解析赋值，二是对象的解析赋值。会写python的朋友一定不会对以下代码感觉熟悉

    [a, b] = [b, a]
复制代码

JavaScript利用解析赋值也能实现同样的效果，代码完全一样。本文注重对数组的解析赋值进行讲述，对于对象的解析赋值，和import语法一致，不做过多讲。首先，看下面一个例子

    [a, b] = [1, 2, 3]; //a = 1, b = 2;
    [a, ...b] = [1, 2, 3];// a = 1, b = [2, 3];
    [a, b] = [1, 2]; //a = 1,  b = 2;
    [a, ...b] = [1, 2]; //a = 1, b =[2]
    [a, b] = [1]; //a = 1, b = undefined
    [a, ...b] = [1]; // a = 1, b = [];
    [a, b] = []; //a = b =undefined;
    [a, ...b] = []; // a = undefined, b = []
复制代码

上面几行代码基本上就能说明js的解析赋值的特性了，...b操作符意思是把剩下的封装成一个数组赋值给b。因此你可以看见，...b都是一个数组，哪怕它是空的。但是a就不一样，因为当右边数组是空的时候，a是无法获得值的，因此a在解析失败的时候，会是undefined。注意[a, b] = []这行代码，这就很好理解为什么两个都是undefined了。

它能做什么？

解析赋值是很强大的一个特性，这里列举两个例子抛砖引玉。

example 1，交换两个变量

let a = 100, b = 200;
[a, b] = [b, a];
复制代码

由于JavaScript是动态语言，因此，a b可以是任何类型的,不单单是数字。

example 2：快速排序

这个例子可谓是解析赋值的最经典的例子，以前我们实现快速排序，要么是直接利用Array.prototype.sort，要么就是自己封装一个快速排序的函数。借助解析赋值特性，我们可以更加精简的实现快速排序。话不多说，直接上代码

    const qsort = ([m, ...xs]) => m == undefined ? [] : [
        ...qsort(xs.filter(a => a <= m)),
        m,
        ...qsort(xs.filter(a => a > m))
    ];
    
    qsort([5, 6, 9, 8, 7, 4, 3, 1, 2]); // [1, 2, 3, 4, 5, 6, 7, 8, 9];
复制代码

这个例子默认是从小到大的排序，如果要从大到小，只需要修改其中的比较条件即可。怎么样，很简洁吧？这个例子用到了其他的新特性，比如箭头函数.箭头函数本身比较简单，为了内容的完整性，做一个简单的介绍。

箭头函数和以前的function() {}匿名函数其实很相似，两者的区别在于：

箭头函数书写起来更简便，不用自己写return。比如let fn = xs => xs.filter(a => a < 10)，这段代码中，xs为一个数组，它的功能是返回xs中小于10的数字。只需要这样调用即可fn([1, 2, 3, 10, 11, 12])。默认情况下，如果函数代码不用{}包围，那么直接返回函数本体运行后的值，比如这段代码直接返回xs.filter(a => a < 10)的执行效果，filter里面的函数也是一个解释原因。参数只有一个的时候，可以省略掉括号，比如上面的xs和a。
箭头函数默认的作域（也就是函数本体里面的this变量）是当前箭头函数所声明的地方的作用域变量。并且call和apply对匿名函数是没有作用的（第一参数没用，后面的参数有效）。

写在最后

es6的新特性在chrome firefox nodejs中支持已经比较完善了，但是还是有部分浏览器无法执行，比如腾讯自家的某某浏览器内核和微软的某某浏览器，因此你需要使用babel进行转码。详细的操作在这里不给出。另外我推荐各位前端开发人员，尽可能地使用es6的新特性来进行编码，新的技术应该得到更多的应用。比如Promise async/await fetch之类的全新的特性，这些特性将带给你不一样的体验。