你并不需要Underscore/Lodash

快来打我* 2021-07-05 00:01 380阅读 0赞

`Lodash` 和 `Underscore` 是非常优秀的当代`JavaScript`的工具集合框架，它们被前端开发者广泛地使用。但是，当我们现在是针对现代化浏览器进行开发时，很多时候我们利用的`Underscore`中的方法已经被`ES5`与`ES6`所支持了，如果我们希望我们的项目尽可能地减少依赖的话，我们可以根据目标浏览器来选择不用`Lodash`或者`Underscore`。

## Quick links ##

_.each
    
        _.map
    
        _.every
    
        _.some
    
        _.reduce
    
        _.reduceRight
    
        _.filter
    
        _.find
    
        _.findIndex
    
        _.indexOf
    
        _.lastIndexOf
    
        _.includes
    
        _.keys
    
        _.size
    
        _.isNaN
    
        _.reverse
    
        _.join
    
        _.toUpper
    
        _.toLower
    
        _.trim
    
        _.repeat
    
        _.after

### `_.each` ###

遍历一系列的元素，并且调用回调处理方程。  
Iterates over a list of elements, yielding each in turn to an iteratee function.

// Underscore/Lodash
    _.each([1, 2, 3], function(value, index) { 
      console.log(value);
    });
    // output: 1 2 3
    
    // Native
    [1, 2, 3].forEach(function(value, index) { 
      console.log(value);
    });
    // output: 1 2 3

Browser Support

✔ 1.5 ✔ 9 ✔ ✔ ✔

### `_.map` ###

将某个列表中的元素映射到新的列表中。

// Underscore/Lodash
    var array1 = [1, 2, 3];
    var array2 = _.map(array1, function(value, index) { 
      return value*2;
    });
    console.log(array2);
    // output: [2, 4, 6]
    
    // Native
    var array1 = [1, 2, 3];
    var array2 = array1.map(function(value, index) { 
      return value*2;
    });
    console.log(array2);
    // output: [2, 4, 6]

Browser Support

✔ 1.5 ✔ 9 ✔ ✔ ✔

### `_.every` ###

测试数组的所有元素是否都通过了指定函数的测试。

// Underscore/Lodash
    function isLargerThanTen(element, index, array) { 
      return element >=10;
    }
    var array = [10, 20, 30];
    var result = _.every(array, isLargerThanTen);
    console.log(result);
    // output: true
    
    // Native
    function isLargerThanTen(element, index, array) { 
      return element >=10;
    }
    
    var array = [10, 20, 30];
    var result = array.every(isLargerThanTen);
    console.log(result);
    // output: true

Browser Support

✔ 1.5 ✔ 9 ✔ ✔ ✔

### `_.some` ###

判断序列中是否存在元素满足给定方程的条件。

// Underscore/Lodash
    function isLargerThanTen(element, index, array) { 
      return element >=10;
    }
    var array = [10, 9, 8];
    var result = _.some(array, isLargerThanTen);
    console.log(result);
    // output: true
    
    // Native
    function isLargerThanTen(element, index, array) { 
      return element >=10;
    }
    
    var array = [10, 9, 8];
    var result = array.some(isLargerThanTen);
    console.log(result);
    // output: true

Browser Support

✔ 1.5 ✔ 9 ✔ ✔ ✔

### `_.reduce` ###

接收一个函数作为累加器（`accumulator`），数组中的每个值（从左到右）开始缩减，最终为一个值。

// Underscore/Lodash
    var array = [0, 1, 2, 3, 4];
    var result = _.reduce(array, function (previousValue, currentValue, currentIndex, array) { 
      return previousValue + currentValue;
    });
    console.log(result);
    // output: 10
    
    // Native
    var array = [0, 1, 2, 3, 4];
    var result = array.reduce(function (previousValue, currentValue, currentIndex, array) { 
      return previousValue + currentValue;
    });
    console.log(result);
    // output: 10

Browser Support

✔ 3.0 ✔ 9 ✔ 10.5 4.0

### `_.reduceRight` ###

接受一个函数作为累加器（`accumulator`），让每个值（从右到左，亦即从尾到头）缩减为一个值。（与 `reduce()` 的执行方向相反）

