ES6展開運算子（擴充套件運算子）

跳一跳發表於2019-03-02
套件

原文連結

在ES6中，我們有了一個新的運算子–展開運算子，它可以使我們的程式碼的數量有一定的減少，有時候甚至有很有用的作用，我們來舉幾個常用的例子，同時通過例子來了解展開運算子的使用。

1.apply中的使用

當我們的函式有多個變數的時候（特別是當我們不知道變數的數量的時候），有時候會通過將變數儲存在陣列中，並通過call來執行函式，有了展開運算子後則有了更好的方式（畢竟使用call需要手動指定this，有時候會不是很方便很準確）

// 一般
function a(x, y, z) { }
var args = [0, 1, 2];
a.apply(null, args);

// 展開運算子
a(...args);
複製程式碼

除此之外還可以

// 需要傳入不定數量的引數，同時最後一個引數為需要指定的值
function b() {
  console.log(arguments.length);
  console.log(arguments[arguments.length -1]);
}
var args = [0, 1, 2];
b(...args, -2)
複製程式碼

總的來說，使多引數的函式呼叫有了新的方式, 而且避免的作用域的問題。

2.陣列中的使用

陣列的合併

var a = [1, 2];
var b = [0, ...a, 3]
複製程式碼

陣列的分割

var [a, ...b] = [0, 1, 2];
console.log(b) // [1, 2]
複製程式碼

陣列的拷貝

var a = [1, 2];
var b = [...a];
複製程式碼

3.物件中的使用
這裡的物件是指類似{a:1}這樣的物件，因為陣列，函式也是物件中的一種。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(z) // {a: 3, b: 4}
複製程式碼

這個在函式的引數中也有很好的用處

function test(...args) {
  console.log(args);
}

test(`wang`, `23`, `man`);
複製程式碼

可能會有人說arguments本身就可以啊，但是arguments本身並不是陣列，所以無法直接對arguments進行陣列操作。

類外，在Node中有很多的回撥函式都是以error為第一返回值，其實很多介面都是那麼設計的。那麼我們可以很方便的分離error和其他引數

request.get(`./demo`, (e, ...data) => {
  console.log(e);
  console.log(data);
})
複製程式碼

不過現在的ES6中還不支援在物件中使用擴充套件運算子，這個還在ES7的草案中，不過我們可以使用babel來處理。

最後寫一個例子吧，在github上有這個一個庫https://github.com/sindresorhus/pify用於將回撥的函式改為promise形式

const fs = require(`fs`);

const pify = function(fn) {
  return function(...args) {
		return new Promise((resolve) => {
			fn(...args, (...res) => {
				resolve(res);
			})
		})
	}
};

// fs.readFile
pify(fs.readFile)(`./package.json`, `utf8`).then(([err, data]) => {
	console.log(data);
})

// ajax
pify(request)(`http://demo.api.com`).then(([err, data]) => {
  console.log(data)
})

複製程式碼

相關文章