lodash常用方法

安装

浏览器环境：

<script src="lodash.js"></script>

通过 npm：

$ npm i -g npm
$ npm i --save lodash

1、cloneDeep(value)

深拷贝

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

数组处理方法

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

将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。 如果array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块

let arr=[1,2,3,4,5,6,7,8]
console.log(_.chunk(arr,3));
// Array(3)
// 0: (3) [1, 2, 3]
// 1: (3) [4, 5, 6]
// 2: (2) [7, 8]

2、_.drop(array, [n=1])

创建一个切片数组，去除array前面的n个元素。（n默认值为1。）

 let arr=[1,2,3,4,5,6,7,8]
 console.log(_.drop(arr,3));
 console.log(arr);//不会影响原数组

3、_.dropRight(array, [n=1])

创建一个切片数组，去除array尾部的n个元素。（n默认值为1。）

let arr=[1,2,3,4,5,6,7,8]
console.log(_.dropRight(arr,3));

4、_.fill(array, value, [start=0], [end=array.length])（*会改变原始数组 array）

使用 value 值来填充（替换） array，从start位置开始, 到end位置结束（但不包含end位置）。

var array = [1, 2, 3];
 
_.fill(array, 'a');
console.log(array);
// => ['a', 'a', 'a']
 
_.fill(Array(3), 2);
// => [2, 2, 2]
 
_.fill([4, 6, 8, 10], '*', 1, 3);
// => [4, '*', '*', 10]

5、.flatten(array)、.flattenDeep(array)、_.flattenDepth(array, [depth=1])

_.flatten(array)：减少一级array嵌套深度，
_.flattenDeep(array)“”将array递归为一维数组，
_.flattenDepth(array, [depth=1])：根据 depth 递归减少 array 的嵌套层级

  console.log(_.flatten([1, [2, [3, [4]], 5]]));
  console.log(_.flattenDeep([1, [2, [3, [4]], 5]]));
  console.log(_.flattenDepth([1, [2, [3, [4]], 5]],2));
	//(4) [1, 2, Array(2), 5]
	//(5) [1, 2, 3, 4, 5]
	//(5) [1, 2, 3, Array(1), 5]

6、.pull(array, values)、.pullAll(array, [values])（*会改变原始数组 array）

移除数组array中所有和给定值相等的元素，使用SameValueZero 进行全等比较

 var array = [1,9,2,5,2,3];
  _.pull(array, 2, 3);
  _.pullAll(array, [2,3]);//效果与pull一样，只不过是pullAll第二个参数是数组形式
  console.log(array);
  //[1, 9, 5]

7、.remove(array, [predicate=.identity])（*会改变原始数组 array）

移除数组中predicate（断言）返回为真值的所有元素，并返回移除元素组成的数组。predicate（断言） 会传入3个参数： (value, index, array)。

Note: 和_.filter不同, 这个方法会改变原始数组 array。使用_.pull来根据提供的value值从数组中移除元素

let arr=[1,2,3,4]
let arr1=_.remove(arr,(o)=>{
 	return o !== 2
})
console.log(arr,arr1);//可以看出remove是会影响原数组的
//[2]  [1, 3, 3, 4, 4]

*pull和remove效果类似，但是pull的后接参数是数组或者【values】，remove后接参数是函数

8、_.sortedUniq(array)

返回一个新的不重复的数组，类似于[…new Set()]

 let arr=[1,2,3,3,4,4]
 let arr2=_.sortedUniq(arr)
 console.log(arr2);

8、_.zip([arrays])

创建一个分组元素的数组，数组的第一个元素包含所有给定数组的第一个元素，数组的第二个元素包含所有给定数组的第二个元素，以此类推

let arr4=[1,2],arr5=['aa','bb']
let res=_.zip(arr4,arr5)
console.log(res);
//0: (2) ['aa', 1]
//1: (2) ['bb', 2]

