您可以用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中文网其他相关文章！