前端lodash库原来这么好用，一行代码使用防抖节流，不用再去设置复杂变量

Lodash 介绍

Lodash 是一个 JavaScript 工具库，提供了大量实用的函数来处理常见的编程任务，如数组、对象、字符串等的操作。它的设计目标是提高代码的可读性和可维护性，同时提供更好的性能和兼容性。

1. 丰富的功能

• 提供了超过 300 个方法，涵盖了数组、对象、字符串、函数、日期等多种数据类型的处理。
• 常见的方法包括 .map、.filter、.reduce、.get、.debounce、.throttle 等。
  1. 高性能
  • 经过优化，许多方法的性能优于原生 JavaScript 实现。
  • 提供了多种优化策略，如缓存、惰性计算等。

    ## 安装 Lodash

    2.使用 npm 安装 或者 使用 yarn 安装

    npm install lodash
    yarn add lodash
    

    2.导入 Lodash

    • 全局引入

      import _ from 'lodash';  // 在 main.js 中全局引入
      const doubled = _.map(numbers, n => n * 2);
      

      • 按需引入

        import { map, filter, reduce } from 'lodash'; // 按需引入
        const squared = map(numbers, n => n * n);
        

        3. Lodash 中最常用的 10 个方法

        • _.map

          遍历数组并返回一个新的数组，其中每个元素都是调用提供的函数后的结果。

          const numbers = [1, 2, 3, 4, 5];
          const doubled = _.map(numbers, n => n * 2);
          console.log(doubled); // 输出: [2, 4, 6, 8, 10]
          

          ---

          • _.filter

            过滤数组中的元素，返回满足条件的元素组成的数组。

            const numbers = [1, 2, 3, 4, 5];
            const evenNumbers = _.filter(numbers, n => n % 2 === 0);
            console.log(evenNumbers); // 输出: [2, 4]
            

            ---

            • _.reduce

              对数组中的每个元素执行一个 reducer 函数，将其结果汇总为单个输出值

              const numbers = [1, 2, 3, 4, 5];
              const sum = _.reduce(numbers, (acc, n) => acc + n, 0);
              console.log(sum); // 输出: 15
              

              ---

              • _.get

                安全地获取嵌套对象的属性值。

                const user = {
                  name: 'John Doe',
                  address: {
                    city: 'New York',
                    zip: '10001'
                  }
                };
                const city = _.get(user, 'address.city', 'Unknown');
                console.log(city); // 输出: New York
                const state = _.get(user, 'address.state', 'Unknown');
                console.log(state); // 输出: Unknown
                

                ---

                • _.debounce

                  防抖函数，限制函数在一定时间内的调用频率。

                  const log = _.debounce(() => console.log('Button clicked'), 300);
                  document.getElementById('myButton').addEventListener('click', log);
                  

                  ---

                  • _.throttle

                    节流函数，确保函数在指定的时间间隔内最多执行一次

                    const log = _.throttle(() => console.log('Scroll event'), 1000);
                    window.addEventListener('scroll', log);
                    

                    ---

                    • _.assign

                      将源对象的所有可枚举属性复制到目标对象。

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

                      ---

                      • _.pick

                        创建一个新对象，只包含指定的属性。

                        const object = { 'a': 1, 'b': 2, 'c': 3 };
                        const picked = _.pick(object, ['a', 'c']);
                        console.log(picked); // 输出: { 'a': 1, 'c': 3 }
                        

                        ---

                        • _.isEqual

                          比较两个值是否相等，支持深度比较。

                          const object = { 'a': 1 };
                          const other = { 'a': 1 };
                          const areEqual = _.isEqual(object, other);
                          console.log(areEqual); // 输出: true
                          

                          ---

                          • _.uniq

                            去除数组中的重复元素。

                            const numbers = [1, 2, 1, 3, 2, 4];
                            const uniqueNumbers = _.uniq(numbers);
                            console.log(uniqueNumbers); // 输出: [1, 2, 3, 4]
                            

                            ---

                            
                            （图片来源网络，侵删）
                            
                            （图片来源网络，侵删）
                            
                            （图片来源网络，侵删）