8、_.zipObject([props=[]], [values=[]])

这个方法类似_.fromPairs，除了它接受2个数组，第一个数组中的值作为属性标识符（属性名），第二个数组中的值作为相应的属性值

let arr4=['aa','bb'],arr5=[1,2]//此处的aa，bb都是字符串，在通过zipObject方法后aa，bb会变成键名
let res=_.zipObject(arr4,arr5)
console.log(res);
console.log(res.aa);
//{aa: 1, bb: 2}
// 1 (可以直接通过键名读取，不再是刚开始的字符串形式了)

8、.zipWith([arrays], [iteratee=.identity])

这个方法类似于_.zip，不同之处在于它接受一个 iteratee（迭代函数），来 指定分组的值应该如何被组合。 该iteratee调用每个组的元素： (…group).

let arr4=['aa','bb'],arr5=[1,2]
let res=_.zipWith(arr4,arr5,(a,b)=>{
  return a+b
})
console.log(res);
//['aa1', 'bb2']

9、intersection([arrays])、intersectionBy([arrays], [iteratee=_.identity])、intersectionWith([arrays], [comparator])

数组比对，返回比对相同后的值新数组，不修改原数组

intersection([2, 1], [4, 2], [1, 2]);
// => [2]

_.intersectionBy([{ 'x': 1 }], [{ 'x': 2 }, { 'x': 1 }], 'x');
// => [{ 'x': 1 }]

var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }];
 
_.intersectionWith(objects, others, _.isEqual);
// => [{ 'x': 1, 'y': 2 }]

10、difference(array, [values])、differenceBy(array, [values], [iteratee=_.identity])、differenceWith(array, [values], [comparator])

数组比对，返回比对不同后的值新数组，不修改原数组

difference([3, 2, 1], [4, 2]);
// => [3, 1]

differenceBy([{ 'x': 2 }, { 'x': 1 }], [{ 'x': 1 }], 'x');
// => [{ 'x': 2 }]

var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
differenceWith(objects, [{ 'x': 1, 'y': 2 }], _.isEqual);
// => [{ 'x': 2, 'y': 1 }]

11、uniq(array)、uniqBy(array, [iteratee=_.identity])、uniqWith(array, [comparator])

数组比对，去重，返回去重后的新数组，不修改原数组

_.uniq([2, 1, 2]);
// => [2, 1]

uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x');
// => [{ 'x': 1 }, { 'x': 2 }]

var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }];
_.uniqWith(objects, _.isEqual);
// => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]

对象处理方法

1、fromEntries（es10原生方法）

对象里面的过滤"全部"符合条件的对象

const obj = {
  a: 21,
  b: 22,
  c: 23
}
let aa=Object.fromEntries(Object.entries(obj).filter(([_,i])=>i>21))
console.log(obj,aa);

2、_.pick(object, [props])

创建一个从 object 中选中的属性的对象。

var object = { 'a': 1, 'b': '2', 'c': 3 };
_.pick(object, ['a', 'c']); //{a: 1, c: 3}
//不会修改原数组，返回值是挑选出来的新对象
console.log('objectobject',object);//{ 'a': 1, 'b': '2', 'c': 3 }

3、_.omit(object, [props])

反向版_.pick; 这个方法一个对象，这个对象由忽略属性之外的object自身和继承的可枚举属性组成。（注：可以理解为删除object对象的属性）

var object = { 'a': 1, 'b': '2', 'c': 3 };
_.omit(object, ['a', 'c']); //{b: '2'}
//不会修改原数组，返回值是去除了原数组中被选值后出来的新对象
console.log('objectobject',object);//{ 'a': 1, 'b': '2', 'c': 3 }

4、_.invert(object)

创建一个object键值倒置后的对象。 如果 object 有重复的值，后面的值会覆盖前面的值

var object = { 'a': 1, 'b': 2, 'c': 1 };
_.invert(object);
// => { '1': 'c', '2': 'b' }

