zoukankan      html  css  js  c++  java
  • [转] 你并不需要Underscore/Lodash

    [From] https://segmentfault.com/a/1190000004460234

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

    Quick links

    1. _.each

    2. _.map

    3. _.every

    4. _.some

    5. _.reduce

    6. _.reduceRight

    7. _.filter

    8. _.find

    9. _.findIndex

    10. _.indexOf

    11. _.lastIndexOf

    12. _.includes

    13. _.keys

    14. _.size

    15. _.isNaN

    16. _.reverse

    17. _.join

    18. _.toUpper

    19. _.toLower

    20. _.trim

    21. _.repeat

    22. _.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 ✔

    ⬆ back to top

    _.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 ✔

    ⬆ back to top

    _.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 ✔

    ⬆ back to top

    _.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 ✔

    ⬆ back to top

    _.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

    ⬆ back to top

    _.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

    ⬆ back to top

    _.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 ✔

    ⬆ back to top

    _.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

    ⬆ back to top

    _.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

    ⬆ back to top

    _.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 ✔

    ⬆ back to top

    _.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 ✔

    ⬆ back to top

    _.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

    ⬆ back to top

    _.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

    ⬆ back to top

    _.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

    ⬆ back to top

    _.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:

    In comparison to the global isNaN() function, Number.isNaN() doesn't suffer the problem of forcefully converting the parameter to a number. This means it is now safe to pass values that would normally convert to NaN, but aren't actually the same value as NaN. This also means that only values of the type number, that are also NaN, return true. Number.isNaN()

    Voice from the Lodash author:

    Lodash's _.isNaN is equiv to ES6 Number.isNaN which is different than the global isNaN
    --- jdalton

    Browser Support for isNaN

    Browser Support for Number.isNaN

    25 15 Not supported 9

    ⬆ back to top

    _.reverse

    heavy_exclamation_markLodash 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]

    Voice from the Lodash author:

    Lodash's _.reverse just calls Array#reverse and enables composition like _.map(arrays, _.reverse).

    It's exposed on _ because previously, like Underscore, it was only exposed in the chaining syntax.

    --- jdalton

    Browser Support

    1.0✔ 1.0✔ 5.5✔

    ⬆ back to top

    _.join

    heavy_exclamation_markLodash 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✔

    ⬆ back to top

    _.toUpper

    heavy_exclamation_markLodash only
    将字符串大写。

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

    Browser Support

    ⬆ back to top

    _.toLower

    heavy_exclamation_markLodash only
    将字符串变为小写。

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

    Browser Support

    ⬆ back to top

    _.trim

    heavy_exclamation_markLodash 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✔

    ⬆ back to top

    _.repeat

    heavy_exclamation_markLodash only
    重复创建字符串。

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

    Browser Support

    41✔ 24✔ Not supported Not supported 9

    ⬆ back to top

    _.after

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

    var notes = ['profile', 'settings'];
    // Underscore/Lodash
    var renderNotes = _.after(notes.length, render);
       notes.forEach(function(note) {
       console.log(note);
       renderNotes();
    });
    
     // Native
    notes.forEach(function(note, index) {
     console.log(note);
     if (notes.length === (index + 1)) {
       render();
     }
    });

    Browser Support

    ⬆ back to top

    Reference

    Inspired by:

  • 相关阅读:
    使用RecyclerView打造Gallery
    Retrofit简介与使用方法(翻译)
    迷宫实现递归版本C++
    牛客笔试题
    牛客笔试题---求最长重复词长度之和
    C++句柄解析
    C++双向循环链表实现
    String C++完整实现。
    String写时拷贝实现
    顺序表操作补充(查找方法增加)
  • 原文地址:https://www.cnblogs.com/pekkle/p/7685504.html
Copyright © 2011-2022 走看看