Lodash -岩石教程

Lodash 主要特性

一致性：Lodash 的 API 设计非常一致，函数命名和参数顺序都遵循统一的规范。
模块化：Lodash 提供了模块化的构建，可以按需引入特定的函数，减少代码体积。
高性能：Lodash 进行了大量优化，确保函数在不同环境下都能高效运行。
丰富的功能：Lodash 提供了超过 300 个函数，涵盖数组操作、对象操作、字符串操作、函数式编程、集合处理等。

Lodash 安装

可以通过 npm 或 yarn 安装 Lodash：

npm install lodash

Lodash 常用函数示例

1. 数组操作

_.chunk

将数组分成指定大小的块：

const _ = require('lodash');
const array = [1, 2, 3, 4, 5, 6, 7];
const chunks = _.chunk(array, 3);
console.log(chunks); // [[1, 2, 3], [4, 5, 6], [7]]

_.difference

创建一个具有唯一值的数组，这些值在第一个数组中不包含在其他给定的数组中：

const array1 = [1, 2, 3, 4];
const array2 = [2, 4];
const difference = _.difference(array1, array2);
console.log(difference); // [1, 3]

2. 对象操作

_.assign

将源对象的所有可枚举属性分配到目标对象上：

const object = { a: 1 };
const source = { b: 2, c: 3 };
const result = _.assign(object, source);
console.log(result); // { a: 1, b: 2, c: 3 }

_.get

获取对象的属性值，如果属性不存在则返回默认值：

const object = { a: { b: { c: 3 } } };
const value = _.get(object, 'a.b.c', 'default');
console.log(value); // 3

3. 字符串操作

_.camelCase

将字符串转换为 camelCase 格式：

const result = _.camelCase('Foo Bar');
console.log(result); // 'fooBar'

_.kebabCase

将字符串转换为 kebab-case 格式：

const result = _.kebabCase('Foo Bar');
console.log(result); // 'foo-bar'

4. 函数操作

_.debounce

创建一个防抖动函数，该函数会在等待一定时间后调用：

const saveInput = _.debounce((input) => {
  console.log('Saving data', input);
}, 300);
document.querySelector('input').addEventListener('input', (event) => {
  saveInput(event.target.value);
});

_.throttle

创建一个节流函数，该函数在一定时间内只会执行一次：

const log = _.throttle(() => {
  console.log('Log message');
}, 1000);
setInterval(log, 100); // 每隔一秒打印一次日志

5. 集合操作

_.map

创建一个新数组，其值为传入函数处理过的集合中的每个元素：

const users = [{ 'user': 'barney' }, { 'user': 'fred' }];
const names = _.map(users, 'user');
console.log(names); // ['barney', 'fred']

_.filter

遍历集合元素，返回所有通过函数真值检测的元素数组：

const users = [
  { 'user': 'barney', 'active': true },
  { 'user': 'fred', 'active': false },
];
const activeUsers = _.filter(users, { 'active': true });
console.log(activeUsers); // [{ 'user': 'barney', 'active': true }]

Lodash