异或运算符的用途_点差运算符的6大用途

忘是亡心i 2023-02-22 01:26 3阅读 0赞

异或运算符的用途

Thanks to ES6 and the likes of Babel, writing JavaScript has become incredibly dynamic, from new language syntax to custom parsing like JSX.  I've become a big fan of the spread operator, three dots that may change the way you complete tasks within JavaScript.  The following is a listing of my favorite uses of the spread operator within JavaScript!

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

## 调用函数而不应用 **(**Calling Functions without Apply**)** ##

To this point we've called `Function.prototype.apply`, passing an array of arguments, to call a function with a given set of parameters held by an array:

至此，我们已经调用了`Function.prototype.apply` ，并传递了一个参数数组，以使用数组持有的一组给定参数调用函数：

function doStuff (x, y, z) { }
    var args = [0, 1, 2];
    
    // Call the function, passing args
    doStuff.apply(null, args);

With the spread operator we can avoid `apply` all together and simply call the function with the spread operator before the array:

使用散布运算符，我们可以避免全部`apply`在一起，而只需在数组之前使用散布运算符调用函数即可：

doStuff(...args);

The code is shorter, cleaner, and no need to use a useless `null`!

代码更短，更简洁，并且无需使用无用的`null` ！

## 合并阵列 **(**Combine Arrays**)** ##

There have always been a [variety of ways to combine arrays][], but the spread operator gives use a new method for combining arrays:

一直有[各种各样的方法来组合数组][variety of ways to combine arrays] ，但是散布运算符为组合数组提供了一种新方法：

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

If you'd like to combine two arrays and place elements at any point within the array, you can do as follows:

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

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

Shorter syntax than other methods while adding positional control!

添加位置控制时，语法比其他方法短！

## 复制阵列 **(**Copying Arrays**)** ##

Getting a copy of an array is a frequent tasks, something  we've used [Array.prototype.slice][] to do in the past, but we can now use the spread operator to get a copy of an array:

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

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

Remember: objects within the array are still by reference, so not everything gets "copied", per se.

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

## 将参数或NodeList转换为数组 **(**Convert arguments or NodeList to Array**)** ##

Much like copying arrays, we've used `Array.Prototype.slice` to convert [`NodeList`][NodeList] and [`arguments`][arguments] objects and to true arrays, but now we can use the spread operator to complete that task:

就像复制数组一样，我们使用`Array.Prototype.slice`将[`NodeList`][NodeList]和[`arguments`][arguments]对象转换为真正的数组，但是现在我们可以使用spread运算符完成该任务：

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

You can even get the arguments as an array from within the signature:

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

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

Don't forget you can also do this with [`Array.from`][Array.from]!

别忘了，您也可以使用[`Array.from`][Array.from]做到这[`Array.from`][Array.from] ！

## 使用`Math`函数 **(**Using `Math` Functions**)** ##

Of course the spread operator "spreads" an array into different arguments, so any function where spread is used as the argument can be used by functions that can accept any number of arguments.

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

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

The `Math` object's set of functions are a perfect example of the spread operator as the only argument to a function.

`Math`对象的函数集是扩展运算符作为函数唯一参数的完美示例。

## 破坏乐趣 **(**Destructuring Fun**)** ##

Destructing is a fun practice that I'm using a ton of on my React projects, as well as other Node.js apps.  You can use destructuring and the rest operator together to extract the information into variables as you'd like them:

销毁是一种有趣的做法，我在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 }

The remaining properties are assigned to the variable after the spread operator!

其余属性将在扩展运算符之后分配给变量！

ES6 has not only made JavaScript more efficient but also more fun.  Modern browser all support the new ES6 syntax so if you haven't taken the time to play around, you definitely should.  If you prefer to experiment regardless of environment, be sure to check out my post [Getting Started with ES6][].  In any case, the spread operator is a useful feature in JavaScript that you should be aware of!

ES6不仅使JavaScript更加有效，而且更加有趣。 现代浏览器都支持新的ES6语法，因此，如果您没有花时间玩，肯定可以。 如果您不管环境如何都愿意尝试，请务必查看我的文章[ES6入门][Getting Started with ES6] 。 无论如何，spread运算符是JavaScript中有用的功能，您应该意识到！

> 翻译自: [https://davidwalsh.name/spread-operator][https_davidwalsh.name_spread-operator]

异或运算符的用途

[variety of ways to combine arrays]: https://davidwalsh.name/combining-js-arrays
[Array.prototype.slice]: https://davidwalsh.name/javascript-clone-array
[NodeList]: https://davidwalsh.name/nodelist-array
[arguments]: https://davidwalsh.name/arguments-array
[Array.from]: https://davidwalsh.name/array-from
[Getting Started with ES6]: https://davidwalsh.name/es2015-babel
[https_davidwalsh.name_spread-operator]: https://davidwalsh.name/spread-operator