Lodash是一个一致性,模块化,高性能的JavaScript实用工具库。

Lodash遵循MIT开源协议发布,并且支持最新的运行环境。查看各个构件版本

的区别并选择一个适合你的版本。

一.安装

浏览器环境:

通过npm

npm  i -g npm
npm  i --save  lodash

// Load the full build.
var _ = require('lodash');
// Load the core build.
var _ = require('lodash/core');
// Load the FP build for immutable auto-curried iteratee-first data-last methods.
var fp = require('lodash/fp');
 
// Load method categories.
var array = require('lodash/array');
var object = require('lodash/fp/object');
 
// Cherry-pick methods for smaller browserify/rollup/webpack bundles.
var at = require('lodash/at');
var curryN = require('lodash/fp/curryN')

二.为什么选择Lodash

Lodash通过降低array,number,objects,string等等的使用难度从而让JavaScript变得更简单。Lodash的模块化方法非常适用于:

(1)遍历array,object和string

(2)对值进行操作和检测

(3) 创建符合功能的函数

三.数组api的使用

(1)chunk

作用：将一个数组拆分变成二维数组 

代码：

_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]
 
_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]

返回的结果:

(2)compact

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

代码：

var _ = require('lodash');
let a1=_.compact([0, 1, false, 2, '', 3]);
console.log(a1);

(3)concat

作用:

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

代码：

var _ = require('lodash');
var array = [1];
var other = _.concat(array, 2, [3], [[4]]);
 
console.log(other);
// => [1, 2, 3, [4]]
// => [1]

(4)drop

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

参数

1. array (Array): 要查询的数组。
2. [n=1] (number): 要去除的元素个数。

例子：

var _ = require('lodash');
let a1=_.drop([1, 2, 3]);
// => [2, 3]
console.log(a1);

四.实现一个深拷贝

var objects = [{ 'a': 1 }, { 'b': 2 }];
 
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

五.sample

返回一个随机元素

var _ = require('lodash');
 
let a1=_.sample([1, 2, 3, 4]);
 
console.log(a1);

六.merge

代码：

var object = {
  'a': [{ 'b': 2 }, { 'd': 4 }]
};
 
var other = {
  'a': [{ 'c': 3 }, { 'e': 5 }]
};
 
_.merge(object, other);
// => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }

七.利用Lodash处理防抖和节流

防抖:

持续触发不执行,一段时间不触发后在去执行

自己手写代码:

DOCTYPE html>
 
  
  
  
  
 
  点击
 

为什么要这样写,为了延长的回调,通过return出去一个函数来执行函数的一个回调为了不立即让它立马去执行。

第二个 

let timer 要定义在外面

写在里面收到块级作用域的影响。

通过lodash来实现。

鲁大师的实现:

下载:

npm  i --save  lodash

 
<script>
import debounce from 'lodash.debounce'
export default {
  name: '',
  methods: {
  textChange:debounce(function() {
  console.log(123);
  }, 1000)
  }
}
script>
 
<style scoped>
 
style>

全部引入的使用;

下载:

npm  i --save  lodash

在main.js中进入导入并挂载;

// 导入lodash
import _ from 'lodash'
Vue.prototype._ = _

实现的代码：

 
<script>
export default {
  name: '',
  methods: {
   fn(){
   console.log(this._.debounce);
   this._.debounce(function(){
      console.log(123);
     },1000)
     } 
    
  }
}
script>
 
<style scoped>
 
style>

可以看出全局挂载的方式是没有结果的,不推荐使用。

节流：

持续触发执行,但是触发的频率会进行减少

下载:

npm  i --save  lodash

使用:

 
<script>
import {throttle} from 'lodash'
export default {
  name: '',
  methods: {
  textChange:throttle(function() {
  console.log(123);
  }, 1000)
  }
}
script>
 
<style scoped>
 
style>