Lodash ------------ 入门篇

简介

Lodash是一个著名的javascript原生库，不需要引入其他第三方依赖。是一个意在提高开发者效率,提高JS原生方法性能的JS库。简单的说就是，很多方法lodash已经帮你写好了，直接调用就行，不用自己费尽心思去写了，而且可以统一方法的一致性。Lodash使用了一个简单的 _ 符号。

为什么使用Lodash呢？

通过使用数组、数字、对象、字符串等方法，Lodash使JavaScript变得更简单 （因为懒，有现成的干嘛不用呢 ！！！）

如何安装？

npm install --save lodash

介绍几种常用的

引入还是一样的

import _ from 'lodash'

接下来的姿势可能会比较花里胡哨了

1、校验值是否为空 ---- isEmpty

// 判断值是否为空
const isEmpty = () => {
    var object = {};
    var object1 = {a:1};
    var str = '';
    var arr = [];

    console.log(_.isEmpty(object));   // true
    console.log(_.isEmpty(object1));  // false
    console.log(_.isEmpty(1));        // true
    console.log(_.isEmpty(str));      // false
    console.log(_.isEmpty(arr));      //true
}

2、深克隆对象 ---- cloneDeep

注：你可以使用原生的解决方案:JSON.parse(JSON.stringify(object))进行深度克隆,但是这种方案仅在对象内部没有方法的时候才可以。

const cloneDeep = () => {
  var obj = {
    name: "前端技术",
    age : 24
  };
  var newObj = _.cloneDeep(obj);
  console.log(obj);
  console.log(newObj);
  console.log(obj === newObj);
}

3、在指定的范围获取一个随机数 ---- random

注：Lodash中的 _.random 方法要比上面的原生方法更强大与灵活。你可以只传入一个参数作为最大值， 你也可以指定返回的结果为浮点数 _.random(10,20,true)

const random = () => {
  function getRandom(min,max){
    return Math.floor(Math.random()*(max-min)) + min;
  }
  getRandom(20,24);
  // lodash  
  _.random(20,24);      // 整数
  _.random(20,24,true) // 浮点数
}

4、查找属性返回新数组 ---- map

注：Lodash中的map方法和JavaScript中原生的数组方法非常的像

export const newMap = () => {

    let mapArr = [{ name: '前端技术' },{ name: '后端技术' }];
    let newMapArr = mapArr.map(item => item.name);
    console.log(newMapArr); //  ['前端技术', 后端技术 ]

     // lodash
    let lodashMap = _.map(mapArr, 'name')
    console.log(lodashMap) // ['前端技术', 后端技术 ]
}

5、扩展对象 ---- assign

注：Lodash中的 assing 方法也可以接收多个参数对象进行扩展，都是往后面的对象上合并

export const assign =  () => {
  Object.prototype.extend = function (obj) {
    for (var i in obj) {
      if (obj.hasOwnProperty(i)) { //判断被扩展的对象有没有某个属性，
        this[i] = obj[i];
      }
    }
  };
  let assignObj1 = { name: '前端', tchName: 'Vue' };
  let assignObj2 = { name: '小程序', cat: 'mpVue' };

  assignObj1.extend(assignObj2);

  console.log(assignObj1); 

  // lodash

  console.log(_.assign(assignObj1,assignObj2));
}

6、判断对象中是否含有某元素 ---- includes

注：Lodash中的 includes 第一个参数是需要查询的对象（数组），第二个参数是需要查询的元素，第三个参数是开始查询的下标

export const Includes = () => {
  let includesObj = { name:'前端技术', age: 24 };
  let includesArr = ['前端技术', 'Vue', 'react', 'Uniapp'];

  console.log(_.includes(includesObj, '前端技术')); // true
  console.log(_.includes(includesArr, 'Vue'));      // true
  console.log(_.includes(includesArr, 'react', 2))  // true
}

7、数组去重 ---- unip

注：这个呢知道就好 大家选择自己喜欢的姿势就好！！！！

export const unip = () => {
  let UnipArr = [1,2,3,7,1,2,3,8];
  // 1 
  let arr1 = _.unip(UnipArr);
  let arr2 = new Set(UnipArr);
}

8、数组拼接 ---- concat

注：创建一个新的数组，将 [ ] 与任何数组的值连接在一起

export const Cancat = () => {
  let arr = [];
  let newArr = _.concat(arr,[1],[56],[[4,6]]);

  console.log(newArr)  // [1,56,[4,6]]
}

9、数组切片 ---- take

注：创建一个数组切片，从原数组的起始元素开始提取N个元素，且不会对原数组造成改变

export const take = () => {
  let arr = [1,5,6,9,7,8];

  let takeArr = _.take(arr, 2); // [1,5]

  let takeArr1 = _.take(arr, 9); // [1,5,6,9,7,8];

  let takeArr2 = _.take(arr, 0); // []

}

10、修改（删除）数组的元素 ---- pull

注：第一个参数：要修改的数组，第二个参数：要删除数组中的值。原数组也会被修改

export const pull = () => {
  let arr = [1,5,6,3,2,1];

  let pullArr = _.pull(arr,1,5,3);

  console.log(arr, pullArr) // [6,2] , [6,2]
}