[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

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]

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

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✔

⬆ back to top

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

⬆ back to top

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

⬆ back to top

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

⬆ back to top

_.repeat

Lodash 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

Note 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:

[转] 你并不需要Underscore/Lodash的更多相关文章

  1. underscore || lodash

    1.http://www.css88.com/archives/5443 (underscore) let list = _.filter(record.orderGoodsList, item =& ...

  2. lodash 替换 underscore

    不少知名项目都在用lodash替换underscore lodash  Lazy evaluation 英文原文:http://filimanjaro.com/blog/2014/introducin ...

  3. lodash 学习笔记

    一.介绍 官方文档: 中文 - https://www.lodashjs.com/docs/latest 英文- https://lodash.com/docs/4.17.15 1.作用 lodash ...

  4. [转]为什么我要用 Node.js? 案例逐一介绍

    原文地址:http://blog.jobbole.com/53736/ 介绍 JavaScript 高涨的人气带来了很多变化,以至于如今使用其进行网络开发的形式也变得截然不同了.就如同在浏览器中一样, ...

  5. Javascript开发之工具归纳

    写在前面 由于JS开发对我来说是全新的技术栈,开发过程中遇到了各种各样的框架.工具,同时也感叹一下相对于.Net的框架(工具框架以及测试框架等)JS框架真的是太丰富了.社区的力量果然强大---也是由此 ...

  6. 【转】为什么我要用 Node.js? 案例逐一介绍

    原文转自:http://blog.jobbole.com/53736/ 介绍 JavaScript 高涨的人气带来了很多变化,以至于如今使用其进行网络开发的形式也变得截然不同了.就如同在浏览器中一样, ...

  7. Top JavaScript Frameworks, Libraries & Tools and When to Use Them

    It seems almost every other week there is a new JavaScript library taking the web community by storm ...

  8. Node.js(转) -- 临时来说还看不懂!

    转自:http://blog.jobbole.com/53736/ 本文由 伯乐在线 - Lellansin 翻译.未经许可,禁止转载!英文出处:toptal.欢迎加入翻译组. 介绍 JavaScri ...

  9. 【大前端攻城狮之路】JavaScript函数式编程

    转眼之间已入五月,自己毕业也马上有三年了.大学计算机系的同学大多都在北京混迹,大家为了升职加薪,娶媳妇买房,熬夜加班跟上线,出差pk脑残客户.同学聚会时有不少兄弟已经体重飙升,开始关注13号地铁线上铺 ...

随机推荐

  1. Luogu 3237 [HNOI2014]米特运输

    BZOJ 3573 发现当一个点的权值确定了,整棵树的权值也会随之确定,这个确定关系表现在根结点的总权值上,如果一个点$x$的权值为$v$,那么一步步向上跳后,到根节点的权值就会变成$x*$每一个点的 ...

  2. python操作Redis缓存

    python操作Redis缓存 https://www.cnblogs.com/guotianbao/p/8683037.html 学习资料:电子书资源 联系邮箱:gmu1592618@gmail.c ...

  3. [GO]局部变量的特点

    package main import "fmt" func main() { //定义在{}里的变量就是局部变量,只能在{}里起作用 //作用域,变量起作用的范围 //执行到定义 ...

  4. Android Tablayout属性介绍

    1.添加依赖 compile 'com.android.support:design:26.0.0-alpha1' 2.属性 改变选中字体的颜色app:tabSelectedTextColor=&qu ...

  5. 简单接触oracle数据库nvl函数decode函数

    SQL语句的DECODE()和NVL()函数用法 SELECT DECODE(choose_tool,0,'宝马',1,'电动车',2,'自行车','步行')  AS my_tool FROM dat ...

  6. C# 控制win7任务栏、开始菜单的显示与隐藏

    因为是做显示程序,故需要控制任务栏与开始菜单的显示与隐藏,这样就美观些.不啰嗦.直接上代码: using System; using System.Collections.Generic; using ...

  7. NPOI 2.1.3.1导入Excel

    引入NPOI 2.1.3.1的包 项目引入 using NPOI.XSSF.UserModel;using NPOI.SS.UserModel; 控制器方法: public ActionResult ...

  8. 「CF932E」 Team Work

    题目链接 戳我 题意 有\(n\)个箱子,从中选出\(i\)个箱子,然后把\(k\)个不同的球装在这\(i\)个箱子中,求方案数. 实际上这题就是求: \[ \sum_{i=1}^nc_n^i*i^k ...

  9. Kotlin 字符模板

    Kotlin的字符模板和c语言的格式化输出有点像. 先来说说Kotlin 的字符模板怎么弄. fun main(args:Array<String>) { var name="T ...

  10. 微信小程序设计稿pt怎么转rpx

    什么是逻辑分辨率? 什么是物理分辨率? 什么是DPI?(Dots Per Inch) 最早的时候,这个单位是用来描述打印机的性能的,意思是每英寸能打多少个墨点,毫无疑问,DPI越高,打印出来的东西就会 ...