JS实用工具库（一）：lodash各类实用方法整理（基于lodash官网）

npm安装：

官网：lodash | Lodash 中文文档 | Lodash 中文网

（1）下载全局对象： npm i --save lodash

引入：import {debounce} from 'lodash'

（2）按需下载  npm i --save lodash.debounce     

引入：import debounce from 'lodash.debounce'

一、数组

1，chunk（把一维数组转成二维数组）

_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]
 
_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]

2，compact（去除数组中的假值：例如 false, null,0, "", undefined,  NaN）

_.compact([0, 1, false, 2, '', 3]);
// => [1, 2, 3]

3，difference（删除数组中某些指定的值，不会改变原数组）

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

当数组中的值比较复杂时，可以用differenceBy，differenceWith

（1）_.differenceBy([3.1, 2.2, 1.3], [4.4, 2.5], Math.floor);    
// Math.floor每一项向下取整数
// => [3.1, 1.3]   排除4，2
 
（1.1）_.differenceBy([{ 'x': 2 }, { 'x': 1 }], [{ 'x': 1 }], 'x');
// => [{ 'x': 2 }]     

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

Tip：pullAll的删除会改变原数组

var array = [1, 2, 3, 1, 2, 3];
 
_.pullAll(array, [2, 3]);
console.log(array);
// => [1, 1]

4，intersectionBy （从数组中选取某些指定的值）

_.intersectionBy([2.1, 1.2], [4.3, 2.4], Math.floor);  
// => [2.1]    从第一个数组中选取4，2
 
_.intersectionBy([{ 'x': 1 }], [{ 'x': 2 }, { 'x': 1 }], 'x');
// => [{ 'x': 1 }]   

intersectionWith （数组中的值比较复杂时）

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 }]

intersection 取几个数组中共同的值（交集）

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

5，uniqWith （数组去重）

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 }]

6，zip（取几个数组中的第一个元素组成新的数组1，第二个元素组成新数组2....）

var zipped = _.zip(['fred', 'barney'], [30, 40], [true, false]);
// => [['fred', 30, true], ['barney', 40, false]]
 
//unzip撤销zip的操作
_.unzip(zipped);  
// => [['fred', 'barney'], [30, 40], [true, false]]

（1）zipObject （组成对象，第一个值为属性，第二个值为value）

（1）  _.zipObject(['a', 'b'], [1, 2]);
     // => { 'a': 1, 'b': 2 }

（2） 拥有复杂路径的Object
  _.zipObjectDeep(['a.b[0].c', 'a.b[1].d'], [1, 2]);
    // => { 'a': { 'b': [{ 'c': 1 }, { 'd': 2 }] } }

7，sample 从数组当中随机获取元素

_.sample([1, 2, 3, 4]);
// => 2

//随机获取2个元素
_.sampleSize([1, 2, 3], 2);
// => [3, 1]

8，shuffle（把数组中的元素随机打乱）

_.shuffle([1, 2, 3, 4]);
// => [4, 1, 3, 2]

二、对象

1，assign （把多个对象上可枚举的属性和值复制到目标对象上）

assignIn （复制原型链属性）

function Foo() {
  this.a = 1;
}
 
function Bar() {
  this.c = 3;
}
 
Foo.prototype.b = 2;
Bar.prototype.d = 4;
 
_.assign({ 'a': 0 }, new Foo, new Bar);
//prototype上增加的属性不能被枚举,相同的属性会被下一个覆盖
// => { 'a': 1, 'c': 3 }

merge（value数据格式较复杂时，属性相同的值会被合并到一个数组）​​​​​​

ar object = {
  'a': [{ 'b': 2 }, { 'd': 4 }]
};
 
var other = {
  'a': [{ 'c': 3 }, { 'e': 5 }]
};
 
_.merge(object, other);
// => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }

Tip：对象属性分为：自有属性，继承属性（原型链属性：hasOwnProperty()​​​​​​​不会检查原型上的属性）

（1）获取对象所有的自有属性（包括可枚举 or 不可枚举的属性）：Object.getOwnPropertyNames

——获取可枚举的属性：Object.keys()

（2）判断对象的一个属性是否可枚举：Object.propertyIsEnumerable（）      true表示可枚举

2，invertBy （倒置对象的键值，相同的键只显示一次）

var object = { 'a': 1, 'b': 2, 'c': 1 };
 
_.invertBy(object);
// => { '1': ['a', 'c'], '2': ['b'] }
 
_.invertBy(object, function(value) {
  return 'group' + value;
});
// => { 'group1': ['a', 'c'], 'group2': ['b'] }

3，pick（从对象中挑选指定的属性）,反向版：omit

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

//omit 反向
_.omit(object, ['a', 'c']);
//{'b':'2'}

pickBy（挑选的属性，需要同时满足第二个参数判断为true时）

ar object = { 'a': 1, 'b': '2', 'c': 3 };
 
_.pickBy(object, _.isNumber);
// => { 'a': 1, 'c': 3 }

三、字符串

1，camelCase（转换字符串为驼峰写法），反之，kebabCase（"foo-bar"）,snakeCase（"foo_bar"）

（1）_.camelCase('Foo Bar');
// => 'fooBar'
 
（2）_.camelCase('--foo-bar--');
// => 'fooBar'
 
（3）_.camelCase('__FOO_BAR__');
// => 'fooBar'

2，capitalize（转换字符串首字母为大写，剩下的为小写）,lowerFirst（反之...）

_.capitalize('FRED');
// => 'Fred'

3，endsWith（检查字符串是否以给定的字符结尾）

_.endsWith('abc', 'c');
// => true 
_.endsWith('abc', 'b');
// => false 
_.endsWith('abc', 'b', 2);
// => true  参数3：检索的位置 

四、应用场景

1，debounce：搜索框防抖，用户输入完毕之后再调用函数

//（1）按需下载
 npm i lodash.debounce
// (2) 按需引用
 import debounce from 'lodash.debounce'
// (3)使用
 created() {
    // 搜索框防抖
    this.queryReceiptCode = debounce(this.queryReceiptCode, 500)  
  },
methods:{
    queryReceiptCode(){
    console.log("用户输入完毕之后，等待500ms执行此函数")
}
}

2，throttle：滚动条节流，每隔一段时调用一次函数

testThrottle: _.throttle(function() {
  console.log("throttle");
}, 5000, {
  leading: true,   //指定调用在节流开始前，默认true
  trailing: false  //指定调用在节流结束后，默认true
})

//1、按钮点击后控制台立马打印了throttle
//2、5秒内点击多次按钮，最终只打印一次throttle
//3、5秒后再点击一次，会重新打印throttle

3，after(n, func) ：被调用n次之后再触发函数func

before(n, func) ：函数func被调用不超过n次

4，once(func) ：只能调用一次的函数，重复调用返回第一次调用的结果