ES6展开运算符的常见用法

随着 ES6 的出现,编写 JavaScript 变得越来越灵活。新的语法让代码更简洁,可读性更高。ES6 新增了很多特性,扩展运算符就是其中一个。简单的三个点号,让原本繁琐的代码瞬间变得简洁、优雅。那么,就让我们看看它有哪些常见用法吧。

让函数的 Apply 调用方式成为过去

有时候我们需要通过 Function.prototype.apply 来调用函数,参数就放在一个数组里。

function doStuff (x, y, z) { }
var args = [0, 1, 2];

// 调用函数并传参
doStuff.apply(null, args);

现在有了展开运算符,我们可以完全避免使用 apply,只需在调用函数时在数组前加上展开运算符:

doStuff(...args);

代码变得更短、更简洁,也不需要一个毫无用处的 null

合并数组

合并数组有各种方式,但是展开运算符为我们提供了一种新思路:

arr1.push(...arr2) // 在数组后面添加 arr2 里的元素
arr1.unshift(...arr2) //在数组前面添加 arr2 里的元素

如果你想合并两个数组,并且想把元素放到数组中的任何位置,你可以这么做:

var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];

// ["one", "two", "three", "four", "five"]

代码少了很多,还可以随意控制位置!

拷贝数组

拷贝数组是个常见的任务,过去我们使用 Array.prototype.slice
来完成,但现在我们可以通过展开运算符得到数组的副本:

var arr = [1,2,3];
var arr2 = [...arr]; // 等同于 arr.slice()
arr2.push(4)

这里要注意,数组里的对象仍然是引用类型的,因此实际上并不是所有内容都被“拷贝”了。

将参数或 NodeList 转成数组

跟拷贝数组类似,我们用 Array.Prototype.sliceNodeListarguments 对象转成真正的数组,但是现在我们可以使用展开运算符完成这个任务:

[...document.querySelectorAll('div')]

你甚至可以从函数签名里得到数组形式的参数:

var myFn = function(...args) {
// ...
}

Array.from也可以做同样的事情。

使用 Math对象里的相关函数

在参数个数不确定的函数里使用展开运算符,再合适不过了。

let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

对象解构

解构操作在变量批量赋值上非常方便,省去了繁琐的声明和赋值操作。配合使用展开运算符,进一步简化操作:

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

ES6 不仅让 JavaScript 的开发效率更高,写代码也成了一种享受。现代浏览器都支持新的 ES6 语法,所以如果你还没玩过的话,确实值得一试。

本文介绍了展开运算符的几种常见用法,如果你有什么更好的例子,欢迎补充!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,519评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,842评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,544评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,742评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,646评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,027评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,513评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,169评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,324评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,268评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,299评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,996评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,591评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,667评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,911评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,288评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,871评论 2 341

推荐阅读更多精彩内容