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