5、_.set(object, path, value)

设置 object对象中对应 path 属性路径上的值，如果path不存在，则创建。 缺少的索引属性会创建为数组，而缺少的属性会创建为对象。 使用_.setWith 定制path创建

var object = { 'a': [{ 'b': { 'c': 3 } }] };
 
_.set(object, 'a[0].b.c', 4);
console.log(object.a[0].b.c);
// => 4
 
_.set(object, ['x', '0', 'y', 'z'], 5);
console.log(object.x[0].y.z);
// => 5

6、_.at(object, [paths])

创建一个数组，值来自 object 的paths路径相应的值

var object = { 'a': [{ 'b': { 'c': 3 } }, 4] };
 
_.at(object, ['a[0].b.c', 'a[1]']);
// => [3, 4]

函数处理方法

1、_.after(n, func)

此方法创建一个函数，当他被调用n或更多次之后将马上触发func

2、_.once(func)

创建一个只能调用 func 一次的函数。 重复调用返回第一次调用的结果

let arr=[1,2,3,4]
const once=_.once(()=>{
  alert('只执行一次')
})
const fn=_.after(2,()=>{ //after虽然是在两次后执行，但是两次之后调用就是次次调用  
  console.log('我执行了两次了');
  once()
})
arr.forEach(o=>{
  console.log(o);
  fn()
})

3、_.debounce(func, [wait=0], [options=])

创建一个 debounced（防抖动）函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法。 debounced（防抖动）函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。 可以提供一个 options（选项） 对象决定如何调用 func 方法，options.leading 与|或 options.trailing 决定延迟前后如何触发（注：是 先调用后等待 还是 先等待后调用）。 func 调用时会传入最后一次提供给 debounced（防抖动）函数 的参数。 后续调用的 debounced（防抖动）函数返回是最后一次 func 调用的结果。
参数
1、func (Function): 要防抖动的函数。
2、[wait=0] (number): 需要延迟的毫秒数。
3、[options=] (Object): 选项对象。
4、[options.leading=false] (boolean): 指定在延迟开始前调用。
5、[options.maxWait] (number): 设置 func 允许被延迟的最大值。
6、[options.trailing=true] (boolean): 指定在延迟结束后调用。

const once=_.once(()=>{
  alert('只执行一次')
})
let debounced = _.debounce(once, 3000, { 'maxWait': 5000 });
debounced()

4、_.throttle(func, [wait=0], [options=])

创建一个节流函数，在 wait 秒内最多执行 func 一次的函数。 该函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。 可以提供一个 options 对象决定如何调用 func 方法， options.leading 与|或 options.trailing 决定 wait 前后如何触发。 func 会传入最后一次传入的参数给这个函数。 随后调用的函数返回是最后一次 func 调用的结果
参数
1、func (Function): 要节流的函数。
2、[wait=0] (number): 需要节流的毫秒。
3、[options=] (Object): 选项对象。
4、[options.leading=true] (boolean): 指定调用在节流开始前。
5、[options.trailing=true] (boolean): 指定调用在节流结束后。

const once=_.once(()=>{
  alert('只执行一次')
})
let throttle = _.throttle(once, 3000);
throttle()

防抖与节流区别

// 节流

var canNext = true;
    function throttle () {
        if(!canNext) { //主要在此，canNext为false直接return
            return;
        }

        canNext = false;
        setTimeout(function () {
            console.log('节流方法执行了')
            canNext = true;
        }, 200)
    };

在密集调用时，节流方法相当于每200毫秒执行一次，上一次没执行结束，不会执行下一次
// 防抖

var timer = null;
function debounce () {
    clearTimeout(timer);
    timer = setTimeout(function() {
        console.log('防抖方法执行了')
    }, 200)
}

防抖方法在200以内调用，上一次执行未结束时，又触发了下一次执行，计时器重新计时，总是执行最后一次的调用