博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES6解析赋值的应用
阅读量:6529 次
发布时间:2019-06-24

本文共 1961 字,大约阅读时间需要 6 分钟。

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() {}匿名函数其实很相似,两者的区别在于:
  1. 箭头函数书写起来更简便,不用自己写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里面的函数也是一个解释原因。参数只有一个的时候,可以省略掉括号,比如上面的xsa
  2. 箭头函数默认的作域(也就是函数本体里面的this变量)是当前箭头函数所声明的地方的作用域变量。并且callapply对匿名函数是没有作用的(第一参数没用,后面的参数有效)。

写在最后

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

转载地址:http://pzxbo.baihongyu.com/

你可能感兴趣的文章
2929: [Poi1999]洞穴攀行
查看>>
关于map 及 map 骚操作
查看>>
eclipse core expression usage
查看>>
用于A*的 二叉堆 AS3实现
查看>>
读书 --- 老码识途
查看>>
php上传文件后无法移动到指定目录的解决
查看>>
Facebook投资者Peter Thiel—一个不折不扣的“魔戒”迷
查看>>
linux和Windows下安装ruby
查看>>
【汇编】汇编程序入门篇
查看>>
C程序设计导引(4)
查看>>
定时任务-SQL Server代理 作业
查看>>
Java飞跃
查看>>
bzoj 4008 亚瑟王 期望概率dp
查看>>
xcode7 打开工程错误 This Document requires xcode8.0 or later.
查看>>
SPI驱动框架-1(DM8127 Linux2.6.37为例)
查看>>
Python之面向对象
查看>>
[Angular Tutorial] 13 -REST and Custom Services
查看>>
Deinstall卸载RAC之Oracle软件及数据库+GI集群软件
查看>>
android开发学习 ------- 【转】Gradle相关
查看>>
Which internship is better for a CS major, Facebook or Google? (From Quora)
查看>>