都听说过 lodash，但你会用吗？

0. 导语

Lodash 是 JavaScript 社区最闻名的一个东西库，供应了许多高效、高兼容性的东西函数。

不过，跟着浏览器和 web 技术的开展，一些人初步反对在项目中运用 lodash。主要原因有：

ES6 之后拓展了 JavaScript 特性，许多功用不再需求额定东西库。
现代浏览器对 ES 语法的支撑性提高。
Babel 等编译东西能将 ES6 编译成 ES5，更高雅地解决了 ES6 语法的兼容性问题。
为了几个东西函数而引入了整个 lodash，增加了项目的体积。

本文来讨论一下，我们该不该在项目中运用 lodash，以及怎样正确运用 lodash。是的，这个看起来有点标题党的标题，有两层含义：

你会在项目中运用 lodash 吗？
你会正确地运用 lodash 吗？

1. 我们还需求 lodash 吗？

个人认为，应该优先运用 ES 原生语法，一起，在大部分项目中仍然举荐运用 lodash 作为拓展东西库。原因如下：

Lodash 不止 ES6，有更多 ES6 难以完结的功用，比如常见的深复制。
进步开发功率、简化代码。lodash 中的函数，都是社区开发者从多年的实践中提炼出来的常用功用，而且通过广泛的检测和优化，运用库函数往往比自己完结有更好的功用和鲁棒性。
Lodash 支撑多种模块化方案，合作 tree shaking 技术或许运用单独的函数模块，简直不会导致冗余代码。

不管怎样样，lodash 目前仍然坚持着 4 千多万的周下载了，就足以见得它的流行程度。

2. 仍是不想用 lodash ？

即便你坚持不肯运用 lodash，我认为仍然有必要了解 lodash 供应了哪些功用，这些功用你会常常在开发中遇到。这个时分，你可以从 You Don’t Need Lodash Underscore 中查看怎样运用原生语法完结。

3. Lodash 按需引入

最常见的引入 lodash 的方法是：

// 方法1：引入整个lodash方针
import _ from "lodash";
// 方法2：按名称引入特定的函数
import { cloneDeep } from "lodash";

这两种方法都会引入整个 lodash 库。Lodash 含有许多函数，项目里一般只会用到其间的小部分，为了避免引入不必要的代码，lodash 供应了多种支撑按需加载的方法。

A）运用打包插件完结按需加载（举荐）

插件 babel-plugin-lodash 和 lodash-webpack-plugin 可以在打包时去掉不必要的 lodash 代码，减小产品体积。

B）指用具体的功用模块

// 只引入 array 模块的功用
import array from "lodash/array";
// 只引入 cloneDeep 函数
import cloneDeep from "lodash/cloneDeep";

这种方法只会引入引证途径对应的模块，无需运用插件，也不会有冗余代码。缺陷是每个 import 句子只能引入一个函数，可能导致多个 import 句子。

C）运用单独的函数库

Lodash 为每个方法供应了单独的 npm 包，你可以只下载你想要的函数。

不举荐在项目中运用这种方法。首要，它并不像看起来相同轻量，lodash 中的公共代码会存在于每一个函数包中。其次，每个方法都是独立的依托包，意味着多次安装、多个 package.json 依托项、多个 node_modules 包目录。

4. 实用功用总结

Lodash 含有 Array, Collection, Date, Function, Lang, Math, Number, Object, String 等多个功用模块，总共几百个功用函数。官方文档上以字典顺序排序，不容易总结回想。这里总结一些 ES6 不容易完结的实用功用。

4.1. 字符串操作

4.1.1. 大小写转化

String.toLowerCase/toUpperCase 只能进行简单大小写转化，lodash 还供应了

_.lowerFirst(string);
_.upperFirst(string);
// 榜首个字符大写，其它字符小写
_.capitalize(string);

4.1.2. 命名风格转化

编程中，常见的多单词命名风格有：

蛇形写法（snake case）:单词之间用下划线联接，如 foo_bar。
烤肉串写法（kebab case）:单词之间运用横线联接,如 foo-bar。
驼峰写法（camel case）:从二个单词初步，每个单词的首字母大写,如 fooBar 。
大驼峰写法（pascal case）:每个单词首字母大写，如 FooBar。

除了大驼峰，其他三种风格都有对应的转化函数：

_.snakeCase(string);
_.kebabCase(string);
_.camelCase(string);
// 使用upperFirst和camelCase 完结 pascalCase
const pascalCase = (string) => _.upperFirst(_.camelCase(string));
// examples
_.snakeCase("fooBar"); // 'foo_bar'
_.camelCase("Foo Bar"); // 'fooBar'
_.kebabCase("__FOO_BAR__"); // 'foo-bar'

