JS中Lodash工具库（秒懂如何使用Lodash并手写精简版Lodash）

目录

一、Lodash介绍

1.Lodash的概念

2.Lodash的特点

3.Lodash的主要功能

二、Lodash的使用与实例

安装 Lodash

导入 Lodash

使用 Lodash

初体验

1. 数组操作

2. 对象操作

3. 函数操作

4. 集合操作

5. 数字操作

6. 字符串操作

7. 实例：使用 Lodash 对数组进行求和、过滤偶数、排序，以及对对象进行获取键值、深拷贝等操作。

三、Lodash的应用

一、Lodash介绍

1.Lodash的概念

    Lodash 是一个现代化的 JavaScript 实用工具库，提供了大量的实用函数，旨在简化 JavaScript 编程的复杂性。它由 John-David Dalton 创建，并且广受 JavaScript 社区的欢迎和认可。

2.Lodash的特点

1. 高性能： Lodash 专注于提供高性能的函数，它们经过优化以在各种 JavaScript 运行环境中提供最佳性能。
2. 模块化： Lodash 提供了模块化的架构，可以按需导入需要的函数，从而减小项目的体积。
3. 广泛的功能： Lodash 提供了丰富的功能集，涵盖了数组、对象、函数、集合、字符串、日期等多个方面，可以满足各种编程需求。
4. 跨浏览器兼容性： Lodash 在各种现代浏览器和 Node.js 等 JavaScript 运行环境中都能正常工作，并提供了对 ES6+ 特性的良好支持。
5. 易于学习和使用： Lodash 的 API 设计简洁清晰，易于学习和记忆，可以大大提高 JavaScript 编程的效率。

3.Lodash的主要功能

1. 数组操作： 包括对数组进行迭代、过滤、映射、排序、查找等操作。
2. 对象操作： 包括对对象进行遍历、获取键值对、合并、深拷贝等操作。
3. 函数操作： 包括创建柯里化函数、部分应用函数、防抖节流等高级函数操作。
4. 集合操作： 包括对集合进行过滤、排序、查找等操作。
5. 字符串操作： 包括对字符串进行格式化、截取、转换大小写等操作。
6. 日期操作： 包括日期格式化、计算日期间隔、日期比较等操作。

二、Lodash的使用与实例

安装 Lodash

你可以通过 npm 或者 yarn 来安装 Lodash：

npm install lodash
# 或者
yarn add lodash

也可以通过本地lodash库Lodash 简介 | Lodash中文文档 | Lodash中文网 查看官方文档

导入 Lodash

在你的 JavaScript 代码中导入 Lodash：

const _ = require('lodash');

使用 Lodash

Lodash 提供了丰富的工具函数，涵盖了数组、对象、函数、集合等多个方面。以下是一些常用的示例：

初体验

// 1.打印一下
console.log("%O",_)
console.log(_.VERSION) //查看lodash的版本号
console.log(_.join([2023,11,13],'-'))

1. 数组操作

const array = [1, 2, 3, 4, 5];

// 获取数组的第一个元素
const firstElement = _.head(array);

// 获取数组的最后一个元素
const lastElement = _.last(array);

// 数组元素求和
const sum = _.sum(array);

// 数组元素平均值
const mean = _.mean(array);

2. 对象操作

const obj = {a: 1, b: 2, c: 3};

// 获取对象的所有键
const keys = _.keys(obj);

// 获取对象的所有值
const values = _.values(obj);

// 深拷贝对象
const newObj = _.cloneDeep(obj);



var user = {
    name: 'liujun',
    age: '17',
    height: '1.66',
    friends: [
        'Evan',
        'John',
        'Mark',
        'Jack',
        'David'
    ]
}

//1.Object.assign
// console.log(_.pick(user,['name','friends']))
// console.log(_.omit(user,['name','friends']))

console.log(_.clone(user))
console.log(_.cloneDeep(user))//shenkaobei

3. 函数操作

function greet(name) {
  return `Hello, ${name}!`;
}

// 创建一个带有固定参数的函数
const greetBob = _.partial(greet, 'Bob');

console.log(greetBob()); // 输出: Hello, Bob!

4. 集合操作

const numbers = [1, 2, 3, 4, 5];

// 过滤出所有偶数
const evens = _.filter(numbers, num => num % 2 === 0);

// 查找第一个符合条件的元素
const firstEven = _.find(numbers, num => num % 2 === 0);

5. 数字操作

//1.获取随机数
console.log(_.random(5)) //0-5
console.log(_.random(5,10)) //5-10

6. 字符串操作

//1.将字符串转化成驼峰命名
console.log(_.camelCase('foo bar'))
console.log(_.camelCase('---foo bar----'))

