[转] 你并不需要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号地铁线上铺 ...
随机推荐
- PCL 平面模型分割
点云操作中,平面的分割是经常遇到的问题,下面的例子就是如何利用PCL库提拟合出的参数,之后就可以过滤掉在平面附近的点云. #include <iostream> #include < ...
- SQL 左联接去除左边重复的数据
代码如下: use DB go select table1.*,b.OPTime from [dbo].[table1] left join( select * from (select table2 ...
- jquery数组拼接
var a=[]; var c=[80,90,70,100] var b={'张三':19,'成绩':c}; a.push(b); console.log("测试案例",a); 同 ...
- (转)Asp.Net生命周期系列一
原文地址:http://www.cnblogs.com/skm-blog/archive/2013/07/07/3176713.html Asp.Net生命周期对于初级甚至中级程序员来说,一直都是一个 ...
- 搭建自己的git服务器--gogs
//@desn:搭建自己的git服务器--gogs //@desn:码字不宜,转载请注明出处 //@author:张慧源 <turing_zhy@163.com> //@date:201 ...
- android studio中使用recyclerview制作个显示考勤打卡的日历来
1. 用户在app端选择个日期就能查询这个月的考勤打卡信息,并以日历上标注不同的颜色来显示给用户,当然这个日历是recyclerview做出来的,只是每行显示7个,表示一周的七天. 2. 员工考勤打卡 ...
- WinForm中DataGridView的使用(六) - 特殊处理的小地方
列标题不能居中的解决方法 一般列标题的居中我们都使用this.ColumnHeadersDefaultCellStyle.Alignment = DataGridViewContentAlignmen ...
- Android学习笔记 Toast屏幕提示组件的使用方法
activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...
- 家用wifi信号覆盖增强扩展实用指南
家用wifi信号覆盖增强扩展实用指南 现在网上很多号称穿墙王的无线路由器,但是一般用起来效果都不理想,其实最主要的原因还是家里面一般每个房间不大,但是墙比较多.并且一般也没有一个所谓的中心点放置路由器 ...
- 【连载】redis库存操作,分布式锁的四种实现方式[一]--基于zookeeper实现分布式锁
一.背景 在电商系统中,库存的概念一定是有的,例如配一些商品的库存,做商品秒杀活动等,而由于库存操作频繁且要求原子性操作,所以绝大多数电商系统都用Redis来实现库存的加减,最近公司项目做架构升级,以 ...