其他，还有两个不常用的全大写和全小写写法（以空格为分隔符），它们与 _.toLower/toUpper 的区别是会辨认并转化字符串中的分隔符。

_.lowerCase(string);
_.upperCase(string);
// examples
_.lowerCase("--Foo-Bar--"); // 'foo bar'
_.upperCase("fooBar"); // 'FOO BAR'

4.2. 算术与数字

算术运算：

// 求总和
_.sum(array);
// 求平均值
_.mean(array);

常用的数字操作：

// 回来一个[lower,upper]之间的随机数
// 假设lower和upper中有浮点数，或许floating为true，回来浮点数，否则，回来整数
_.random(lower=0,upper=1 [,floating])
// 生成一个规划数组
_.range([start=0,]end,step=1)
// 把一个数字就近约束在某个区间内
_.clamp(number,[lower=0,] upper)
// examples
_.clamp(-10, -5, 5);    // -5
_.clamp(10, -5, 5);    // 5

4.3. 数组操作

4.3.1. 集结运算

// 交集 intersection
_.intersection(...arrays);
_.intersectionWith(...arrays [, comparator]);
_.intersectionBy(...arrays [, iteratee]);
// 并集
_.union(...arrays);
_.unionWith(...arrays [, comparator]);
_.unionBy(...arrays [, iteratee]);
// 集结差，A - B 表明属于集结A但不属于集结B的元素集结
_.difference(array, ...operands);
_.differenceWith(array, ...operands [, comparator]);
_.differenceBy(array, ...operands [, iteratee]);

这三簇函数都不改动原本的数组，而是回来一个新的数组作为运算效果。其间，交并集的运算效果不含重复元素，集结差取决于榜首个集结。

函数命名具有一定的规约，以交集为例：

intersection: 实行惯例运算，选用浅比较判别元素是否持平。
intersectionWidth: 调用 comparator 函数进行元素比较，可以自定义比较方法。
intersectionBy: 每个元素先通过 iteratee 函数处理，对转化后的数组进行比较运算，终究以转化前的榜首个元素为效果。

_.intersection([2, 1, 1], [2, 3], [2, 4]);
//=>[2]
const objects = [
  { x: 1, y: 2 },
  { x: 2, y: 1 },
];
const others = [
  { x: 1, y: 1 },
  { x: 1, y: 2 },
];
_.intersectionWith(objects, others, _.isEqual);
//=>[{'x':1,'y':2}]  , 效果引证objects中的元素
_.intersectionBy([2.1, 1.2], [2.3, 3.4], [3.2, 2.4], Math.floor);
//=>[2.1]

4.3.2. 分片/分区/分组

分片（chunk）是指把数组中的每 n 个元素分为一组（一片），假设不能整除，终究剩下的元素单独一片。

_.chunk(array [, size=1])
// example
_.chunk(['a','b','c','d','e'],2);
// => [["a", "b"], ["c", "d"], ["e"]]

分区（partition）是使用一个断言函数迭代每个元素，根据断言的 true 和 false，把元素分红两组。

_.partition(collection [, predicate])
// example
_.partition([4,5,6,7],num=>num>5)
// =>[[6, 7], [4, 5]]

分组(group) 则是用一个函数遍历每个元素，得到的效果作为该元素地点组的 key，相同 key 元素归为同一组。

_.groupBy(collection [, iteratee])
// example
_.groupBy([6.1, 4.2, 6.3], Math.floor);
// => { '4': [4.2], '6': [6.1, 6.3] }

4.3.3. 有序数组查找/去重

在确保数组有序的情况下，查找和去重可以选用二分法，降低复杂度。Lodash 也供应了一些针对有序（升序）数组的操作。

sortedIndex / sortedLastIndex 可以操作根本的 number 数组和 string 数组：

// 回来刺进该元素后仍然能坚持数组有序的榜首个下标方位
_.sortedIndex(array, value);
// 类似 sortedIndex，但回来终究一个能坚持顺序的下标方位
_.sortedLastIndex(array, value);
// example
_.sortedIndex([1, 20, 20, 100, 500], 20); // 1
_.sortedLastIndex([1, 20, 20, 100, 500], 20); // 3

上面两个函数都只能在数字和字符串数组中运用，关于方针数组，可以用一个函数表明元素之间的排序根据：

