vue3之lodash第三方库的使用

vue3之lodash第三方库的使用

• 官网：lodash官网
• 作用：就是封装了一些常规的方法
  • 数字的浮点数进度问题等
• 下载
  • yarn add lodash -S
  • yarn add @type/lodash -D
• 使用
  • import lodash from 'lodash'

数组相关

对数据的加减乘除

<template>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import 'animate.css'
import lodash from 'lodash'
console.log('lodash', lodash.add(0.2, 0.3)) // 计算和数 0.5
console.log('lodash', lodash.subtract(0.92, 0.3)) // 计算除法 0.6200000000000001
console.log('lodash', lodash.divide(0.99, 0.22)) // 计算除法 4.5
console.log('lodash', lodash.multiply(0.2, 0.3)) // 计算和数 0.06

console.log('lodash', lodash.max([11, 22, 4, 888])) // 计算和数 888
</script>

求两个数组比较，返回第一个数组独有的数据

• eg：第一个数组，去比较第二个数组，返回没有与第二个数组相同的元素（根据第一个数组为主）

console.log('lodash', lodash.difference([1, 2, 3], [2, 3])) // [1]

比较两个数组，排除第一个数组的某些元素 differenceBy

• 比如：
  • 数组a需要排除掉元素2，那么直接可以第二个数组之中书写
  • 参数：
    • 1：原始数组
    • 2：需要排除的值
    • 3：调用每个元素，进行迭代，或者说是条件

console.log('lodash', lodash.differenceBy([1, 2, 3], [2])) // [1,3]
console.log('lodash', lodash.differenceBy([3.1, 2.2, 1.3], [4.4, 2.5], Math.floor)) // [3.1, 1.3] Math.floor向下取整
console.log('lodash', lodash.differenceBy([{ x: 2 }, { x: 1 }], [{ x: 1 }], 'x')) //  [{ 'x': 2 }]
console.log('lodash', lodash.differenceBy([{ x: 2 }, { x: 1 }, { y: 3 }], [{ x: 1 }], 'x')) //  [{'x':2}, {'y':3}]