JavaScript实用工具库——Lodash用法-CDN

1. 简介

• Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
• 中文官网
• Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于：
  • 遍历 array、object 和 string
  • 对值进行操作和检测
  • 创建符合功能的函数

2. 使用

• https://www.jsdelivr.com/package/npm/lodash 中有各种lodash引入的cdn地址

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

<script>
        console.log(_.chunk(['a', 'b', 'c', 'd']))   // 打开页面，就会看到处理过的数据结构
</script>

3.数组Api的使用

3.1 _.chunk(arr,size) 拆分形成新数组

• 将arr数组元素按顺序拆分成多个长度为size的数组，若剩下的元素小于size，剩下元素成为一组

        const arr =  [5, 2, 3, 4, 1, "a", "c", "b", "d"]
        const solveArr = _.chunk(arr,2)
        console.log(solveArr)  

---

3.2 _.compact(arr) 保留数组非假值

• 创建一个新数组，包含原数组中所有的非假值元素。例如false, null,0, “”, undefined, 和 NaN 都是被认为是“假值”。

const arr = [0,1,null,undefined,'',{},"这是",false,true,NaN];
const solveArr = _.compact(arr)
console.log(solveArr)

---

3.3 _.concat(arr,newArr) 拼接数组

• 创建一个新数组，将array与任何数组 或 值连接在一起。

const arr = ["原始数据1", "原始数据2"]
const arr2 = [
     {
     	name: "新增数组对象11"
     },
     {
         name: "新增数组对象12"
     }
]
const arr3 = ["新增数据2"]
const solveArr = _.concat(arr, arr2, arr3)
console.log(solveArr, "拼接数组")

---

3.4 _.difference(arr1,arr2…)返回去除后面相同值后的数组

• 只能去除基本数据类型

        const arr = ["热爱","自由",1,2,3,5,'g',{name:"Ably"}]
        const arr1 = ["自由","时尚"];
        const arr2 = [1,2,4,{name:"Ably"}]
        const solveArr = _.difference(arr,arr1,arr2)
        console.log(solveArr)

---

3.5 _.differenceBy(arr,arr1,rule) 根据某种情况去除相同数据

• 通过某种规则进行去除相同元素

const arr = [1.3,2,5,4]
const arr1 = [1.5,1.1,3]
const solveArr = _.differenceBy(arr,arr1,Math.floor) // Math.floor后相同数据去重
console.log(solveArr)

const arr = [{name:"Ably"},{name:"wang"},{name:'Ably'}];
const arr1 = [{name:"li"},{name:"Ably"}];
const solveArr = _.differenceBy(arr,arr1,'name')	 // 根据数组元素对象中name属性进行去重
console.log(solveArr)

---

3.6 _.differenceWith 根据比较器返回去除相同数据

• 这个方法类似_.difference ，除了它接受一个 comparator （注：比较器），它调用比较array，values中的元素。 结果值是从第一数组中选择。comparator 调用参数有两个：(arrVal, othVal)。

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

---

3.7 _.drop(arr,n) 从左开始切除元素

• 创建一个切片数组，去除array前面的n个元素。（n默认值为1。）
• 若n > arr.length,返回[],切没了

const arr = [{name:"Ably"},1,2,3,"a","j",4,"l"];
const solveArr = _.drop(arr,5)
console.log(solveArr)  // ["j", 4, "l"]

3.8 _.dropRight(arr,n)从右开始切除元素

• 与3.7相同，不过是从右边开始切掉

3.x _.uniq 数组去重

1. 普通数组去重实例
      const arr = [5,2,3,4,1,2,3,5,'a','c','b','d','a','b']
      const solveArr = _.uniq(arr)
      console.log(solveArr)  // [5, 2, 3, 4, 1, "a", "c", "b", "d"]