美文网首页
lodash-实用库及常用方法

lodash-实用库及常用方法

作者: htzyl206 | 来源:发表于2023-09-10 19:27 被阅读0次

在项目开发中,用的比较多的是lodash的JavaScript实用库

lodash是一个强大的JavaScript库,提供了许多实用方法,可以处理数组、对象和字符串等数据类型。它具有模块化、性能高效、稳定可靠、灵活易用等特点。

以下是lodash库中比较常用的方法:

  1. chunk():将数组(array)拆分成多个指定长度的区块,并将这些区块组成一个新数组。例如:

    let array = [1, 2, 3, 4, 5, 6];
    let chunked = _.chunk(array, 2); 
    // [[1, 2], [3, 4], [5, 6]]
    
  2. debounce():在执行回调函数之前,延迟执行该函数。常用于处理重复的实时事件,防止回调函数的频繁触发。

    function savePreferences() {  
        // code to save preferences
    }
    let save = _.debounce(savePreferences, 1000);
    // Set the preference and debounced function is called after 1 second with the preference value.save('my preference');
    
  3. isObject():判断某个值是否为对象。

    let isObject = _.isObject({}); // true
    let isNotObject = _.isObject('string'); // false
    
  4. isNaN():判断某个值是否为NaN。

    isNaN函数用于检查一个值是否为“非数字”值。这意味着它可以用来检测一个值是否是NaN(Not a Number),或者是一个可以被解释为有效数字的其他非数字值。

    const _ = require('lodash');
    
    console.log(_.isNaN(NaN));               // 输出: true
    console.log(_.isNaN(0));                  // 输出: false
    console.log(_.isNaN(''));                 // 输出: false
    console.log(_.isNaN('123'));               // 输出: false
    console.log(_.isNaN([1, 2, 3]));           // 输出: false
    console.log(_.isNaN({ a: 1, b: 2 }));      // 输出: false
    console.log(_.isNaN(null));               // 输出: false
    console.log(_.isNaN(undefined));          // 输出: false
    
  5. isUndefined():判断某个值是否为undefined。

    const _ = require('lodash');
    
    let value1, value2, value3;
    
    console.log(_.isUndefined(value1));  *// 输出: true*
    console.log(_.isUndefined(value2));  *// 输出: false*
    console.log(_.isUndefined(value3));  *// 输出: true*
    
  6. map():创建一个新数组,数组中的元素是通过调用提供的函数在原始数组上产生的结果。

    let array = [1, 2, 3];
    let doubled = _.map(array, function(num) { return num * 2; }); 
    // [2, 4, 6]
    
  7. get():获取对象指定属性的值。

    它允许你通过指定的路径获取对象的属性。如果路径不存在,则返回undefined

    const _ = require('lodash');
    
    let object = {
      a: {
        b: {
          c: 3
        }
      }
    };
    
    console.log(_.get(object, 'a.b.c')); // 输出 3
    console.log(_.get(object, 'a.b.d')); // 输出 undefined
    console.log(_.get(object, 'a.e')); // 输出 undefined
    
  8. set():设置对象指定属性的值。

    set函数是用于在对象中设置指定路径的属性值。如果路径不存在,则会自动创建。

    const _ = require('lodash');
    
    let object = {
      a: {
        b: {
          c: 3
        }
      }
    };
    
    _.set(object, 'a.b.c', 4); // 设置路径'a.b.c'的属性值为4
    console.log(object); // 输出 { a: { b: { c: 4 } } }
    
    _.set(object, 'a.b.d', 5); // 设置路径'a.b.d'的属性值为5,如果不存在会创建路径
    console.log(object); // 输出 { a: { b: { c: 4, d: 5 } } }
    
  9. isEqual():深度比较两个对象是否相等。

    isEqual函数用于比较两个对象或值是否相等。它使用严格比较(deep comparison)来检查对象和数组中的值,并且会处理循环引用。

    const _ = require('lodash');
    
    let object1 = { a: 1, b: { c: 2 } };
    let object2 = { a: 1, b: { c: 2 } };
    let object3 = { a: 1, b: { c: 3 } };
    
    console.log(_.isEqual(object1, object2));  // 输出: true
    console.log(_.isEqual(object1, object3));  // 输出: false
    
  10. isEmpty():判断一个对象是否为空。

    isEmpty函数用于检查一个对象(数组、字符串、对象等)是否为空。

    const _ = require('lodash');
    
    let array1 = [];
    let array2 = [1, 2, 3];
    let object1 = {};
    let object2 = { a: 1, b: 2 };
    let string1 = '';
    let string2 = 'abc';
    
    console.log(_.isEmpty(array1));      // 输出: true
    console.log(_.isEmpty(array2));      // 输出: false
    console.log(_.isEmpty(object1));     // 输出: true
    console.log(_.isEmpty(object2));     // 输出: false
    console.log(_.isEmpty(string1));     // 输出: true
    console.log(_.isEmpty(string2));     // 输出: false
    
  1. sortBy(): 方法可以按照指定的条件对数组进行排序。

    let people = [ 
        { 'name': 'John', 'age': 30 }, 
        { 'name': 'Jane', 'age': 25 }, 
        { 'name': 'Mike', 'age': 35 }
    ];
    let sortedPeople = _.sortBy(people, ['age', 'name']);
    console.log(sortedPeople);
    // [{ name: 'Jane', age: 25 }, { name: 'John', age: 30 }, { name: 'Mike', age: 35 }]
    

    在上面的例子中,我们首先定义了一个people数组,然后使用sortBy方法按照agename进行排序。sortBy方法接受两个参数,第一个参数是需要排序的数组,第二个参数是一个字符串或数组,用于指定排序的条件。如果第二个参数是字符串,则按照该字符串代表的属性进行排序;如果第二个参数是数组,则先按照第一个元素指定的属性进行排序,然后按照第二个元素指定的属性进行排序。

    需要注意的是,sortBy方法默认按照升序排序,如果需要按照降序排序,可以传入第三个参数为true

  2. union()函数用于合并多个数组,并去除重复项

    // 导入lodash库
    const _ = require('lodash');
    
    // 创建数组
    const array1 = [1, 2, 3];
    const array2 = [3, 4, 5];
    const array3 = [5, 6, 7];
    
    // 使用union函数合并数组并去除重复项
    const result = _.union(array1, array2, array3);
    
    // 输出结果
    console.log(result); // [1, 2, 3, 4, 5, 6, 7]
    
  3. intersection()函数用于获取数组的交集

    // 导入lodash库
    const _ = require('lodash');
    
    // 创建数组
    const array1 = [1, 2, 3];
    const array2 = [3, 4, 5];
    const array3 = [5, 6, 7];
    
    // 使用intersection函数获取数组的交集
    const result = _.intersection(array1, array2, array3);
    
    // 输出结果
    console.log(result); // [3]
    
  4. difference()函数用于从第一个数组中移除所有在其他数组中的元素

    // 导入lodash库
    const _ = require('lodash');
    
    // 创建数组
    const array1 = [1, 2, 3, 4, 5];
    const array2 = [3, 4];
    const array3 = [4, 5];
    
    // 使用difference函数从array1中移除所有在array2和array3中的元素
    const result = _.difference(array1, array2, array3);
    
    // 输出结果
    console.log(result); // [1]
    
  5. pluck()从对象中获取给定键的值

    const people = [{'name': 'Bob', 'age': 36}, {'name': 'Alice', 'age': 30}];
    const names = _.pluck(people, 'name'); // ['Bob', 'Alice']
    
  6. invoke()这个函数用于调用对象中的方法。这对于处理包含方法的对象非常有用。

    const person = {
      name: 'John',
      age: 30,
      greet: function() {
        console.log('Hello!');
      }
    };
    _.invoke(person, 'greet'); // "Hello!"
    
  7. assign()这个函数用于将对象的属性复制到另一个对象。这是一个非常有用的函数,用于合并对象。

    const obj1 = { a: 1 };
    const obj2 = { b: 2 };
    const merged = _.assign({}, obj1, obj2); // { a: 1, b: 2 }
    
  8. cloneDeep()这个函数用于深度克隆一个对象。这对于处理复杂对象和避免引用问题非常有用

    const obj = { a: 1, b: { c: 2 } };
    const cloned = _.cloneDeep(obj); // { a: 1, b: { c: 2 } }
    

以上仅是 Lodash 的一些常用库和函数示例,还有很多其他的实用工具和函数可以帮助开发人员解决各种编程问题。

相关文章

网友评论

      本文标题:lodash-实用库及常用方法

      本文链接:https://www.haomeiwen.com/subject/ergsvdtx.html