lodash(一)

  • 前言:

lodash是一个具有一致接口、模块化、高性能等特性的JavaScript工具库(官网地址:http://lodashjs.com/docs/#_differencearray-values)。

  • 过程:

接触js也已经有一年多的时间了,那天无意间从大神同事那里听到这个性能更好的工具,终于抽出时间看看它的文档,竟然有了意想不到的收获:之前在项目中总是遇到关于数组的各种处理,比如合并数组去重什么的,现在只要一行代码便可完美解决,真是有点小激动!话不多说,直接说过程:

1.它的安装方法很多种,官网上有很详细的介绍,于是就不重复介绍了,只是分享自己用到的吧!

1)用在node.js环境下:

npm i lodash –save

2)用在HTML中:

<script src="lodash.js"></script>

注意:关于在浏览器中用到lodash文件的引用问题,只有在引入lodash.min.js后,lodash才会正常使用;而其他版本的,皆会报“ Uncaught TypeError: _.difference is not a function”的错误,原因就在于里面没有difference方法,至于为什么没有,那就不得而知了。

3)csdn下:(https://www.jsdelivr.com/projects/lodash

从上面的网址中可以自行选择需要的lodash版本。

2.接着,就来看看在lodash中的收获吧(都是使用lodash中的方法):

1)_.union([arrays]):合并数组,并返回去重后的数组

    var arr1 = _.union([2,3],[3,8],[2,7]);//返回的是组合在一起并去重的数组,但并非排序后的数组
     console.log(arr1);//[2, 3, 8, 7]

2)_.uniq(array, [isSorted], [iteratee], [thisArg]):删除重复行

array:需要检查的数组;[isSorted]:可有可无,如为true,则对数组排序,否则不排序;[iteratee] (Function|Object|string): The function invoked per iteration.

    var arr2 = _.uniq([2,3,3,8,2,7],true);
    console.log(arr2);//[2, 3, 8, 7]
    var arr3 = _.uniq([3,3,2,1, 1, 2], true);
    console.log(arr3);//[3, 2, 1]

疑问:为什么我使用的排序属性没有起作用呢?百思不得其解……

3)_.without(array, [values]):返回一个新数组,其中不包括[values]中的元素([values]也就是过滤掉的元素)

    var arr4 = _.without([3,3,2,1, 1, 2],3);
    console.log(arr4);//[2, 1, 1, 2]

4)_.xor([arrays]):合并数组,并返回一个新数组,去除掉重复出现的元素

    var arr8 = _.xor([1,2,4], [3,2,8,5],[2,8,7]);    console.log(arr8);//[1, 4, 3, 5, 7]
  • 后言:

关于lodash的更多便利,接下来继续学习!

时间: 2024-11-10 13:53:26

lodash(一)的相关文章

lodash用法系列(5),链式

Lodash用来操作对象和集合,比Underscore拥有更多的功能和更好的性能. 官网:https://lodash.com/引用:<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>安装:npm install lodash 首先通过npm安装lodash:npm i --save lodash 在js文件中引用lodash:var _ =

lodash用法系列(4),使用Map/Reduce转换

Lodash用来操作对象和集合,比Underscore拥有更多的功能和更好的性能. 官网:https://lodash.com/引用:<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>安装:npm install lodash 首先通过npm安装lodash:npm i --save lodash 在js文件中引用lodash:var _ =

lodash用法系列(3),使用函数

Lodash用来操作对象和集合,比Underscore拥有更多的功能和更好的性能. 官网:https://lodash.com/引用:<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>安装:npm install lodash 首先通过npm安装lodash:npm i --save lodash 在js文件中引用lodash:var _ =

[Javascript] Lodash: Refactoring Simple For Loops (_.find, _.findLast, _.filter)

This lesson shows how to refactor your old loops into using a simpler and more powerful lodash-style. We will start by looking at how many people traditionally write JavaScript for loops and then talk about the alternate style and benefits that Lodas

lodash源码学习(10)

_.delay(func, wait, [args]) 延迟wait毫秒之后调用该函数,添加的参数为函数调用时的参数 //delay.js var baseDelay = require('./_baseDelay'),//baseDelay方法 baseRest = require('./_baseRest'),//创建使用rest参数方法 toNumber = require('./toNumber');//转化为数字 /** * * @param {Function} func 需要延迟执

lodash源码学习(2)

继续学习lodash,依然是数组的方法 “Array” Methods _.indexOf(array, value, [fromIndex=0]) 获取value在数组 array所在的索引值 使用 SameValueZero方式比较(第一个全等===的元素). 如果 fromIndex 值是负数, 则从array末尾起算 该方法依赖于strictIndexOf和baseIndexOf方法,先看它们的源码 //_strictIndexOf.js /** * _.indexOf的专业版本,对元素

lodash源码学习(1)

前端开发这个行业这几年发展速度太快,各种新技术不断更新,从es5到es6再到es7,从grunt,browserify到webpack,gulp,rollup,还有什么postcss,typescript,flow...,一直都在学习新技术,作为一个才工作不久的新人,感觉内心有点浮躁了,想巩固一下基础,之前听别人说lodash的源码很不错,所以学习学习.我不是什么大牛,如果有什么分析得不对的,大家请务必要原谅我....话不多说,lodash版本4.17.4,开始!. 1.“Array” Meth

lodash(二)对象+循环遍历+排序

前言: lodash(一)中只是研究了array中的多种方法,接下来就是经常用到的循环遍历问题 过程: 1._.forEach(collection, [iteratee=_.identity], [thisArg])  遍历 _.forEach([22,33,11,55],function (value) {//若一个参数,返回的便是其value值 console.log(value);//22 33 11 55 }); _.forEach([22,33,11,55],function (va

lodash常用方法1--查询

1.find var _ = require('lodash'); var user1 = { name: 'zhangsan', height: 180, weight: 120 }; var user2 = { name: 'lisi', height: 180, weight: 130 }; var user3 = { name: 'zhangsan', height: 180, weight: 131 }; var users = [user1, user2, user3]; var r

lodash源码(2)

1.flatten 对深层嵌套数组的抹平 _.flatten([1, [2, 3, [4]]]);* // => [1, 2, 3, [4]]** // using `isDeep`* _.flatten([1, [2, 3, [4]]], true);* // => [1, 2, 3, 4]在方法中使用了递归的算法: 1.递归的产生条件 2.递归的结束条件 递归就是数学的归纳法,采用数据结构的栈的模式自己做的递归的一个算法(原lodash涉及了很多个文件,这里只是提供了一个简单的思路.并没有