记一次使用lodash的实践

lodash是一个非常好用的javascript工具库，特别是在操作数组、集合、对象的时候，快捷而方便。

最近的项目恰好引入了这个工具库，这篇文章记录一下我在两个业务需求中使用lodash的实践。

业务一：对后台返回数据进行容错处理

数据从后台返回后，拿到返回的数据response后，给tabelData赋值

let tableData = response.returnObj.list

正常情况下是不报错的，但是这个接口在某些情况下，状态是“200”，但是返回的数据结构体中没有“returnObj”，此时，控制台就会报空指针的错误，程序无法继续执行。

对这种情况进行容错处理有很多种方式，推荐使用lodash的“_.get(object, path, [defaultValue])”，

let tableData = _.get(response, 'returnObj.list')

这样，当返回数据中没有“returnObj”时，tableData会被赋值“undefined”，就不会报空指针错误，程序可以继续执行。

注意：可以将lodash加到vue的原型链上，就不用在每一个组件中“import”了，先通过npm安装lodash

$ npm i --save lodash

在main.js中加入

import Lodash from 'lodash'
Vue.prototype._ = Lodash

在需要使用的地方用 "this._",就可以引用到lodash工具类了

业务二：对比两个数组，从第二个数组中找到第一个数组中新增的和删除的

逻辑可能有点绕，但是lodash中，_.difference(array, [values])（‘array’是你要检查的数组，[values]是需要排除的元素的数组）， 一个方法全部搞定。

举个栗子：现在有一个摄像机编号的列表，[1,2,3,4]，用户更新了这个列表为[1,5,6,7],现在后台需要将更新后列表对比原列表，新增的摄像机编号，删除的摄像机编号，分别下发，使用lodash两行代码搞定

let current = [1,2,3,4] //现有的摄像机列表
let update = [1,5,6,7] //更新后的摄像机列表
let deleteArr = _.difference(current, update) //[2,3,4]
let addArr = _.difference(update, current) //[5,6,7]
​```