You don't (may not) need Lodash/Underscore
Lodash 和 Underscore 是非常优秀的当代JavaScript的工具集合框架,它们被前端开发者广泛地使用。但是,当我们现在是针对现代化浏览器进行开发时,很多时候我们利用的Underscore中的方法已经被ES5与ES6所支持了,如果我们希望我们的项目尽可能地减少依赖的话,我们可以根据目标浏览器来选择不用Lodash或者Underscore。
开发者的声音
Make use of native JavaScript object and array utilities before going big.
Cody lindley, Author of jQuery Cookbook,JavaScript EnlightenmentYou probably don't need Lodash. Nice List of JavaScript methods which you can use natively.
Daniel Lamb, Computer Scientist, Technical Reviewer of Secrets of the JavaScript Ninja, Functional Programming in JavaScriptI guess not, but I want it.
Tero Parviainen, Author of build-your-own-angularI'll admit, I've been guilty of overusing #lodash. Excellent resource.
therebelrobot, Maker of web things, Facilitator for Node.js/io.js
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
✔ | ✔ | ✔ | ✔ | ✔ |
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。