在 Vue 项目中引入 Lodash

一、安装

cnpm i loash -S
或
npm i -g npm
npm i --save lodash

二、引入

let _ = require('lodash')

三、使用

_.debounce(this.handleClick,1000,false)

四、实践

<template>
  <div>lodash.js</div>
</template>

<script>
import _ from "lodash";

//  _.chunk
console.log(_.chunk(["a", "b", "c", "d"], 2)); // ["a","b"],["c","d"]
console.log(_.chunk(["a", "b", "c", "d"], 3)); // ["a","b","c"],["d"]

//  _.compact
// false, null, 0, "", undefined, and NaN 将会被“干掉”
console.log(_.compact([0, 1, false, 2, "", 3, NaN, 4, null, 5, undefined])); // [1,2,3,4,5]

// _.concat
const array = 1;
const other = _.concat(array, 2, [[3]], [4]);
console.log(other); // [1, 2, [3], 4]

//  _.difference  第一个(要检查的数组)和第二个（要排除的数组）相比较，输出不同
console.log(_.difference([2, 3, 4], [2, 4, 3])); // []
console.log(_.difference([2, 3, 4], [2, 5, 3])); // [4]

// differenceBy
// 这种方法类似，_.difference只是它接受iteratee为每个元素调用的内容，array并values生成比较它们的标准。
// 结果值的顺序和引用由第一个数组确定。使用一个参数调用iteratee :(value）。
console.log(_.differenceBy([2.1, 1.2], [2.3, 3.4], Math.floor)); // [1.2]
console.log(_.differenceBy([2.2, 1.34], [1, 3.4], Math.floor)); // [2.2]
console.log(_.differenceBy([2.2, 1.34], [4, 3.4], Math.floor)); // [2.2, 1.34]
console.log(_.differenceBy([{ x: 2 }, { x: 1 }], [{ x: 2 }], "x")); // [{x:1}]

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

// drop(array, [n=1])  -- 从左边开始拆掉
console.log(_.drop([1, 2, 3])); // 默认 n =1;  [2,3]
console.log(_.drop([1, 2, 3], 2)); // 默认 n =1;  [3]
console.log(_.drop([1, 2, 3], 5)); // 默认 n =1;  []

// // dropRight(array, [n=1])  -- 从右边开始拆掉
console.log(_.dropRight([1, 2, 3])); // 默认 n =1;  [1,2]
console.log(_.dropRight([1, 2, 3], 2)); // 默认 n =1;  [1]
console.log(_.dropRight([1, 2, 3], 0)); // 默认 n =1;  [1,2,3]

export default {};
</script>

五、官网

https://www.lodashjs.com/

六、感悟

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。处理复杂数组，对比等可以直接采用该库，也方便快捷。