Underscore和lodash 介绍

￡神魔★判官ぃ 2021-09-17 03:38 445阅读 0赞

Lodash 和 Underscore 是非常优秀的当代JavaScript的工具集合框架，它们被前端开发者广泛地使用。

如官方所介绍的那样，Lodash是一个具有一致接口、模块化、高性能的JavaScript工具库。一开始Lodash只是Underscore.js的一个fork，之后再原有的成功基础上取得了更大的成果，lodash的性能远远的超过了Underscore。因此，很多模块放弃了Underscore转入Lodash的怀抱。目前，lodash是npm仓库中依赖最多的库。使用lodash的全部函数需要使用全局的\_就像是使用jQuery的函数前加上全局的$一样。lodash的使用极大的减少了你的代码量以及编写代码时间。\[[附上lodash的API文档\](http://lodashjs.com/docs/)][lodash_API_http_lodashjs.com_docs] \]

接下来，展示一些简单的用法。

**循环**

// 典型的循环写法
    for(let i = 0;i < 5;i++){
      //todo
    }
    
    // lodash写法
    _.times(5,()=>{
      //todo
    })

**过滤**

_.compact([0,1,false,2,'',underfined,3])
    // => [1,2,3]

直接通过一个函数删选掉所有假值的数据，比寻常的遍历更加方便。

var arr1 = [1,2,3,4]
    var arr2 = _.remove(arr1,(n) => {
      return n%2 == 0
    })
    
    //arr1 => [1,3]
    //arr2 => [2,4]

通过\_.remove() 的方法删选出了符合条件的数组元素，并构成一个新数组，同时对原数组进行了去除改元素的操作。

**迭代**

var arr = [{
      name: 'linge',
      son: [{name: 'liu'},{name: 'chen'}]
    },{
      name: 'huangxiaoshu',
      son: [{name: 'diao'},{name: 'xu'}]
    }]
    
    _.map(arr,'name')  //['linge','huangxiaoshu']
    _.map(arr,'son[0].name')  //['liu','diao']

lodash中map的方法也是异常强大，它即可以用`_.map(arr,()=>{//todo})` 如同原生js的形式对数组进行迭代，另外lodash中map方法能够遍历深度嵌套的对象属性，这一点在实际开发的时候是非常有用的。

**对象扩展**

//Lodash
    _.assign({name: 'shidiao',age: 38},{sex: 'famale'},{name: 'liushitao'})
    //ES6新增函数
    Object.assign({name: 'shidiao',age: 38},{sex: 'famale'},{name: 'liushitao'})
    //{name: 'liushitao',age: 38,sex: 'female'}

odash中的\_.assign只是浅拷贝，这与ES6新增的函数`Object.assign`功能重复了。

**深度克隆**  
个人认为深度克隆是lodash里面最好用的函数之一。众所周知，深度克隆JavaScript对象是挺麻烦的事情，但是lodash一个简简单单的\_.cloneDeep方法帮你完成了繁琐的深度克隆操作，使用\_.clone(obj,true)也能起到相同的作用，但是\_.clone能够指定深度克隆的层级。

var obj = {
      name: 'linge',
      son: [{name: 'liu'},{name: 'chen'}]
    };
    var deep = _.cloneDeep(obj);
    obj === deep //false

**删选对象属性**

var obj = {
      name: 'linge',
      age: 20
    }
    
    _.omit(obj, 'age')  // {name: 'linge'}

这个方法在实际的开发项目中也相当实用，值得注意的是\_.omit返回了一个新的数组，并不改变原数组。与\_.omit相反\_.pick方法可以挑选出指定的属性，组成一个新数组。

总结  
总的来说，lodash还是非常实用的，它让代码看上去更加精简，不至于很臃肿，提高了代码的可读性以及逻辑性。虽然部分的方法以及可以被ES6的新方法进行代替，但丝毫掩盖不了它的价值

参考：

[https://segmentfault.com/a/1190000004460234][https_segmentfault.com_a_1190000004460234]

[https://blog.csdn.net/lyz\_linge/article/details/78217683][https_blog.csdn.net_lyz_linge_article_details_78217683]

[lodash_API_http_lodashjs.com_docs]: http://lodashjs.com/docs/
[https_segmentfault.com_a_1190000004460234]: https://segmentfault.com/a/1190000004460234
[https_blog.csdn.net_lyz_linge_article_details_78217683]: https://blog.csdn.net/lyz_linge/article/details/78217683