// Underscore/Lodash
    var array = [0, 1, 2, 3, 4];
    var result = _.reduceRight(array, function (previousValue, currentValue, currentIndex, array) { 
      return previousValue - currentValue;
    });
    console.log(result);
    // output: -2
    
    // Native
    var array = [0, 1, 2, 3, 4];
    var result = array.reduceRight(function (previousValue, currentValue, currentIndex, array) { 
      return previousValue - currentValue;
    });
    console.log(result);
    // output: -2

Browser Support

✔ 3.0 ✔ 9 ✔ 10.5 4.0

### `_.filter` ###

使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组。

// Underscore/Lodash
    function isBigEnough(value) { 
      return value >= 10;
    } 
    var array = [12, 5, 8, 130, 44];
    var filtered = _.filter(array, isBigEnough);
    console.log(filtered);
    // output: [12, 130, 44]
    
    // Native
    function isBigEnough(value) { 
      return value >= 10;
    } 
    var array = [12, 5, 8, 130, 44];
    var filtered = array.filter(isBigEnough);
    console.log(filtered);
    // output: [12, 130, 44]

Browser Support

✔ 1.5 ✔ 9 ✔ ✔ ✔

### `_.find` ###

返回数组中满足测试条件的一个元素，如果没有满足条件的元素，则返回 undefined。

// Underscore/Lodash
    var users = [
      {  'user': 'barney',  'age': 36, 'active': true },
      {  'user': 'fred',    'age': 40, 'active': false },
      {  'user': 'pebbles', 'age': 1,  'active': true }
    ];
    
    _.find(users, function(o) {  return o.age < 40; });
    // output: object for 'barney'
    
    // Native
    var users = [
      {  'user': 'barney',  'age': 36, 'active': true },
      {  'user': 'fred',    'age': 40, 'active': false },
      {  'user': 'pebbles', 'age': 1,  'active': true }
    ];
    
    users.find(function(o) {  return o.age < 40; });
    // output: object for 'barney'

Browser Support

45.0 25.0 ✔ Not supported Not supported 7.1

### `_.findIndex` ###

用来查找数组中某指定元素的索引, 如果找不到指定的元素, 则返回 -1.

// Underscore/Lodash
    var users = [
      {  'user': 'barney',  'age': 36, 'active': true },
      {  'user': 'fred',    'age': 40, 'active': false },
      {  'user': 'pebbles', 'age': 1,  'active': true }
    ];
    
    var index =  _.findIndex(users, function(o) {  return o.age >= 40; });
    console.log(index);
    // output: 1
    
    // Native
    var users = [
      {  'user': 'barney',  'age': 36, 'active': true },
      {  'user': 'fred',    'age': 40, 'active': false },
      {  'user': 'pebbles', 'age': 1,  'active': true }
    ];
    
    var index =  users.findIndex(function(o) {  return o.age >= 40; });
    console.log(index);
    // output: 1

Browser Support

45.0 25.0 ✔ Not supported Not supported 7.1

### `_.indexOf` ###

返回指定值在字符串对象中首次出现的位置。从 fromIndex 位置开始查找，如果不存在，则返回 `-1`。

// Underscore/Lodash
    var array = [2, 9, 9];
    var result = _.indexOf(array, 2);    
    console.log(result); 
    // output: 0
    
    // Native
    var array = [2, 9, 9];
    var result = array.indexOf(2);    
    console.log(result); 
    // output: 0

Browser Support

✔ 1.5 ✔ 9 ✔ ✔ ✔

### `_.lastIndexOf` ###

返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 `-1`。从数组的后面向前查找，从 `fromIndex` 处开始。

// Underscore/Lodash
    var array = [2, 9, 9, 4, 3, 6];
    var result = _.lastIndexOf(array, 9);    
    console.log(result); 
    // output: 2
    
    // Native
    var array = [2, 9, 9, 4, 3, 6];
    var result = array.lastIndexOf(9);    
    console.log(result); 
    // output: 2

Browser Support

✔ ✔ 9 ✔ ✔ ✔

### `_.includes` ###

判断元素是否在列表中

var array = [1, 2, 3];
    // Underscore/Lodash - also called with _.contains
    _.includes(array, 1);
    // → true
    
    // Native
    var array = [1, 2, 3];
    array.includes(1);
    // → true

Browser Support

47✔ 43 ✔ Not supported 34 9

### `_.keys` ###

返回某个对象所有可枚举的键名。

