摘要:將某個(gè)列表中的元素映射到新的列表中。判斷序列中是否存在元素滿足給定方程的條件。用來查找數(shù)組中某指定元素的索引如果找不到指定的元素則返回返回指定值在字符串對(duì)象中首次出現(xiàn)的位置。創(chuàng)建一個(gè)在經(jīng)過了指定計(jì)數(shù)器之后才會(huì)被調(diào)用的方程。
You don"t (may not) need Lodash/Underscore
Lodash 和 Underscore 是非常優(yōu)秀的當(dāng)代JavaScript的工具集合框架,它們被前端開發(fā)者廣泛地使用。但是,當(dāng)我們現(xiàn)在是針對(duì)現(xiàn)代化瀏覽器進(jìn)行開發(fā)時(shí),很多時(shí)候我們利用的Underscore中的方法已經(jīng)被ES5與ES6所支持了,如果我們希望我們的項(xiàng)目盡可能地減少依賴的話,我們可以根據(jù)目標(biāo)瀏覽器來選擇不用Lodash或者Underscore。
開發(fā)者的聲音Quick linksMake 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
_.each
_.map
_.every
_.some
_.reduce
_.reduceRight
_.filter
_.find
_.findIndex
_.indexOf
_.lastIndexOf
_.includes
_.keys
_.size
_.isNaN
_.reverse
_.join
_.toUpper
_.toLower
_.trim
_.repeat
_.after
_.each遍歷一系列的元素,并且調(diào)用回調(diào)處理方程。
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 3Browser Support
? | 1.5 ? | 9 ? | ? | ? |
? back to top
_.map將某個(gè)列表中的元素映射到新的列表中。
// 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 ? | ? | ? |
? back to top
_.every測(cè)試數(shù)組的所有元素是否都通過了指定函數(shù)的測(cè)試。
// 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: trueBrowser Support
? | 1.5 ? | 9 ? | ? | ? |
? back to top
_.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: trueBrowser Support
? | 1.5 ? | 9 ? | ? | ? |
? back to top
_.reduce接收一個(gè)函數(shù)作為累加器(accumulator),數(shù)組中的每個(gè)值(從左到右)開始縮減,最終為一個(gè)值。
// 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: 10Browser Support
? | 3.0 ? | 9 ? | 10.5 | 4.0 |
? back to top
_.reduceRight接受一個(gè)函數(shù)作為累加器(accumulator),讓每個(gè)值(從右到左,亦即從尾到頭)縮減為一個(gè)值。(與 reduce() 的執(zhí)行方向相反)
// 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: -2Browser Support
? | 3.0 ? | 9 ? | 10.5 | 4.0 |
? back to top
_.filter使用指定的函數(shù)測(cè)試所有元素,并創(chuàng)建一個(gè)包含所有通過測(cè)試的元素的新數(shù)組。
// 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 ? | ? | ? |
? back to top
_.find返回?cái)?shù)組中滿足測(cè)試條件的一個(gè)元素,如果沒有滿足條件的元素,則返回 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 |
? back to top
_.findIndex用來查找數(shù)組中某指定元素的索引, 如果找不到指定的元素, 則返回 -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: 1Browser Support
45.0 | 25.0 ? | Not supported | Not supported | 7.1 |
? back to top
_.indexOf返回指定值在字符串對(duì)象中首次出現(xiàn)的位置。從 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: 0Browser Support
? | 1.5 ? | 9 ? | ? | ? |
? back to top
_.lastIndexOf返回指定元素(也即有效的 JavaScript 值或變量)在數(shù)組中的最后一個(gè)的索引,如果不存在則返回 -1。從數(shù)組的后面向前查找,從 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: 2Browser Support
? | ? | 9 ? | ? | ? |
? back to top
_.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); // → trueBrowser Support
47? | 43 ? | Not supported | 34 | 9 |
? back to top
_.keys返回某個(gè)對(duì)象所有可枚舉的鍵名。
// 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 |
? back to top
_.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: 3Browser Support
5? | 4.0 ? | 9 | 12 | 5 |
? back to top
_.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 to NaN, but aren"t actually the same value as NaN. This also means that only values of the type number, that are also NaN, return true. Number.isNaN()
Voice from the Lodash author:
Browser Support for isNaNLodash"s _.isNaN is equiv to ES6 Number.isNaN which is different than the global isNaN.
--- jdalton
? | ? | ? | ? | ? |
25 | 15 | Not supported | ? | 9 |
? back to top
_.reverseLodash only
將一個(gè)序列反向。
// 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 calls Array#reverse and enables composition like _.map(arrays, _.reverse).
It"s exposed on _ because previously, like Underscore, it was only exposed in the chaining syntax.
Browser Support--- jdalton
1.0? | 1.0? | 5.5? | ? | ? |
? back to top
_.joinLodash only
將一個(gè)序列變成一個(gè)字符串。
// 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? | ? | ? |
? back to top
_.toUpperLodash only
將字符串大寫。
// Lodash var result = _.toUpper("foobar"); console.log(result); // output: "FOOBAR" // Native var result = "foobar".toUpperCase(); console.log(result); // output: "FOOBAR"Browser Support
? | ? | ? | ? | ? |
? back to top
_.toLowerLodash only
將字符串變?yōu)樾憽?/p>
// Lodash var result = _.toLower("FOOBAR"); console.log(result); // output: "foobar" // Native var result = "FOOBAR".toLowerCase(); console.log(result); // output: "foobar"Browser Support
? | ? | ? | ? | ? |
? back to top
_.trimLodash 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? |
? back to top
_.repeatLodash only
重復(fù)創(chuàng)建字符串。
// 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 |
? back to top
_.afterNote this is an alternative implementation
創(chuàng)建一個(gè)在經(jīng)過了指定計(jì)數(shù)器之后才會(huì)被調(diào)用的方程。
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
? | ? | ? | ? | ? |
? back to top
ReferenceMozilla Developer Network
Underscore.js
Lodash.js
Inspired by:You-Dont-Need-jQuery
Rui"s blog
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/78690.html
摘要:是強(qiáng)大的,你可以做很多事情沒有。如果你想要你的項(xiàng)目需要更少的依賴,并且你清楚的知道你的目標(biāo)瀏覽器,那么你可能不需要。我們并不需要為了操作等再學(xué)習(xí)一下的。但是,他們往往需要更多的資源,功能不強(qiáng),難以通過腳本自動(dòng)化。 1 You-Dont-Need-JavaScript CSS是強(qiáng)大的,你可以做很多事情沒有JS。 本文教你使用原生CSS做下面的事情。 內(nèi)容目錄 手風(fēng)琴/切換 圓盤傳送帶...
摘要:是強(qiáng)大的,你可以做很多事情沒有。如果你想要你的項(xiàng)目需要更少的依賴,并且你清楚的知道你的目標(biāo)瀏覽器,那么你可能不需要。我們并不需要為了操作等再學(xué)習(xí)一下的。但是,他們往往需要更多的資源,功能不強(qiáng),難以通過腳本自動(dòng)化。 1 You-Dont-Need-JavaScript CSS是強(qiáng)大的,你可以做很多事情沒有JS。 本文教你使用原生CSS做下面的事情。 內(nèi)容目錄 手風(fēng)琴/切換 圓盤傳送帶...
摘要:構(gòu)建是為了在中為常見任務(wù)提供實(shí)用程序功能。所有功能都自動(dòng)進(jìn)行,并且相應(yīng)地安排傳遞的參數(shù)以便于使用。在星級(jí),是一個(gè)用于處理本機(jī)對(duì)象的實(shí)用程序庫。該庫沒有外部依賴關(guān)系,這是一個(gè)將事件作為序列進(jìn)行測(cè)試的現(xiàn)場(chǎng)演示。 由于Javascript在2018年仍然是最受歡迎和最廣泛使用的編程語言,因此圍繞它擴(kuò)展了生態(tài)系統(tǒng)。 showImg(https://segmentfault.com/img/re...
摘要:構(gòu)建是為了在中為常見任務(wù)提供實(shí)用程序功能。所有功能都自動(dòng)進(jìn)行,并且相應(yīng)地安排傳遞的參數(shù)以便于使用。在星級(jí),是一個(gè)用于處理本機(jī)對(duì)象的實(shí)用程序庫。該庫沒有外部依賴關(guān)系,這是一個(gè)將事件作為序列進(jìn)行測(cè)試的現(xiàn)場(chǎng)演示。 由于Javascript在2018年仍然是最受歡迎和最廣泛使用的編程語言,因此圍繞它擴(kuò)展了生態(tài)系統(tǒng)。 showImg(https://segmentfault.com/img/re...
摘要:的不能算作深復(fù)制,但它至少比直接賦值來得深一些,它創(chuàng)建了一個(gè)新的對(duì)象。它們的主要用途是對(duì)存在環(huán)的對(duì)象進(jìn)行深復(fù)制。比如源對(duì)象中的子對(duì)象在深復(fù)制以后,對(duì)應(yīng)于。希望這篇文章對(duì)你們有幫助深復(fù)制方法所謂擁抱未來的深復(fù)制實(shí)現(xiàn)參考資料 本文最初發(fā)布于我的個(gè)人博客:咀嚼之味 一年前我曾寫過一篇 Javascript 中的一種深復(fù)制實(shí)現(xiàn),當(dāng)時(shí)寫這篇文章的時(shí)候還比較稚嫩,有很多地方?jīng)]有考慮仔細(xì)。...
閱讀 858·2021-11-15 17:58
閱讀 3659·2021-11-12 10:36
閱讀 3795·2021-09-22 16:06
閱讀 971·2021-09-10 10:50
閱讀 1334·2019-08-30 11:19
閱讀 3318·2019-08-29 16:26
閱讀 950·2019-08-29 10:55
閱讀 3351·2019-08-26 13:48