Lodash
和 Underscore
是非常优秀的当代JavaScript
的工具集合框架,它们被前端开发者广泛地使用。但是,当我们现在是针对现代化浏览器进行开发时,很多时候我们利用的Underscore
中的方法已经被ES5
与ES6
所支持了,如果我们希望我们的项目尽可能地减少依赖的话,我们可以根据目标浏览器来选择不用Lodash
或者Underscore
。
Quick links
_.each
_.map
_.every
_.some
_.reduce
_.reduceRight
_.filter
_.find
_.findIndex
_.indexOf
_.lastIndexOf
_.includes
_.keys
_.size
_.isNaN
_.reverse
_.join
_.toUpper
_.toLower
_.trim
_.repeat
_.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 ✔ ✔ ✔
_.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:
与全局
isNaN()
函数相比,Number.isNaN()
不会出现强制将参数转换为数字的问题。
这意味着现在可以安全地传递通常可以转换为NaN
的值,但实际上与NaN
的值不同。
这也意味着只有类型编号的值(也是NaN
)才返回true
。
Number.isNaN()
Lodash作者的声音:
Lodash
的_.isNaN
等效于ES6 Number.isNaN
,与全局isNaN
不同。
-贾达尔顿
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]
Lodash
作者的声音:
Lodash的
_.reverse
只是调用Array#reverse
并启用_.map(arrays,_.reverse)
之类的合成。它在
_
上公开,因为以前像Underscore
一样,仅在链接语法中公开。
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'
_.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();
}
});
![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
✔ | ✔ | ✔ | ✔ | ✔ | ✔ |