// 以 iteratee 转化后的效果排序
_.sortedIndexBy(array, value [, iteratee])
_.sortedLastIndexBy(array, value [, iteratee])
// example
_.sortedIndexBy([{ 'x': 4 }, { 'x': 5 }], { 'x': 4 }, function(o) { return o.x; });
// => 0

留心，sortedIndex/sortedLastIndex 并不能直接用于元素查找，比如上面回来下标 3，但 array[3] 是 100 而不是 20。

有序数组查找用 sortedIndexOf/sortedLastIndexOf，它的功用与 indexOf/lastIndexOf 相同，不过选用了二分查找。

_.sortedIndexOf(array, value);
_.sortedLastIndexOf(array, value);
// example
_.sortedIndexOf([4, 5, 5, 5, 6], 5); //1

sortedUniq/sortedUniqBy 可以对有序数组去重。

_.sortedUniq(array)
_.sortedUniqBy(array [, iteratee])
// example
_.sortedUniqBy([1.1, 1.2, 2.3, 2.4], Math.floor);
// => [1.1, 2.3]

4.3.4. 元素操作：取样/打乱/计数

// 随机回来一个元素
_.sample(collection)
// 随机回来n个元素
_.sampleSize(collection, [n=1])
// 打乱数组
_.shuffle(collection)
// 计数
_.countBy(collection [, iteratee])
_.countBy([6.1, 4.2, 6.3], Math.floor);
// => { '4': 1, '6': 2 }

4.4. 方针操作

4.4.1. 方针转化

开发中常常需求从已有方针改造，得到我们期望的结构。Lodash 中有许多函数可以派上用场：

// 克隆
_.clone(value);
_.cloneWith(value, customizer);
_.cloneDeep(value);
_.cloneDeepWith(value, customizer);
// 同 Object.assign,把 sources 方针中的自有特色赋值到 object 中
_.assign(object, ...sources);
// 转化后赋值
_.assignWith(_.assignWith(object, sources, customizer));
// 类似_.assign, 但会赋值承继特色
_.assignIn(object, ...sources);
_.assignInWith(object, ...sources, customizer);
// 当object中不存在值时，才会赋值，常常用于兼并默许值
_.defaults(object, ...sources);
// _.default 不适用多层方针，需求运用_.defaultsDeep
_.defaultsDeep(object, ...sources);
// 兼并方针，类似 _.assign,但方针会递归深化，数组会被拼接
_.merge(object, ...sources);
_.mergeWith(object, ...sources);

留心，上面这些函数都会直接修改 object 参数。

与此不同，pick 和 omit 操作则回来新方针，不修改参数：

// 从方针中取出对应途径的值，组成一个新方针
_.pick(object, [paths]);
// 用一个断言函数决议要不要取这个特色，predicate(value,key)
_.pickBy(object, predicate);
// 去掉指定特色，把余下部分组成一个新方针，功用差于 pick
_.omit(object, [paths]);
_.omitBy(object, predicate);
// examples
_.pick({ a: 1, b: "2", c: 3 }, ["a", "c"]);
// => { 'a': 1, 'c': 3 }
_.pickBy({ a: 1, b: "2", c: 3 }, _.isNumber);
// => { 'a': 1, 'c': 3 }
_.omit({ a: 1, b: "2", c: 3 }, ["a", "c"]);
// => { 'b': '2' }

其他，方针还能像数组相同进行 map ：

// iteratee(value,key,obj) 回来的效果作为新方针的key
_.mapKeys(object, iteratee);
// iteratee(value,key,obj) 回来的效果作为新方针的value
_.mapValues(object, iteratee);
// example
_.mapKeys({ a: 1, b: 2 }, function (value, key) {
  return key + value;
});
// => { 'a1': 1, 'b2': 2 }

4.4.2. 遍历方针

// 遍历自有特色，类似 for...in 加 hasOwnProperty判别。
_.forOwn(object, iteratee);
// 查找符合条件的key，类似数组的findIndex
_.findKey(object, iteratee);
_.findLastKey(object, iteratee);
// 查找方针中的函数特色
_.functions(object);
_.functionsIn(object);

4.4.3. 安全的 get/set

在 JavaScript 中，读取和设置某一个途径下的值，是不安全的：

const object={a:1};
const=object.b.someKey;   // TypeError: Cannot read properties of undefined
object.c.someKey=v;       // TypeError: Cannot set properties of undefined

Lodash 为我们供应了更安全的 get 和 set 操作：

// 当path对应的值不存在时，回来undefined，而不是报错。
_.get(object,path [, defaultValue]);
// 一层层set,而不是报错
_.set(object,path,value);
// 根据该途径现在的value，更新为updater回来后的值,updater(value)=>newValue
_.update(object,path,updater)

