会用这几个lodash方法就够了

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

引入lodash

使用vue-cli创建的vue项目，是集成了lodash库的。

所以，建议直接全部引入，打包的时候会自动去除掉没有使用的lodash方法。

import _ from 'lodash'

lodash的使用

1.防抖debounce

input框的触发事件，采用防抖

定义：清除掉之前的操作，在规定时间到达后，执行最后一次操作。

<template>
  <div>
    <input type="text" @input="inputFn">
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  methods: {
    inputFn: _.debounce(function () {
      console.log('inputFn触发')
    }, 1000)
  }
}
</script>

2.节流throttle

定义：不按照用户的操作频率来触发，而是按照程序设定好的频率来触发。

<template>
  <div>
    <input type="text" @input="inputFn" v-model="value">
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  data () {
    return {
      value: ''
    }
  },
  methods: {
    inputFn: _.throttle(function () {
      console.log(this.value)
    }, 3000)
  }
}
</script>

3.深拷贝cloneDeep

将一个复杂类型的值直接赋值给另一个变量，那么修改其中一个变量的值，另外一个变量的值也会变化。因为复杂类型变量的赋值，是将栈中存储的指向存储数据的堆的地址赋给另一个变量。

<template>
  <div>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  data () {
    return {
      value: '',
      obj: { name: 0, age: 0 }
    }
  },
  created () {
    this.deepClone()
  },
  methods: {
    deepClone () {
      this.value = _.cloneDeep(this.obj)
      this.value.name = 2
      console.log(this.value)
      console.log(this.obj)
    }
  }
}
</script>

这里修改value的属性的值，并不会影响到obj的属性的值

4.数组求和/平均值

<template>
  <div>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  data () {
    return {
      arr1: [1, 2, 3, 4, 5]
    }
  },
  created () {
    // 求和
    console.log(_.sum(this.arr1))// 15
    // 求平均值
    console.log(_.mean(this.arr1))// 3
  }
}
</script>

5.分组

分组(group) 则是用一个函数遍历每个元素，得到的结果作为该元素所在组的 key，相同 key 元素归为同一组。

console.log(_.groupBy([6.1, 4.2, 6.3], Math.cell))

6.去重

created () {
    console.log(_.uniq([1, 3, 4, 1, 5])) // [1, 3, 4, 5]
    console.log(_.uniqBy([2.1, 2.2, 1.4, 1.7], Math.floor)) // [2.1, 1.4]
  }