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之类的全新的特性,这些特性将带给你不一样的体验。