在ES6盛行,ES78马上就要出来的情况下;我们还是需要懂得一些工具库的使用,比较推荐的是lodash。
在下面就会谈一谈为什么要使用lodash和lodash的基本使用。
首先要明白的是lodash的所有函数都不会在原有的数据上进行操作,而是复制出一个新的数据而不改变原有数据。类似immutable.js的理念去处理。
lodash是一套工具库,内部封装了很多字符串、数组、对象等常见数据类型的处理函数。
lodash的引用
import _ from ‘lodash’
用一个数组遍历来说明为什么要使用lodash
常规数组遍历
agent.forEach(function (n,key) {
agent[key].agent_id = agent[key].agent_name;
return agent;
})
使用lodash来遍历
_.forEach(agent,function(n,key) {
agent[key].agent_id= agent[key].agent_name
})
这是一个常见的forEach的数组遍历,使用了lodash过后,_.forEach()这是一个值,而不是一个函数。就可以直接
const arr = _.forEach();
这时候arr就是新的数组agent。而在常规的js数组遍历中,还需要考虑return的值和this的指向问题。虽然这样看起来,二者相差不大,但是在实际的开发过程中,熟练的使用lodash能大大的提高开发的效率。
再来总结一些lodash常用函数(还是推荐大家能去官网把所有的函数看一遍增加一些印象)
1.chunk,将数组进行切分。(也是官网的第一个函数)
const arr = [1,2,3,4,5,6,7,8,9];
_.chunk(arr,2);
// =>[[1,2],[3,4],[5,6],[7,8],[9]]
这个函数把数组按照一定的长度分开,返回新的数组。(片段化数组)
2.compact,去除假值。(将所有的空值,0,NaN过滤掉)
_.compact([‘1’,‘2’,’ ',0])
// => [‘1’,‘2’]
对应的还有一个数组去重函数,这在实际的开发中很有作用。
3.uniq,数组去重。(将数组中的对象去重,只能是数组去重,不能是对象去重。)
_.uniq([1,1,3])
// => [1,3]
这跟介绍的第二个函数compact有很好的配合作用。(后端接口传来的数据很多是有重复或者空值的,这时候就可以使用两个函数来过滤数据。ladash只是最基础的库,其实可以将几个函数封装起来组件自己的库。)
4.filter和reject,过滤集合,传入匿名函数。(二者放在一起讨论的原因是,两个函数类似但返回的值是相反。)
_.filter([1,2],x => x = 1)
// => [1]
_.reject([1,2],x => x=1)
// => [2]
这两个过滤器,第二个参数值是false的时候返回是reject的功能,相反是true的时候是filter。
5.map和forEach,数组遍历。(相似)
如果不明白map和forEach有什么相似的可以百度一下,简单说一下不同点就是,map的回调函数中是支持return返回值的。
不过二者都不改变原来的数组。
_.map([1,2],x => x+1)
// => [2,3]
推荐使用map。
6.merge,参数合并。(merge函数像是Git的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 }] }
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
基础知识是前端一面必问的,如果你在基础知识这一块翻车了,就算你框架玩的再6,webpack、git、node学习的再好也无济于事,因为对方就不会再给你展示的机会,千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多,并不是理解就ok了,有些是真的要去记。当然了我们是牛x的前端工程师,每天像背英语单词一样去背知识点就没必要了,只要平时工作中多注意总结,面试前端刷下题目就可以了。
什么?你问面试题资料在哪里,这不是就在你眼前吗(滑稽
p.com/2024/03/13/H4lCoPEF.jpg" />
最后
基础知识是前端一面必问的,如果你在基础知识这一块翻车了,就算你框架玩的再6,webpack、git、node学习的再好也无济于事,因为对方就不会再给你展示的机会,千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多,并不是理解就ok了,有些是真的要去记。当然了我们是牛x的前端工程师,每天像背英语单词一样去背知识点就没必要了,只要平时工作中多注意总结,面试前端刷下题目就可以了。
什么?你问面试题资料在哪里,这不是就在你眼前吗(滑稽