你并不需要Underscore/Lodash

最新推荐文章于 2022-10-11 17:06:03 发布
最新推荐文章于 2022-10-11 17:06:03 发布
阅读量319 收藏 1
点赞数
分类专栏： Html+Javascript
原文链接：https://blog.csdn.net/WuLex
版权

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();
 }
});
ChromeEdgeFirefoxIEOperaSafari
✔✔✔✔✔✔
.NET跨平台
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
《其实你并不需要Lodash / Underscore》
theScoreONE的博客
12-07 7019
一、unshift向数组添加的第一个元素 const data = ['1', '2', '3']; data.unshift('0'); console.log(data); // ["0", "1", "2", "3"] 二、Array.from(); creates a new Array instance from an array-like or iterable object.
Underscore和lodash 介绍
赶路人儿
11-30 9417
Lodash 和 Underscore 是非常优秀的当代JavaScript的工具集合框架，它们被前端开发者广泛地使用。 如官方所介绍的那样，Lodash是一个具有一致接口、模块化、高性能的JavaScript工具库。一开始Lodash只是Underscore.js的一个fork，之后再原有的成功基础上取得了更大的成果，lodash的性能远远的超过了Underscore。因此，很多模块放弃了Un...
Lodash和Underscore工具
qq_25072517的博客
11-13 547
Lodash 是一套工具库，它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数，其中部分是目前 ECMAScript 尚未制定的规范，但同时被业界所认可的辅助函数。 Underscore 是一个 JavaScript 工具库，它提供了一整套函数式编程的实用功能，但是没有扩展任何 JavaScript 内置对象。 他解决了这个问题：“如果我面对一个空白的 HTML 页面，并希
js工具库Ramda和lodash和underscore用法对比
风烟
06-03 2391
lodash和underscore Lodash 作为 Underscore 的后继者，除了对 Underscore 现有 API 功能使用上进行扩充外，更是添加了不少令人难忘的 API，在性能上也更为出彩，而且还能根据需要构建自己的子集方法。所以他两推荐用lodash lodash和Ramda var _ = require("lodash"); var R = require("ramda"); var companies = [ { name: "tw", since: 1993 }, {
lodashpp:lodash (underscore.js) for C++14 的实现
06-26
在编程世界中，JavaScript库lodash(underscore.js)因其强大的实用工具函数而备受青睐，它为开发者提供了大量便捷的编程工具，简化了代码并提高了效率。现在，这个优秀的理念已经被移植到了C++14中，形成了名为...
JavaScript工具库之Lodash详解
10-16
Lodash由John-David Dalton创建，最初是对Underscore.js的改进，提供了更一致的跨浏览器行为，优化了性能，并且在功能和性能上超越了Underscore.js。 在Lodash中，一个显著的特点是它的延迟计算机制。这意味着当你...
JavaScript lodash常见用法系列小结
10-21
lodash最初是Underscore.js的一个分支，它由John-David Dalton创建，目的是为了提供一致的跨浏览器行为和性能上的优化。随着时间的发展，lodash逐渐发展壮大，并于2014年1月份发布了3.0版本，成为了一个功能更加丰富...
JavaScript工具库之Lodash详解.docx
07-06
Lodash 的 chain 方法也可以使得我们可以链式调用多个方法，而不需要担心性能问题，因为 Lodash 会延迟执行这些方法，直到我们调用 value() 方法时。 此外，Lodash 还提供了许多其他有用的函数，例如 sortBy、first...
underscore:Underscore的Shim存储库
05-02
Underscore的另一个著名分支是Lodash，它在Underscore的基础上增加了更多功能，并优化了性能。两者在大部分功能上是兼容的，但在选择使用时，可以根据具体需求和性能考虑。 四、实际应用与案例 4.1 在数据处理中，...
不懂JS的实用工具库Lodash，怎么敢说自己会JS ?
01-08
Lodash是一个可以提高开发者效率、提高原生JS方法性能的 JavaScript 第三方实用工具库； Lodash特点就是一致性、模块化、高性能。业界赫赫有名，其不需要引入其他第三方依赖，我们在使用的过程中可以直接调用Lodash帮我们封装好的方法；（其模块化特别适用于：创建符合功能的函数、遍历 array（数组）、object （对象）和 string（字符串）等） Lodash使用了一个简单的 _ 符号，十分简洁。 一、 引入Lodash 使用Lodash.js，有以下几种方式引入Lodash.js开发包： js离线文件引入：直接在Lodash中文网下载相关的lodash.js包，放在自
前端开源库-underscore-deep-extend
08-30
但请注意，这并不意味着它会合并数组中的元素，而是将两个数组的所有元素都添加到结果数组中。 除了基本的深度扩展功能，underscore-deep-extend可能还包含了一些优化和特性，如处理循环引用，防止无限递归，以及对...
functional-[removed]受 Haskell Prelude 模块启发，一些辅助函数
05-29
这里提到的"functional-[removed]"库就是这样一个例子，它受到了Haskell Prelude模块的启发，并结合了underscore.js和lodash等JavaScript实用库的设计，旨在为JavaScript带来更丰富的函数式编程工具。 **Haskell ...
How-underscore-works:展示 Underscore.js 可以做什么
07-02
虽然 Underscore.js 功能强大，但它并不是唯一的 JavaScript 辅助库。另一个类似的库是 Lodash，它与 Underscore.js 相似，但提供了更多的功能和优化。Lodash 通常被认为性能更好，但 Underscore.js 由于其简洁的 ...
lowdb:由Lodash支持的小型本地JSON数据库-开源
05-26
它支持浏览器Node并使用lodash API，因此学习非常简单。 实际上，如果您了解Lodash，那么您已经知道如何使用lowdb。 lowdb不支持集群，并且可能与非常大的JSON文件（约200MB）有关。 还可以在unpkg上使用UMD版本...
都听说过 lodash，但你会用吗？
小陈的博客
10-11 4344
Lodash 含有 Array, Collection, Date, Function, Lang, Math, Number, Object, String 等多个功能模块，总共几百个功能函数。官方文档上以字典顺序排序，不容易总结记忆。这里总结一些 ES6 不容易实现的实用功能。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。有需要的小伙伴，可以点击下方卡片领取，无偿分享。
lodash笔记（一）
weixin_33834628的博客
08-22 118
项目告一段落，孤独的北漂少年又回来了，这理可以宣泄一下我的情绪吗，fuckfuckfuck！ lodash是一个具有一致接口、模块化、高性能的JavaScript工具库。 一开始Lodash只是Underscore.js的一个fork，之后再原有的成功基础上取得了更大的成果，lodash的性能远远的超过了Underscore。 因此，很多模块放弃了Underscore转入Lodash的怀抱。...
jquery，underscore，lodash那些事儿
weixin_30617561的博客
12-31 238
一、参考链接 https://jquery.com/ https://en.wikipedia.org/wiki/JQuery https://developer.mozilla.org/zh-CN/docs/Glossary/jQuery http://underscorejs.org/ http://www.css88.com/doc/underscore/ http://java...
lodash和underscore
coffee3139564344的博客
06-21 1212
关系额 并没有查到二者有什么亲戚关系，都是js的工具库封装了很多很实用的方法。使用如果是npm安装就不说了，主要说一下如果是静态文件式的使用，就如同下载引入jQuery一样，需要将underscore或者lodash下载下来，那么问题来了，如何下载？是的，跑去两位的官网下载，第一次居然没下载到，下载链接点进去直接看到了赤裸裸的实现源码，我去，后来去underscore官网看一下，才知道要右键点击然
lodash.js下载
最新发布
07-19
其中 `path/to/lodash.js` 是你刚才下载 lodash.js 文件的路径。 现在，你就可以在你的项目中使用 lodash.js 提供的函数了。引入了 lodash.js 之后，可以通过 `_.`（underscore 是 lodash.js 的函数别名）来调用库...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值