c语言扩展运算符是什么,扩展运算符的6个重要用途

前言

由于ES6和Babel的出现,编写JavaScript代码变得难以置信的灵活,从新的语法到自定的编译器,像JSX。我变成了扩展运算符(Spread Operator)的超级粉丝,三个点就改变你编写JavaScript代码的方式。接下来的清单,列出了我在JavaScript中最喜欢怎样使用扩展运算符!

1.不使用Apply去调用函数

这一点我们叫它Function.prototype.apply,传递一个参数数组,调用一个函数,并把数组中的每一项拆分成单个参数传递给函数:function doStuff (x, y, z) { }

var args = [0, 1, 2];

// 调用函数,传递参数

doStuff.apply(null, args);

通过扩展运算符我们可以避免使用apply,只需简单的调用函数,并在参数数组前加上扩展运算符:doStuff(…args);

这让代码更简短、清晰,而且不需要无用的null!

2.合并数组

一直以来,有很多方法合并数组,但是扩展运算符给了我们全新的方法去实现合并数组:arr1.push(…arr2) // 把arr2合并到arr1的后面

arr1.unshift(…arr2) //把arr2合并到arr1的前面

如果你想在数组内合并数组,你可以像下面这样做:var arr1 = ['two', 'three'];

var arr2 = ['one', …arr1, 'four', 'five'];

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

比其他方法的语法更简单,还增加了位置的控制!

3.复制数组

复制数组是我们常常要做的工作,在过去,我们会使用Array.prototype.slice去实现,但现在我们可以使用扩展运算符去得到一个复制后的数组:var arr = [1,2,3];

var arr2 = […arr]; // 就像 arr.slice()

arr2.push(4)

记住:数组仍通过指针得到,所以我们并没有复制数组本身,我们复制的只是一个新的指针。

4.把arguments或NodeList转为数组

和复制数组十分类似,我们以前使用Array.prototype.slice去把NodeList和arguments转换成真正的数组,但现在我们可以使用扩展运算符去完成这个工作:[…document.querySelectorAll('div')]

你还可以让arguments在传递时就变成一个数组:

var myFn = function(…args) {

//译者注:args等同于[…arguments]

}

别忘了,用Array.from也能达到效果。

5.使用Math函数

扩展运算符把数组”扩展”成一个个不同的参数是理所当然的,所以,可以在任何函数参数上进行扩展,而且它能接收任意多个参数:let numbers = [9, 4, 7, 1];

Math.min(…numbers); // 1

在Math对象的成员方法上使用扩展运算符是一个完美的例子,而且只需要传递一个参数。

6.有趣的结构赋值

结构赋值是一个十分有趣的实践,我在自己的React项目中大量的使用了这种技巧,还有在其他的Node.js项目中。你可以使用扩展运算符配合其他运算符一起,从变量中提取有用的信息,就像这样: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语法,所以,如果你还没有花时间去了解并使用它,你清楚你该怎么做。如果你要开始使用ES6,一定要来看看我的这篇文章Getting Started with ES6。不管怎样,扩展运算符都是JavaScript中一个非常有用的特性,你应该已经清楚的意识到了!

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注