摘要:将某个列表中的元素映射到新的列表中。判断序列中是否存在元素满足给定方程的条件。用来查找数组中某指定元素的索引如果找不到指定的元素则返回返回指定值在字符串对象中首次出现的位置。创建一个在经过了指定计数器之后才会被调用的方程。
You don"t (may not) need Lodash/Underscore
Lodash 和 Underscore 是非常优秀的当代JavaScript的工具集合框架,它们被前端开发者广泛地使用。但是,当我们现在是针对现代化浏览器进行开发时,很多时候我们利用的Underscore中的方法已经被ES5与ES6所支持了,如果我们希望我们的项目尽可能地减少依赖的话,我们可以根据目标浏览器来选择不用Lodash或者Underscore。
开发者的声音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遍历一系列的元素,并且调用回调处理方程。
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将某个列表中的元素映射到新的列表中。
// 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测试数组的所有元素是否都通过了指定函数的测试。
// 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接收一个函数作为累加器(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: 10Browser Support
✔ | 3.0 ✔ | 9 ✔ | 10.5 | 4.0 |
⬆ back to top
_.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: -2Browser Support
✔ | 3.0 ✔ | 9 ✔ | 10.5 | 4.0 |
⬆ back to top
_.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 ✔ | ✔ | ✔ |
⬆ back to top
_.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 |
⬆ back to top
_.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: 1Browser Support
45.0 | 25.0 ✔ | Not supported | Not supported | 7.1 |
⬆ back to top
_.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: 0Browser Support
✔ | 1.5 ✔ | 9 ✔ | ✔ | ✔ |
⬆ back to top
_.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: 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返回某个对象所有可枚举的键名。
// 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
将一个序列反向。
// 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
将一个序列变成一个字符串。
// 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
将字符串变为小写。
// 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
重复创建字符串。
// 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
创建一个在经过了指定计数器之后才会被调用的方程。
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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/78690.html
摘要:是强大的,你可以做很多事情没有。如果你想要你的项目需要更少的依赖,并且你清楚的知道你的目标浏览器,那么你可能不需要。我们并不需要为了操作等再学习一下的。但是,他们往往需要更多的资源,功能不强,难以通过脚本自动化。 1 You-Dont-Need-JavaScript CSS是强大的,你可以做很多事情没有JS。 本文教你使用原生CSS做下面的事情。 内容目录 手风琴/切换 圆盘传送带...
摘要:是强大的,你可以做很多事情没有。如果你想要你的项目需要更少的依赖,并且你清楚的知道你的目标浏览器,那么你可能不需要。我们并不需要为了操作等再学习一下的。但是,他们往往需要更多的资源,功能不强,难以通过脚本自动化。 1 You-Dont-Need-JavaScript CSS是强大的,你可以做很多事情没有JS。 本文教你使用原生CSS做下面的事情。 内容目录 手风琴/切换 圆盘传送带...
摘要:构建是为了在中为常见任务提供实用程序功能。所有功能都自动进行,并且相应地安排传递的参数以便于使用。在星级,是一个用于处理本机对象的实用程序库。该库没有外部依赖关系,这是一个将事件作为序列进行测试的现场演示。 由于Javascript在2018年仍然是最受欢迎和最广泛使用的编程语言,因此围绕它扩展了生态系统。 showImg(https://segmentfault.com/img/re...
摘要:构建是为了在中为常见任务提供实用程序功能。所有功能都自动进行,并且相应地安排传递的参数以便于使用。在星级,是一个用于处理本机对象的实用程序库。该库没有外部依赖关系,这是一个将事件作为序列进行测试的现场演示。 由于Javascript在2018年仍然是最受欢迎和最广泛使用的编程语言,因此围绕它扩展了生态系统。 showImg(https://segmentfault.com/img/re...
摘要:的不能算作深复制,但它至少比直接赋值来得深一些,它创建了一个新的对象。它们的主要用途是对存在环的对象进行深复制。比如源对象中的子对象在深复制以后,对应于。希望这篇文章对你们有帮助深复制方法所谓拥抱未来的深复制实现参考资料 本文最初发布于我的个人博客:咀嚼之味 一年前我曾写过一篇 Javascript 中的一种深复制实现,当时写这篇文章的时候还比较稚嫩,有很多地方没有考虑仔细。...
阅读 840·2021-11-15 17:58
阅读 3641·2021-11-12 10:36
阅读 3778·2021-09-22 16:06
阅读 955·2021-09-10 10:50
阅读 1324·2019-08-30 11:19
阅读 3308·2019-08-29 16:26
阅读 927·2019-08-29 10:55
阅读 3340·2019-08-26 13:48