[转] 你并不需要Underscore/Lodash
[From] https://segmentfault.com/a/1190000004460234
Lodash 和 Underscore 是非常优秀的当代JavaScript的工具集合框架,它们被前端开发者广泛地使用。但是,当我们现在是针对现代化浏览器进行开发时,很多时候我们利用的Underscore中的方法已经被ES5与ES6所支持了,如果我们希望我们的项目尽可能地减少依赖的话,我们可以根据目标浏览器来选择不用Lodash或者Underscore。
Quick links
_.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:
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 toNaN
, but aren't actually the same value asNaN
. This also means that only values of the type number, that are alsoNaN
, return true. Number.isNaN()
Voice from the Lodash author:
Lodash's
_.isNaN
is equiv to ES6Number.isNaN
which is different than the globalisNaN
.
--- jdalton
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]
Voice from the Lodash author:
Lodash's
_.reverse
just callsArray#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✔ | ✔ | ✔ |
_.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'
Browser Support
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
41✔ | 24✔ | Not supported | Not supported | 9 |
_.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
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
✔ | ✔ | ✔ | ✔ | ✔ |
Reference
Inspired by:
[转] 你并不需要Underscore/Lodash的更多相关文章
- underscore || lodash
1.http://www.css88.com/archives/5443 (underscore) let list = _.filter(record.orderGoodsList, item =& ...
- lodash 替换 underscore
不少知名项目都在用lodash替换underscore lodash Lazy evaluation 英文原文:http://filimanjaro.com/blog/2014/introducin ...
- lodash 学习笔记
一.介绍 官方文档: 中文 - https://www.lodashjs.com/docs/latest 英文- https://lodash.com/docs/4.17.15 1.作用 lodash ...
- [转]为什么我要用 Node.js? 案例逐一介绍
原文地址:http://blog.jobbole.com/53736/ 介绍 JavaScript 高涨的人气带来了很多变化,以至于如今使用其进行网络开发的形式也变得截然不同了.就如同在浏览器中一样, ...
- Javascript开发之工具归纳
写在前面 由于JS开发对我来说是全新的技术栈,开发过程中遇到了各种各样的框架.工具,同时也感叹一下相对于.Net的框架(工具框架以及测试框架等)JS框架真的是太丰富了.社区的力量果然强大---也是由此 ...
- 【转】为什么我要用 Node.js? 案例逐一介绍
原文转自:http://blog.jobbole.com/53736/ 介绍 JavaScript 高涨的人气带来了很多变化,以至于如今使用其进行网络开发的形式也变得截然不同了.就如同在浏览器中一样, ...
- 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 ...
- Node.js(转) -- 临时来说还看不懂!
转自:http://blog.jobbole.com/53736/ 本文由 伯乐在线 - Lellansin 翻译.未经许可,禁止转载!英文出处:toptal.欢迎加入翻译组. 介绍 JavaScri ...
- 【大前端攻城狮之路】JavaScript函数式编程
转眼之间已入五月,自己毕业也马上有三年了.大学计算机系的同学大多都在北京混迹,大家为了升职加薪,娶媳妇买房,熬夜加班跟上线,出差pk脑残客户.同学聚会时有不少兄弟已经体重飙升,开始关注13号地铁线上铺 ...
随机推荐
- Win7怎么进入安全模式 三种轻松进入Win7安全模式方法
发布时间:2013-05-27 11:23 作者:电脑百事网原创 来源:www.pc841.com 13783次阅读 win7的安全模式和XP如出一辙,在安全模式里我们可以删除顽固文件.查杀病毒.解除 ...
- Eclipse中新建applet 错误
出现的问题: “错误,请单击以获取详细信息” Java Plug-in 1.6.0_45 使用 JRE 版本 1.6.0_45-b06 Java HotSpot(TM) Client VM 用户主目 ...
- HDU 3729 I'm Telling the Truth (二分匹配)
题意:给定 n 个人成绩排名区间,然后问你最多有多少人成绩是真实的. 析:真是没想到二分匹配,....后来看到,一下子就明白了,原来是水题,二分匹配,只要把每个人和他对应的区间连起来就好,跑一次二分匹 ...
- madvise、fadvise、posix_madvise和posix_fadvise函数的使用
系统调用madvise的作用:建议内核如何使用指定段的内存.函数原型如下: #include <sys/mman.h> int madvise(void *addr, size_t len ...
- 【Android学习】自定义checkbox
1.1 自定义checkbox 选中图片 自定义checkbox使用的时android:background而不是android:button,原因在于使用button时自定义图片过大超出边缘部分会截 ...
- DELPHI XE5轻松输出到MacOsX
配置:MACOSX10.9.3 +XCODE5.1 + VBOX + WINXP + DELPHI XE 5UP2 配置步骤从略. 1.选择firemonkey desktop application ...
- .net 3.5 Lambda表达式
Lambda表达式 转自http://www.cnblogs.com/kingmoon/archive/2011/05/03/2035696.html "Lambda表达式"是一个 ...
- 【留用】C#的一些好的书籍
浏览博客的时候发现一篇推荐的C#书籍,感觉真的不错,涉略过几本,水平问题,没看的很深入,正在努力,留用了!!! http://www.cnblogs.com/tongming/p/3879752.ht ...
- js 判断今天是否上班
<script> var weekdate= getWeekDate() switch(weekdate){ case "星期一":; case "星期二&q ...
- Mono for Android for Visual Studio 2010安装及试用
安装 Mono for Android for Visual Studio 2010 需要下面4个步骤: 1.安装 JDK 下载并安装 Java 1.6 (Java 6) JDK. 2.安装 Andr ...