// Underscore/Lodash 
    var result = _.keys({ one: 1, two: 2, three: 3});
    console.log(result);
    // output: ["one", "two", "three"]
    
    // Native
    var result2 = Object.keys({ one: 1, two: 2, three: 3});
    console.log(result2); 
    // output: ["one", "two", "three"]

Browser Support

5✔ 4.0 ✔ 9 12 5

### `_.size` ###

返回集合大小。

// Underscore/Lodash
    var result = _.size({ one: 1, two: 2, three: 3});
    console.log(result);
    // output: 3
    
    // Native
    var result2 = Object.keys({ one: 1, two: 2, three: 3}).length;
    console.log(result2); 
    // output: 3

Browser Support

5✔ 4.0 ✔ 9 12 5

### `_.isNaN` ###

判断是否为`NaN`

// Underscore/Lodash
    console.log(_.isNaN(NaN));
    // output: true
    
    // Native
    console.log(isNaN(NaN));
    // output: true
    
    // ES6
    console.log(Number.isNaN(NaN));
    // output: true

MDN:

> 与全局`isNaN()`函数相比，`Number.isNaN()`不会出现强制将参数转换为数字的问题。  
> 这意味着现在可以安全地传递通常可以转换为`NaN`的值，但实际上与`NaN`的值不同。  
> 这也意味着只有类型编号的值（也是`NaN`）才返回`true`。  
> [Number.isNaN()][Number.isNaN]

Lodash作者的声音：

> `Lodash`的`_.isNaN`等效于`ES6 Number.isNaN`，与全局`isNaN`不同。  
> \-贾达尔顿

**Browser Support for isNaN**

✔ ✔ ✔ ✔ ✔

**Browser Support for Number.isNaN**

25 15 Not supported ✔ 9

### `_.reverse` ###

Lodash only  
将一个序列反向。

// Lodash
    var array = [1, 2, 3];
    console.log(_.reverse(array));
    // output: [3, 2, 1]
    
    // Native
    var array = [1, 2, 3];
    console.log(array.reverse());
    // output: [3, 2, 1]

`Lodash`作者的声音：

> Lodash的`_.reverse`只是调用`Array#reverse`并启用`_.map(arrays,_.reverse)`之类的合成。
> 
> 它在`_`上公开，因为以前像`Underscore`一样，仅在链接语法中公开。

Browser Support

1.0✔ 1.0✔ 5.5✔ ✔ ✔

### `_.join` ###

**Lodash only**  
将一个序列变成一个字符串。

// Lodash
    var result = _.join(['one', 'two', 'three'], '--');
    console.log(result);
    // output: 'one--two--three'
    
    // Native
    var result = ['one', 'two', 'three'].join('--');
    console.log(result)
    // output: 'one--two--three'

Browser Support

1.0✔ 1.0✔ 5.5✔ ✔ ✔

### `_.toUpper` ###

**Lodash only**  
将字符串大写。

// Lodash
    var result = _.toUpper('foobar');
    console.log(result);
    // output: 'FOOBAR'
    
    // Native
    var result = 'foobar'.toUpperCase();
    console.log(result);
    // output: 'FOOBAR'

Browser Support

✔ ✔ ✔ ✔ ✔

### `_.toLower` ###

Lodash only  
将字符串变为小写。

// Lodash
    var result = _.toLower('FOOBAR');
    console.log(result);
    // output: 'foobar'
    
    // Native
    var result = 'FOOBAR'.toLowerCase();
    console.log(result);
    // output: 'foobar'

Browser Support

✔ ✔ ✔ ✔ ✔

### `_.trim` ###

Lodash only  
消去字符串起始的空白。

// Lodash
    var result = _.trim(' abc ');
    console.log(result);
    // output: 'abc'
    
    // Native
    var result = ' abc '.trim();
    console.log(result);
    // output: 'abc'

Browser Support

5.0✔ 3.5✔ 9.0✔ 10.5✔ 5.0✔

### `_.repeat` ###

Lodash only  
重复创建字符串。

// Lodash
    var result = _.repeat('abc', 2);
    // output: 'abcabc'
    
    // Native
    var result = 'abc'.repeat(2);
    console.log(result);
    // output: 'abcabc'

### `_.after` ###

Note this is an alternative implementation  
创建一个在经过了指定计数器之后才会被调用的方程。

[Number.isNaN]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN