JavaScript ES6扩展运算符(...)用例

ES6新增了扩展运算符,它的语法很简单,使用三个点号表示“...”。它的作用是把数组展开为类似用逗号隔开的参数列表。

这里介绍几种用例来理解扩展运算符的使用。

用例1:插入数组

如果我们要在一个数组插入另外一个数组的元素,可以结合splice和apply使用,如:

a1 = [1,2,5,6,7];
a2 = [3,4];
a1.splice.apply(a1, [2, 0].concat(a2));

使用扩展运算符就可以很简单地把数组展开为参数列表,上面的例子为:

a1 = [1,2,5,6,7];
a2 = [3,4];
a1.splice(2, 0, ...a2);

对于数组字面插入也很简单

a2 = [3,4];
a1 = [1,2,...a2,5,6,7];
console.log(a1);// 输出为[1,2,3,4,5,6,7]

...a2会就地展开为以逗号隔开的元素列表。

用例2:Math

使用Math.max()函数来获取最大值的用法是:

const m = Math.max(1, 2, 3); //结果为3

但如果要计算数组里的最大值,显然数组是不能直接作为Math.max()的参数,我们需要把它展开。在ES6之前,我们也是需要结合apply来处理:

var arr = [2, 4, 8, 6, 0];

function max(arr) {
 return Math.max.apply(null, arr);
}

console.log(max(arr));

ES6使用扩展运算符(...)就很简单就可以展开,上面的例子变为:

var arr = [2, 4, 8, 6, 0];
console.log(Math.max(...arr));

用例3:复制数组

在ES6之前,是不能直接通过赋值的方式复制数组的。

var arr = ['a', 'b', 'c'];
var arr2 = arr;

arr2.push('d');

console.log(arr);//输出['a','b','c','d']

直接赋值的方式,实际上引用的是同一个数组,当任何一个数组里面的元素发生变化,两个数组都会同时改变。

ES6使用扩展运算符

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];

arr2.push('d');

console.log(arr);//输出['a','b','c']

虽然arr2添加了元素'd',但是对数组arr来说,它的元素列表是没有发生改变的。这样就很简单实现了复制的功能。

用例4:字符串转为字符数组

ES6的扩展语法可以很简单的把一个字符串分割为单独字符的数组:

var str = "hello";
var chars = [...str];

console.log(chars);

参考:https://codeburst.io/javascript-es6-the-spread-syntax-f5c35525f754

版权声明:著作权归作者所有。

相关推荐

ES6 函数使用解构赋值(Destructuring )的几点好处

解构赋值(Destructuring )是ES6新增的特性。使用解构赋值有以下几点好处:命名参数设置默认参数多个返回值命名参数在传统的函数定义如下:function findUsersByRole (   role,    withContactInfo,    includeInactive )&

JavaScript(ES6)判断字符串是否包含子字符串的方法

ES6 includesES6的字符串新增了includes方法,我们可以用它来判断是否包含子字符串。str.includes(searchString[, position]) searchString:查询的子字符串position:可选,开始搜索的位置,默认为0'Blue Whale'.includes('Blue'); // returns

JavaScript ES 2017: 通过示例学习Async/Await

预备知识ES 2017新增了Asynchronous函数。 在JavaScript中,Async函数本质上是一种处理异步代码的比较简洁的方法。 为了理解这些是什么,以及它们是如何工作的,我们首先需要了解Promise。如果你不知道Promise是什么,那么你应该先阅读我发表的关于Promise的这篇文章。 在理解Promise之前,你是不会理解JavaScr