[JavaScript知识库]vue+js 中使用 lodash 的几种常用方法

vue+js 中引入 lodash

1、深拷贝

var objects = [{ 'a': 1 }, { 'b': 2 }];
 
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

在前端文件中引入：

import _ from 'lodash';

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cz2SOClI-1638972104030)(E:\笔记\image-20210828155651161.png)]

简介：Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
Lodash 中集成了很多方法，安全可靠，再也不用自己造轮子了。

常用方法汇总

import _ from ‘lodash’; // 引入

_.get(object, path, [defaultValue]);

说明：根据 object对象的path路径获取值。 如果解析 value 是 undefined 会以 defaultValue 取代。
示例：
    var object = { 'a': [{ 'b': { 'c': 3 } }] };
    _.get(object, 'a[0].b.c'); // => 3
    _.get(object, 'a.b.c', 'default'); // => 'default'

.forIn(object, [iteratee=.identity]) | .forEach(collection, [iteratee=.identity]);

说明：使用 iteratee 遍历对象的自身和继承的可枚举属性。 iteratee 会传入3个参数：(value, key, object)。 如果返回 false，iteratee 会提前退出遍历。
示例：
    var users = {
      'fred':    { 'user': 'fred',    'age': 40 },
      'pebbles': { 'user': 'pebbles', 'age': 1 }
    };
    
     _.forIn(users, (value, key) => console.log(key, value))
     _.forIn(users, (value, key, object) => {
         if(key == 'fred') return false; // 返回false，退出遍历
     })

_.defaults(object, [sources]);

说明：分配来源对象的可枚举属性到目标对象所有解析为 undefined 的属性上。 来源对象从左到右应用。 一旦设置了相同属性的值，后续的将被忽略掉。
示例：
    _.defaults({}, {title: '124'}, {title: '默认', callback: () => {}});
    // {title: '124', callback: f}
    
    // 如果想深度使用默认值，可以使用defaultsDeep (封装组件时使用较多)
    _.defaultsDeep({}, {title: '124', props: {b: 1}}, {title: '默认', props: {a:1, b:2}});
    // {title: '124', props: {a:1, b:1}}

_.max(array) | .maxBy(array, [iteratee=.identity]);

说明：计算 array 中的最大值。 如果 array 是 空的或者假值将会返回 undefined。
示例：
    _.max([4, 2, 8, 6]); // => 8

    var objects = [{ 'n': 1 }, { 'n': 2 }];
    _.maxBy(objects, o => o.n); // => { 'n': 2 }
    _.maxBy(objects, 'n'); // => { 'n': 2 }

_.chunk(array, [size=1]);

说明：将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。
示例：
    _.chunk(['a', 'b', 'c', 'd'], 2); // => [['a', 'b'], ['c', 'd']]
    _.chunk(['a', 'b', 'c', 'd'], 3); // => [['a', 'b', 'c'], ['d']]

_.difference(array, [values]);

说明：创建一个具有唯一array值的数组，每个值不包含在其他给定的数组中。
示例：
    _.difference([3, 2, 1], [4, 2]); // => [3, 1]

_.intersection([arrays]);

说明：创建唯一值的数组，这个数组包含所有给定数组都包含的元素（交集）。
示例：
    _.intersection([2, 1], [4, 2], [1, 2]); // => [2]

_.union([arrays]);

说明：创建一个按顺序排列的唯一值的数组（并集）。
示例：
    _.union([1], [3, 1, 2], [2, 4]); // => [1, 3, 2, 4]

_.uniq(array);

说明：创建一个去重后的array数组副本（去重）。
示例：
    _.uniq([2, 1, 2]); // => [2, 1]

.groupBy(collection, [iteratee=.identity]);

说明：创建一个对象，key 是 iteratee 遍历 collection(集合) 中的每个元素返回的结果（数据分组）。
示例：
    var arr = [
        {key: 2, value: 1},
        {key: 2, value: 3},
        {key: 1, value: 2},
    ];
    _.groupBy(arr, item => item.key);
    // => {1: [{key: 1, value: 2}], 2: [{key: 2, value: 1}, {key: 2, value: 3}]}

备注： 无法保证数据还原成数组后和原来的顺序保持一致，如果要保证数据一致性，参考如下方法：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-STbOYdcQ-1638972104031)(https://segmentfault.com/img/bVbwVGh?w=926&h=627)]

.orderBy(collection, [iteratees=[.identity]], [orders]);

说明：此方法类似于 _.sortBy，除了指定 iteratee（迭代函数），还支持结果如何排序。
示例：
    var users = [
      { 'user': 'fred',   'age': 48 },
      { 'user': 'barney', 'age': 34 },
      { 'user': 'fred',   'age': 40 },
      { 'user': 'barney', 'age': 36 }
    ];
     
    // 以 `user` 升序排序 再  `age` 以降序排序。
    _.orderBy(users, ['user', 'age'], ['asc', 'desc']);
    // => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]

.partition(collection, [predicate=.identity]);

说明：创建一个分成两组的元素数组，第一组包含predicate（断言函数）返回为 truthy（真值）的元素，第二组包含predicate（断言函数）返回为 falsey（假值）的元素。
示例：
    var users = [
      { 'user': 'p1', 'active': false },
      { 'user': 'p2', 'active': true },
      { 'user': 'p3', 'active': false }
    ];
     
    _.partition(users, user => user.active);
    // => [[{user: 'p2', active: true}], [{user: 'p1', active: false}, {user: 'p3', active: false}]]

_.size(collection);

说明：返回collection（集合）的长度，如果集合是类数组或字符串，返回其 length ；如果集合是对象，返回其可枚举属性的个数。
示例：
    _.size([1, 2, 3]); // => 3
     
    _.size({ 'a': 1, 'b': 2 }); // => 2 (常用)
     
    _.size('pebbles'); // => 7

_.cloneDeep(value);

说明：这个方法类似 _.clone，除了它会递归拷贝 value。（也叫深拷贝）。
示例：
    var objects = [{ 'a': 1 }, { 'b': 2 }];
    var deep = _.cloneDeep(objects);
    console.log(deep[0] === objects[0]); // => false

_.isEqual(value, other);

说明：执行深比较来确定两者的值是否相等。 
示例：
    var object = { 'a': 1 };
    var other = { 'a': 1 };
    _.isEqual(object, other); // => true

_.random([lower=0], [upper=1], [floating]);

说明：产生一个包括 lower 与 upper 之间的数。 
示例：
    _.random(0, 5);

_.random([lower=0], [upper=1], [floating]);

说明：产生一个包括 lower 与 upper 之间的数。 
示例：
    _.random(0, 5);

_.round(number, [precision=0]);

说明：根据 precision（精度） 四舍五入 number。
示例：
    _.round(4.006); // => 4
    _.round(4.06, 1); // => 4.1
    _.round(4.006, 2); // => 4.01