Lodash 和 Underscore 是很是優秀的當代JavaScript的工具集合框架,它們被前端開發者普遍地使用。可是,當咱們如今是針對現代化瀏覽器進行開發時,不少時候咱們利用的Underscore中的方法已經被ES5與ES6所支持了,若是咱們但願咱們的項目儘量地減小依賴的話,咱們能夠根據目標瀏覽器來選擇不用Lodash或者Underscore。javascript
Make use of native JavaScript object and array utilities before going big.
Cody lindley, Author of jQuery Cookbook,JavaScript EnlightenmenthtmlYou 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 JavaScript 前端I guess not, but I want it.
Tero Parviainen, Author of build-your-own-angularjavaI'll admit, I've been guilty of overusing #lodash. Excellent resource.
therebelrobot, Maker of web things, Facilitator for Node.js/io.jsgit
遍歷一系列的元素,而且調用回調處理方程。
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
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
✔ | 1.5 ✔ | 9 ✔ | ✔ | ✔ |
將某個列表中的元素映射到新的列表中。
// 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]
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
✔ | 1.5 ✔ | 9 ✔ | ✔ | ✔ |
測試數組的全部元素是否都經過了指定函數的測試。
// 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
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
✔ | 1.5 ✔ | 9 ✔ | ✔ | ✔ |
判斷序列中是否存在元素知足給定方程的條件。
// 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
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
✔ | 1.5 ✔ | 9 ✔ | ✔ | ✔ |
接收一個函數做爲累加器(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
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
✔ | 3.0 ✔ | 9 ✔ | 10.5 | 4.0 |
接受一個函數做爲累加器(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
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
✔ | 3.0 ✔ | 9 ✔ | 10.5 | 4.0 |
使用指定的函數測試全部元素,並建立一個包含全部經過測試的元素的新數組。
// 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]
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
✔ | 1.5 ✔ | 9 ✔ | ✔ | ✔ |
返回數組中知足測試條件的一個元素,若是沒有知足條件的元素,則返回 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'
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
45.0 | 25.0 ✔ | Not supported | Not supported | 7.1 |
用來查找數組中某指定元素的索引, 若是找不到指定的元素, 則返回 -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
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
45.0 | 25.0 ✔ | Not supported | Not supported | 7.1 |
返回指定值在字符串對象中首次出現的位置。從 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
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
✔ | 1.5 ✔ | 9 ✔ | ✔ | ✔ |
返回指定元素(也即有效的 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
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
✔ | ✔ | 9 ✔ | ✔ | ✔ |
判斷元素是否在列表中
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
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
47✔ | 43 ✔ | Not supported | 34 | 9 |
返回某個對象全部可枚舉的鍵名。
// 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"]
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
5✔ | 4.0 ✔ | 9 | 12 | 5 |
返回集合大小。
// 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
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
5✔ | 4.0 ✔ | 9 | 12 | 5 |
判斷是否爲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
isNaN
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
✔ | ✔ | ✔ | ✔ | ✔ |
Number.isNaN
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
25 | 15 | Not supported | ✔ | 9 |
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
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
1.0✔ | 1.0✔ | 5.5✔ | ✔ | ✔ |
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'
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
1.0✔ | 1.0✔ | 5.5✔ | ✔ | ✔ |
Lodash only
將字符串大寫。
// Lodash var result = _.toUpper('foobar'); console.log(result); // output: 'FOOBAR' // Native var result = 'foobar'.toUpperCase(); console.log(result); // output: 'FOOBAR'
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
✔ | ✔ | ✔ | ✔ | ✔ |
Lodash only
將字符串變爲小寫。
// Lodash var result = _.toLower('FOOBAR'); console.log(result); // output: 'foobar' // Native var result = 'FOOBAR'.toLowerCase(); console.log(result); // output: 'foobar'
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
✔ | ✔ | ✔ | ✔ | ✔ |
Lodash only
消去字符串起始的空白。
// Lodash var result = _.trim(' abc '); console.log(result); // output: 'abc' // Native var result = ' abc '.trim(); console.log(result); // output: 'abc'
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
5.0✔ | 3.5✔ | 9.0✔ | 10.5✔ | 5.0✔ |
Lodash only
重複建立字符串。
// Lodash var result = _.repeat('abc', 2); // output: 'abcabc' // Native var result = 'abc'.repeat(2); console.log(result); // output: 'abcabc'
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
41✔ | 24✔ | Not supported | Not supported | 9 |
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(); } });
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
✔ | ✔ | ✔ | ✔ | ✔ |