『翻譯』擴展運算符的6個重要用途

Read the original

前言

因爲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中一個很是有用的特性，你應該已經清楚的意識到了！

喜歡本文的朋友能夠關注個人微信公衆號，不按期推送一些好文。

本文由Rockjins Blog翻譯，轉載請與譯者聯繫。不然將追究法律責任。