es6 实现 lodash的一些功能

现如今随着 ECMAScript 标准的不断更新，很多 lodash 提供的方法其实用原生的 JavaScript 就可以实现了，今天小编就来列举一些 lodash 中常用的方法是如何使用原生的 JavaScript 来实现的（主要覆盖 ES5 + ES6 的特性 , 其中代码例子来自：https://www.sitepoint.com/lodash-features-replace-es6/）。

_.map

Map 方法就是基于一个数组根据一定的规则转化为另外一个数组，来个 lodash 的例子

_.map([1, 2, 3], function(n) { return n * 3; });
// [3,6,9]

原生的话就可以结合数组的 Map 方法和箭头函数来实现

[1, 2, 3].map(n => n * 3);

_.reduce

reduce 就是将数组中每一个元素经过一个指定的累加器从而产生一个全新的元素，来看 lodash 的例子

_.reduce([1, 2, 3], function(total, n) { return total + n; }, 0);
// 6

上述就是一个数组元素求和的作用，原生的话也可以直接使用数组的 reduce 和箭头函数来实现

[1, 2, 3].reduce((total, n) => total + n);

当然了，_.reduceRight 一样也可以用原生的实现，这里就不赘述了。

此类数据上的方法还有 _.filter、_.some、_.find 以及 _.every 等等都可以用原生的来实现。

_.head 和 _.tail

_.head 这个方法的作用就是找到数组的第一个元素，而 tail 的作用就是找到除了第一个元素之外所有剩下的元素，像这样：

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

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

这两个方法可以用「解构赋值」语法来实现

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

_.rest

这个方法其实主要目的就是自动将函数的多个参数变成一个数组，比如像这个例子：

var say = _.rest(function(what, names) {
  var last = _.last(names);
  var initial = _.initial(names);
  var finalSeparator = (_.size(names) > 1 ? ' & ' : '');
  return what + ' ' + initial.join(', ') +
    finalSeparator + last;
});

say('hello', 'fred', 'barney', 'pebbles');
// "hello fred, barney & pebbles"

上述例子很简单，其中 names 数组就将 say 函数中后面三个参数变成了一个数组，而这个可以很容易的通过原生来实现，就像这样：

扫描二维码关注公众号，回复： 1464683 查看本文章

const say = (what, ...names) => {
  const [last, ...initial] = names.reverse();
  initial.reverse();
  const finalSeparator = (names.length > 1 ? ' &' : '');
  return `${what} ${initial.join(', ')} ${finalSeparator} ${last}`;
};

say('hello', 'fred', 'barney', 'pebbles');
// "hello fred, barney & pebbles"

Paths

在 lodash 中有大量支持使用 path 的方法，比如 _.at，就是创建一个包含对象中指定 path 的值的数组，来看个例子：

var object = { 'a': [{ 'b': { 'c': 3 } }, 4] };

_.at(object, ['a[0].b.c', 'a[1]']);
// [3, 4]
_.at(['a', 'b', 'c'], 0, 2);
// ['a', 'c']

原生的写法如下：

[
  obj => obj.a[0].b.c,
  obj => obj.a[1]
].map(path => path(object));

[
  arr => arr[0],
  arr => arr[2]
].map(path => path(['a', 'b', 'c']));

_.pick

_pick 方法作用是可以对一个对象进行「挑选」，只获取指定的部分，比如像这样：

var object = { 'a': 1, 'b': '2', 'c': 3 };

_.pick(object, ['a', 'c']);
// { a: 1, c: 3 }

原生的写法如下：

const { a, c } = { a: 1, b: 2, c: 3 };

以上就是一些比较实用的可以用原生的 JavaScript 代码来实现的 lodash 提供的方法，当然了，还有很多 lodash 提供的方法都可以用原生的方式来实现。小编之所以给大家分享这个，一方面是带着大家一起再熟悉下 ES6 中的一些特性，另外一方面也是提醒大家随着 ECMAScript 标准的不断更新，很多新特性被加进来，总有一天我们会不再需要 lodash 这样的库。