Lodash中10个可被ES6替代的特性

原文链接
1. Map, Filter, Reduce
 搭配arrow箭头函数使用

_.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, 2]

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

2. Head & Tail
 利用ES6中数组解构获取list中的头和尾部

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

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

同样可以得到初始元素和最后一个元素的值

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

// ES6写法。数组解构和数组reverse反转
const [last, ...initial] = [1, 2, 3].reverse();
//得到initial -> [2, 1]; last -> 3

在reverse反转数组前，利用Spread展开操作符来克隆数组

// ES6写法。同样得到上段代码的效果
const xs = [1, 2, 3];
const [last, ...initial] = [...xs].reverse();

3. Rest & Spread
 ES6中的Rest和Spread允许我们定义和调用接受一个可变数量的参数的函数。

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(names);
});

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

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

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

4. Curry柯里化
 函数柯里化是指，把接受多个参数的函数转换成接受一个单一参数的函数

function add(a, b) {
  return a + b;
}
var curriedAdd = _.curry(add);
var add2 = curriedAdd(2);
add2(1);
// 3

// ES6写法
const add = a => b => a + b;
const add2 = add(2);
add2(1);
// 3

5. Partial
 分步输入实参

var greet = function(greeting, name) {
  return greeting + ' ' + name;
};

var sayHelloTo = _.partial(greet, 'hello');
sayHelloTo('fred');
// "hello fred"

// ES6写法
const sayHelloTo = name => greet('hello', name);
sayHelloTo('fred');
// "hello fred"

利用reset操作符，分步输入更多实参

const sayHelloTo = (name, ...args) => greet('hello', name, ...args);
sayHelloTo('fred', 1, 2, 3);
// "hello fred"

6. Operators
 更多可替代操作符

_.eq(3, 3);
// true
_.add(10, 1);
// 11
_.map([1, 2, 3], function(n) {
  return _.multiply(n, 10);
});
// [10, 20, 30]
_.reduce([1, 2, 3], _.add);
// 6

// ES6写法
3 === 3
10 + 1
[1, 2, 3].map(n => n * 10);
[1, 2, 3].reduce((total, n) => total + n);

7. Paths
 返回Object对象中对应的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']

// ES6写法
[
  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']));

8. Pick
 挑选对象某些属性

var object = { 'a': 1, 'b': '2', 'c': 3 };
return _.pick(object, ['a', 'c']);
// { a: 1, c: 3 }

// ES6写法
const { a, c } = { a: 1, b: 2, c: 3 };
return { a, c };

9. Constant, Identity, Noop

_.constant({ 'a': 1 })();
// { a: 1 }
_.identity({ user: 'fred' });
// { user: 'fred' }
_.noop();
// undefined

内部使用arrow箭头定义上述函数

const constant = x => () => x;
const identity = x => x;
const noop = () => undefined;

也可以写成如下

(() => ({ a: 1 }))();
// { a: 1 }
(x => x)({ user: 'fred' });
// { user: 'fred' }
(() => undefined)();
// undefined

10. Chaining & Flow
 lodash中链式写法替代

_([1, 2, 3])
 .tap(function(array) {
   // Mutate input array.
   array.pop();
 })
 .reverse()
 .value();
// [2, 1]

// ES6写法
const pipeline = [
  array => { 
      array.pop(); 
  },
  array => array.reverse()
];

pipeline.reduce( (xs, f) => f(xs), [1, 2, 3]);