您可以用ES6替換的10個Lodash功能

Lodash目前是npm包中依賴最多的庫，但如果您使用ES6，則可能實際上並不需要它。本文將探討如何結合原生集合方法、箭頭函數和其他ES6新特性，來簡化許多常用場景的代碼。

核心要點

• Lodash目前是npm包中依賴最多的庫，但在某些情況下，使用ES6可以消除對它的需求。
• ES6特性，例如原生集合方法、箭頭函數、解構語法以及rest和spread運算符，可以替代Lodash的常用功能，例如map、filter、reduce、head & tail以及rest和spread。
• ES6還可以使用箭頭函數、rest參數和spread運算符來替代Lodash的curry、partial、運算符、路徑、pick、constant、identity、noop以及鏈式調用等功能。
• 儘管Lodash仍然是一個非常有價值的庫，但JavaScript的演進版本（ES6）為解決以前由Lodash等實用程序模塊處理的問題提供了新的方法。

1. Map、Filter、Reduce

這些集合方法使數據轉換變得輕而易舉，並且幾乎得到了普遍的支持。我們可以將它們與箭頭函數結合使用，從而編寫出簡潔的代碼，替代Lodash提供的實現：

// Lodash
_.map([1, 2, 3], function(n) { return n * 3; });
// [3, 6, 9]
_.reduce([1, 2, 3], function(total, n) { return total + n; }, 0);
// 6
_.filter([1, 2, 3], function(n) { return n % 2; });
// [1, 3]

// ES6
[1, 2, 3].map(n => n * 3);
[1, 2, 3].reduce((total, n) => total + n, 0);
[1, 2, 3].filter(n => n % 2);

這還不是全部。如果我們使用的是現代瀏覽器，還可以使用find、some、every和reduceRight。

2. Head & Tail

解構語法允許我們無需實用函數即可獲取列表的頭部和尾部：

// Lodash
_.head([1, 2, 3]);
// 1
_.tail([1, 2, 3]);
// [2, 3]

// ES6
const [head, ...tail] = [1, 2, 3];

也可以類似地獲取初始元素和最後一個元素：

// Lodash
_.initial([1, 2, 3]);
// -> [1, 2]
_.last([1, 2, 3]);
// 3

// ES6
const [last, ...initial] = [...[1, 2, 3]].reverse();

如果您覺得reverse會修改數據結構，可以使用spread運算符在調用reverse之前克隆數組：

3. Rest 和 Spread

rest和spread函數允許我們定義和調用接受可變數量參數的函數。 ES6為這兩種操作引入了專門的語法：

4. Curry

如果沒有像TypeScript或Flow這樣的高級語言，我們就無法為函數提供類型簽名，這使得currying變得相當困難。當我們接收到curried函數時，很難知道已經提供了多少個參數，以及接下來需要提供哪些參數。使用箭頭函數，我們可以顯式地定義curried函數，使它們更容易被其他程序員理解：

5. Partial

與currying一樣，我們可以使用箭頭函數使部分應用變得簡單明了：

6. Operators

Lodash包含許多函數，它們將語法運算符重新實現為函數，以便可以將它們傳遞給集合方法。在大多數情況下，箭頭函數使它們足夠簡單和簡短，我們可以內聯定義它們：

7. Paths

Lodash的許多函數都將路徑作為字符串或數組。我們可以使用箭頭函數創建更多可重用的路徑：

8. Pick

pick實用程序允許我們從目標對像中選擇所需的屬性。我們可以使用解構和簡寫對象字面量來實現相同的結果：

9. Constant、Identity、Noop

Lodash提供了一些實用程序，用於創建具有特定行為的簡單函數：

10. Chaining & Flow

Lodash提供了一些函數來幫助我們編寫鍊式語句。在許多情況下，內置的集合方法返回可以直接鍊式的數組實例，但在某些方法會修改集合的情況下，這是不可能的。但是，我們可以將相同的轉換定義為箭頭函數數組：

結論

Lodash仍然是一個很棒的庫，本文只是從一個新的角度來看待JavaScript的演進版本如何讓我們在以前依賴實用程序模塊的情況下解決一些問題。不要忽視它。相反，下次當你需要一個抽象時，考慮一下一個簡單的函數是否可以替代！

(FAQs部分略去，因為與代碼偽原創無關，且篇幅較長)

以上是您可以用ES6替換的10個Lodash功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！