虽然最近的可选链 “?.” 语法能替代 get 函数，但 set 操作仍然没有较好的原生支撑。

4.5. 函数操作

4.5.1. 控制函数实行

有时分，我们期望在特定条件下函数才实行，比如常见的防抖和节约：

防抖(debounce)：当函数调用时，等候一段时间再实行实际操作（内部函数），假设这段时间内函数再次被调用，则本次调用不实行实际操作，新调用从头初步等候。
节约(throttle)：一段时间内多次调用函数，只实行一次实际操作。

_.debounce(func [, wait=0] [, options={}])
_.throttle(func [, wait=0] [, options={}])
// examples
// 只会在停住之后从头布局
window.addEventListener('resize', _.debounce(calculateLayout, 150));
// 会继续更新方位，但150ms更新一次，避免卡顿
window.addEventListener('resize', _.throttle(updatePosition, 150));

也可以根据调用次数控制是否实行操作。

// 函数只调用一次
_.once(func);
// 只在前n次调用
_.before(func, n);
// 只在n次之后才调用
_.after(func, n);

推迟实行：

// 在本次调用仓库被清空后实行
_.defer(func, ...args);
// 等候wait ms 后实行，同setTimeout
_.delay(func, wait, ...args);

_.memorize 能缓存函数效果，避免重复核算，是一种常见的功用优化手法。

// resolver用于核算缓存key，当key相一起，运用缓存。默许运用func的榜首个参数为key
_.memorize(func [, resolver])

4.5.2. 函数参数转化

// 柯里化
_.curry(func, (arity = func.length));
// 绑定部分参数，但不绑定this
_.partial(func, ...args);
// 只接收前n个参数，忽略额定参数
_.ary(func, n);
// 只接收榜首个参数,同 _.ary(func,1)
_.unary(func);

4.6. 通用东西

流水线：

_.flow([funcs]);
const pascalCase = _.flow(_.upperFirst, _.camelCase);

生成一个仅有 ID：

_.uniqueId((prefix = ""));

参阅

Why the name ‘underscore’ or ‘lodash’? – Stack Overflow
javascript – Correct way to import lodash – Stack Overflow
Lodash cheatsheet

都听说过 lodash，但你会用吗？

0. 导语

1. 我们还需求 lodash 吗？

2. 仍是不想用 lodash ？

3. Lodash 按需引入

A）运用打包插件完结按需加载（举荐）

B）指用具体的功用模块

C）运用单独的函数库

4. 实用功用总结

4.1. 字符串操作

4.1.1. 大小写转化

4.1.2. 命名风格转化

4.2. 算术与数字

4.3. 数组操作

4.3.1. 集结运算

4.3.2. 分片/分区/分组

4.3.3. 有序数组查找/去重

4.3.4. 元素操作：取样/打乱/计数

4.4. 方针操作

4.4.1. 方针转化

4.4.2. 遍历方针

4.4.3. 安全的 get/set

4.5. 函数操作

4.5.1. 控制函数实行

4.5.2. 函数参数转化

4.6. 通用东西

参阅

评论

发表回复取消回复

更多文章

评估基准在人工智能研究中的重要性

Nop入门：动态SQL管理

Android gralde 脚本迁移到 Kotlin DSL

AST-GREP：基于语法和语义的代码搜索与替换，你需要了解一下！

都听说过 lodash，但你会用吗？

0. 导语

1. 我们还需求 lodash 吗？

2. 仍是不想用 lodash ？

3. Lodash 按需引入

A）运用打包插件完结按需加载（举荐）

B）指用具体的功用模块

C）运用单独的函数库

4. 实用功用总结

4.1. 字符串操作

4.1.1. 大小写转化

4.1.2. 命名风格转化

4.2. 算术与数字

4.3. 数组操作

4.3.1. 集结运算

4.3.2. 分片/分区/分组

4.3.3. 有序数组查找/去重

4.3.4. 元素操作：取样/打乱/计数

4.4. 方针操作

4.4.1. 方针转化

4.4.2. 遍历方针

4.4.3. 安全的 get/set

4.5. 函数操作

4.5.1. 控制函数实行

4.5.2. 函数参数转化

4.6. 通用东西

参阅

评论

发表回复 取消回复

更多文章

评估基准在人工智能研究中的重要性

Nop入门：动态SQL管理

Android gralde 脚本迁移到 Kotlin DSL

AST-GREP：基于语法和语义的代码搜索与替换，你需要了解一下！

发表回复取消回复