点差运算符的6大用途

发布于:2021-02-17 00:00:17

0

99

0

运算符 点差运算符 JavaScript Babel

得益于ES6和Babel等工具,从新语言语法到自定义解析(如JSX),JavaScript的编写已变得异常动态。我已经成为传播运算符的忠实拥护者,三个点可能会改变您在JavaScript中完成任务的方式。以下是我在JavaScript中最喜欢使用传播运算符的列表!

调用函数而不应用

至此,我们已经调用 Function.prototype.apply,传递了一个参数数组,以调用具有数组持有的一组给定参数的函数:

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

// Call the function, passing args
doStuff.apply(null, args);

使用散布运算符,我们可以避免apply 全部合并,只需在数组之前使用散布运算符调用函数即可:

doStuff(...args);

代码更短,更干净,并且不需要使用无用的代码null!

合并阵列

一直有各种各样的方法来组合数组,但是散布运算符为组合数组提供了一种新方法:

arr1.push(...arr2) // Adds arr2 items to end of array
arr1.unshift(...arr2) //Adds arr2 items to beginning of array

如果要合并两个数组并将元素放置在数组中的任何位置,可以执行以下操作:

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

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

添加位置控制时,语法比其他方法短!

复制阵列

获取数组的副本是一项常见的任务,我们过去曾使用Array.prototype.slice来做,但现在我们可以使用spread运算符获取数组的副本:

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

请记住:数组中的对象仍然是引用,因此并不是所有内容都被“复制”。

将参数或NodeList转换为数组

与复制数组非常相似,我们曾经使用Array.Prototype.slice过将转换NodeList和arguments 对象以及真正的数组转换为数组的方法,但是现在我们可以使用spread运算符完成该任务:

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

您甚至可以从签名中以数组形式获取参数:

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

别忘了,您也可以使用Array.from!

使用Math 功能

当然,散布运算符会将数组“散布”为不同的参数,因此可以将接受任何数量的参数的函数使用以散布作为参数的任何函数。

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

该Math 对象的一组功能是传播运营商作为唯一的参数传递给函数的一个很好的例子。

销毁乐趣

销毁是一个有趣的实践,我在React项目以及其他Node.js应用程序中使用了大量的资源。您可以根据需要使用解构和rest运算符将信息提取到变量中:

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入门。无论如何,spread运算符是JavaScript中有用的功能,您应该意识到!