console.log(_.capitalize('foobar'))
console.log(_.endsWith('logo.png','.png'))
console.log(_.padStart('1',2,'0')) //1-> 01

7. 实例：使用 Lodash 对数组进行求和、过滤偶数、排序，以及对对象进行获取键值、深拷贝等操作。

// 导入 Lodash
const _ = require('lodash');

// 创建一个数组
const numbers = [1, 2, 3, 4, 5];

// 使用 Lodash 操作数组
const sum = _.sum(numbers); // 求和
const evens = _.filter(numbers, num => num % 2 === 0); // 获取偶数
const sortedNumbers = _.sortBy(numbers); // 对数组进行排序

// 输出结果
console.log('数组:', numbers);
console.log('数组求和:', sum);
console.log('偶数:', evens);
console.log('排序后的数组:', sortedNumbers);

// 创建一个对象
const person = {
  name: 'Alice',
  age: 30,
  city: 'New York',
};

// 使用 Lodash 操作对象
const keys = _.keys(person); // 获取所有键
const values = _.values(person); // 获取所有值
const clonedPerson = _.cloneDeep(person); // 深拷贝对象

// 输出结果
console.log('对象:', person);
console.log('对象所有键:', keys);
console.log('对象所有值:', values);
console.log('深拷贝后的对象:', clonedPerson);

三、Lodash的应用

Lodash 在实际应用中有着广泛的用途，它提供了许多实用的函数和方法，可以大大简化 JavaScript 编程中的复杂性。下面列举了一些 Lodash 在实际应用中的常见用途：

1. 数据操作： Lodash 提供了丰富的数组和对象操作方法，包括过滤、映射、排序、查找、合并、拆分等，能够极大地简化数据处理的逻辑。

2. 函数式编程： Lodash 提供了一系列函数式编程的工具函数，如柯里化、偏应用、组合等，使得函数的组合和复用更加简单和灵活。

3. 异步编程： Lodash 提供了一些实用的异步编程工具函数，如 _.debounce、_.throttle 等，能够帮助开发者处理异步操作的流程控制和性能优化。

4. 集合操作： Lodash 提供了一些集合操作的工具函数，如对集合进行过滤、排序、分组、求交集、并集、差集等，能够方便地处理集合数据。

5. 字符串操作： Lodash 提供了一些字符串操作的工具函数，如格式化、截取、转换大小写、去除空格等，能够简化字符串处理的代码。

6. 日期操作： Lodash 提供了一些日期操作的工具函数，如格式化、计算日期间隔、日期比较等，能够方便地处理日期时间相关的逻辑。

7. 类型检查： Lodash 提供了一些类型检查的工具函数，如检查是否是数组、对象、函数等，能够帮助开发者进行类型安全的编程。

8. 函数工具： Lodash 提供了一些函数工具，如函数绑定、节流、防抖等，能够帮助开发者优化函数的执行和性能。

四、手写精简版Lodash工具库

(function(g) {
    function Lodash() {}

    // 添加类方法
    Lodash.VERSION = '1.0.0';
    
    // 将数组元素连接成字符串
    Lodash.join = function(arr, separator) {
        return arr.join(separator);
    }

    // 函数节流
    Lodash.throttle = function(func, wait) {
        let timeout;
        return function(...args) {
            const context = this;
            if (!timeout) {
                func.apply(context, args);
                timeout = setTimeout(() => {
                    timeout = null;
                }, wait);
            }
        }
    }

    // 函数防抖
    Lodash.debounce = function(func, wait) {
        let timeout;
        return function(...args) {
            const context = this;
            clearTimeout(timeout);
            timeout = setTimeout(() => {
                func.apply(context, args);
            }, wait);
        }
    }

    // 生成一个指定范围内的随机数
    Lodash.random = function(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    // 检查字符串是否以指定字符串结尾
    Lodash.endsWith = function(str, target) {
        return str.endsWith(target);
    }

    // 浅拷贝对象或数组
    Lodash.clone = function(source) {
        if (Array.isArray(source)) {
            return source.slice();
        } else if (typeof source === 'object' && source !== null) {
            return Object.assign({}, source);
        } else {
            return source;
        }
    }

    // 深拷贝对象或数组
    Lodash.cloneDeep = function(source) {
        return JSON.parse(JSON.stringify(source));
    }

    // 合并多个对象或数组
    Lodash.merge = function(...sources) {
        return Object.assign({}, ...sources);
    }

    // 将多个对象的属性合并到第一个对象
    Lodash.assign = function(target, ...sources) {
        return Object.assign(target, ...sources);
    }

    // 将 Lodash 对象挂载到全局对象上
    g._ = Lodash;
})(this);