526互联

lodash介绍

发布时间 2023-12-10 21:39:35作者: 一路繁花似锦绣前程

目录

1、简介

  • 安装
# es-module支持tree-shaking
npm i --save lodash-es
# 源码阅读
# 柯里化
# 你不需要lodash：https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore
# Array高阶函数
# js高阶语法

2、字符串操作

  • 大小写转换
/**
 * String.toLowerCase/toUpperCase 只能进行简单大小写转换，lodash 还提供了
 */
_.lowerFirst(string);
_.upperFirst(string);
// 第一个字符大写，其它字符小写
_.capitalize(string);
  • 命名风格转换
/**
 * 编程中，常见的多单词命名风格有：
 *     蛇形写法（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'

3、算术与数字

/**
 * 算术运算：
 */
// 求总和
_.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、数组操作

  • 集合运算
// 交集 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]
  • 分片/分区/分组
/**
 * 分片（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] }
  • 有序数组查找/去重
/**
 * 在保证数组有序的情况下，查找和去重可以采用二分法，降低复杂度。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]
  • 元素操作：取样/打乱/计数
// 随机返回一个元素
_.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 }

5、对象操作

  • 对象转换
/**
 * 开发中经常需要从已有对象改造，得到我们期望的结构。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 }
  • 遍历对象
// 遍历自有属性，类似 for...in 加 hasOwnProperty判断。
_.forOwn(object, iteratee);

// 查找符合条件的key，类似数组的findIndex
_.findKey(object, iteratee);
_.findLastKey(object, iteratee);

// 查找对象中的函数属性
_.functions(object);
_.functionsIn(object);
  • 安全的 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 操作依然没有较好的原生支持。
 */

6、函数操作

  • 控制函数执行
/**
 * 有时候，我们希望在特定条件下函数才执行，比如常见的防抖和节流：
 *     防抖(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])
  • 函数参数转换
// 柯里化
_.curry(func, (arity = func.length));
// 绑定部分参数，但不绑定this
_.partial(func, ...args);

// 只接收前n个参数，忽略额外参数
_.ary(func, n);
// 只接收第一个参数,同 _.ary(func,1)
_.unary(func);

7、通用工具

/**
 * 流水线：
 */
_.flow([funcs]);

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

/**
 * 生成一个唯一 ID：
 */
_.uniqueId((prefix = ""));