Lodash.js相关方法Lodash是一个可以提高开发者效率、提高原生JS方法性能的 JavaScript 第三方实用

一、简介

Lodash是一个可以提高开发者效率、提高原生JS方法性能的 JavaScript 第三方实用工具库；
Lodash特点就是一致性、模块化、高性能。其不需要引入其他第三方依赖，我们在使用的过程中可以直接调用
Lodash帮我们封装好的方法；（其模块化特别适用于：创建符合功能的函数、遍历 array（数组）、object （对象）和 string（字符串）等）
Lodash使用了一个简单的 _ 符号，十分简洁。
官方文档：www.lodashjs.com/

二、引入Lodash

使用Lodash.js，有以下几种方式引入Lodash.js开发包：

js离线文件引入：直接在Lodash中文网下载相关的lodash.js包，放在自己的开发项目中，然后在需要使用的文件中引入：< script src="lodash.js">< /script>
cdn方式引入：一般使用bootcdn来直接在线引入，然后通过cdn加速文件下载访问：//www.jsdelivr.com/package/npm… //在项目中不支持 < script src="cdn.bootcss.com/lodash.js/4…< /script >
通过 npm使用

 npm i --save lodash

三、数组

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

将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。如果array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。
```
arr = ["1", "2", "3", "4", "5", "6", "7", "8"];
newArr = _.chunk(arr, 3);//[ [ "1", "2", "3" ], [ "4", "5", "6" ], [ "7", "8" ]]
```
_.compact(array)

创建一个新数组，包含原数组中所有的非假值元素。例如false, null,0, "", undefined, 和 NaN 都是被认为是“假值”。
```
arr = [0, 1, false, 2, "", 3];
newArr = _.compact(arr);
```
_.difference(array, [values])

找到给定数组中（array）其他参数数组（ [values]）没有的元素，然后将这些元素组成新数组返回

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

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

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

_.drop([1, 2, 3], 2);//[3]

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

创建一个切片数组，去除array尾部的n个元素。（n默认值为1。）
```
_.dropRight([1, 2, 3], 2);//[1]
```

6._.uniq(array)

创建一个去重后的array数组副本。使用了SameValueZero 做等值比较。只有第一次出现的元素才会被保留。

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

7._.fill(array, value, [start=0], [end=array.length])

使用 value 值来填充（替换） array，从start位置开始, 到end位置结束（但不包含end位置）//注: 这个方法会改变 array（注：不是创建新数组）。

arr = [1, 2, 3, 4];
newArr = _.fill(this.arr, "*", 1, 3); // [ 1, "*", "*", 4 ]

8、_.remove(array, [predicate=_.identity])

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

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

(Array): 返回移除元素组成的新数组

 arr = [1, 2, 3, 4];
 newArr = _.remove(this.arr, function(n) {
      return n % 2 == 0;
    });
    console.log(this.arr);
    // => [1, 3]
    console.log(this.newArr);
    // => [2, 4]

9、_.size(collection)

返回array|object的长度，如果集合是类数组或字符串，返回其 length ；如果集合是对象，返回其可枚举属性的个数。

var arrLength = _.size([1, 2, 3]);
    console.log("arr", arrLength); // => 3
var objectLength = _.size({ a: 1, b: 2 });
    console.log("object", objectLength); // => 2
var stringLength = _.size("pebbles");
    console.log("string", stringLength); // => 7

10、_.shuffle(collection)

创建一个被打乱值的集合。

  arr = [1, 2, 3, 4];
  newArr = _.shuffle(this.arr);

四、对象

_.keys(object)

取出对象中所有的key值组成新的数组。

 arr = { a: 1, b: 2 };
 newArr = _.keys(this.arr);//[ "a", "b" ]

_.values(object)`

取出对象中所有的value值组成新的数组。
```
arr = { a: 1, b: 2 };
newArr = _.values(this.arr); //[ 1, 2 ]
```
_.mapKeys(object, [iteratee=_.identity])//转换key

这个方法创建一个对象，对象的值与object相同，并且 key 是通过 iteratee 运行 object 中每个自身可枚举属性名字符串产生的。iteratee调用三个参数： (value, key, object)。
```
  this.arr = { a: 1, b: 2 };
  this.newArr = _.mapKeys(this.arr, function(value, key) {
       return key + value;
   });//{a1:b2:2}
```
_.mapValues(object, [iteratee=_.identity])//转换value

创建一个对象，这个对象的key与object对象相同，值是通过 iteratee 运行 object 中每个自身可枚举属性名字符串产生的。 iteratee调用三个参数： (value, key, object)。
```
  arr = {
      fred: { user: "fred", age: 40 },
      pebbles: { user: "pebbles", age: 1 }
    };
newArr = _.mapValues( arr, function(o) {
      return o.age; //{ "fred": 40, "pebbles": 1 }
    });
```

_.pick(object, [props])

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

  arr = { a: 1, b: "2", c: 3 };
  newArr = _.pick(this.arr, ["a", "c"]); // => { 'a': 1, 'c': 3 }

_.omit(object, [props])

反向版_.pick;，这个对象由忽略属性之外的object自身和继承的可枚举属性组成。（注：可以理解为删除object对象的属性）。
```
 arr = { a: 1, b: "2", c: 3 };
 newArr = _.omit(this.arr, ["a", "c"]); // => { 'b': '2' }
```
_.invert(object)

创建一个object键值倒置后的对象。如果 object 有重复的值，后面的值会覆盖前面的值。
```
  arr = { a: 1, b: 2, c: 3, d: 2 };
  newArr = _.invert(this.arr);
   // => { "1": "a", "2": "d", "3": "c" }
```

_.cloneDeep(value)

深拷贝

 arr = {
      name: "zhangsan",
      date: new Date(),  
      regExp: new RegExp("\w+"), 
      fun: function() {
        return true;
      },  
      err: new Error("error"), 
      symbol: Symbol(233),  
      undefined: undefined,  
      null: null,
      nan: NaN,  
      infinity: Infinity 
    };
    newArr = JSON.parse(JSON.stringify(arr));//部分数据丢失或转义
    newArr = _.cloneDeep(arr);//数据不会丢失或转义

六、函数

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

创建一个 debounced（防抖动）函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法。

使用场景：用户在连续输入文字时，会在每次输入时都会执行函数，有可能导致阻塞

  <input type="text" id="inp" ref="inp" @input="change(log, 300)" />
   change(fn, delay) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        fn();
      }, delay);
    },
    log() {
      console.log("ajax发请求");
    }

使用lodash的防抖
a() {
      // 未使用防抖前  文本发生变化立即执行
      // this.$refs.input.oninput = function() {
      //   console.log("ajax请求");
      // };
      this.$refs.input.oninput = _.debounce(function() {
        console.log("axios发请求"); //一秒后发请求
      }, 2000);
    },

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

创建一个节流函数，在 wait 秒内最多执行 func 一次的函数。

使用场景

多次点击执行操作

 <h1>
      计数器<span> {{ count }}</span>
    </h1>
    <button @click="b(1000)">点击+1</button>
     b(intervalTime) {
      //获取当前时间的时间戳
      let now = new Date().valueOf();
      if (this.lastTime == 0 || now - this.lastTime > intervalTime) {
        //重置上一次点击时间，intervalTime是我自己设置的间隔时间，根据自己的需要传参
        this.lastTime = now;
        this.count++;
        //添加自己要调用的方法
      } else {
        console.log("不触发");
      }
    }
  
  使用lodash
   <h1>
      计数器<span> {{ count }}</span>
    </h1>
     <button @click="b">点击+1</button> 
    
    b: _.throttle(function() {
       this.count++;
     }, 1000)

Lodash.js相关方法

一、简介

二、 引入Lodash

三、数组

四、对象

六、函数

二、引入Lodash