首页 前端知识 循序渐进VUE Element 前端应用开发(7)--- 介绍一些常规的JS处理函数

循序渐进VUE Element 前端应用开发(7)--- 介绍一些常规的JS处理函数

2024-05-31 19:05:35 前端知识 前端哥 444 18 我要收藏

输出:[10,20,30]

  • map函数是对数组每个元素的映射操作,并返回一个新数组,原数组不会改变将newNums中每个数字乘2:

const nums = [10,20,30,111,222,333]

let newNums=nums.map(function(n){

return n*2

})

输出:[20,40,60,222,666]

  • reduce函数主要用于对数组所有元素的汇总操作,如全部相加、相乘等

const nums = [10,20,30,111,222,333]

let newNums=nums.reduce(function(preValue,n){

return PreValue+n

},0)

输出:726

  • 有时候可以结合几种处理方式一起,如下综合案例所示。

const nums = [10,20,30,111,222,333]

let newNums=nums.filter(function(n){

return n<100

}).map(function(n){

return n*2

}).reduce(function(preValue,n){

return preValue+n

},0)

结果:120

另外还有一个数组集合的find方法,和filter方法类似。

  • find()方法主要用来返回数组中符合条件的第一个元素(没有的话,返回undefined)

var Array = [1,2,3,4,5,6,7];

var result = Array.find(function(value){

return value > 5; //条件

});

console.log(result);//6

console.log(Array);//[1,2,3,4,5,6,7]

同样我们也可以在vue里面,利用require.context的处理机制,遍历文件进行处理,也需要用到了filter,如下代码所示。

下面代码是我对某个文件夹里面的文件进行一个过滤处理操作:

const req = require.context(‘vue-awesome/icons’, true, /.js$/)

const requireAll = requireContext => requireContext.keys()

const re = /./(.*).js/

const vueAwesomeIcons = requireAll(req).filter((key) => { return key.indexOf(‘index.js’) < 0 }).map(i => {

return i.match(re)[1]

})

export default vueAwesomeIcons

2、递归处理

==================================================================

有时候,我们需要从一个JSON集合里面,由于集合是嵌套的,如children里面还有chilren集合,根据某个关键属性进行查询,这种处理方式就要用到递归了。

例如我定义的一个菜单集合里面,就是这样一个嵌套的结构,需要根据名称来获得对应的对象的时候,就涉及到了一个递归处理函数。

首先我们来看看菜单的JSON集合。

// 此菜单数据一般由服务器端返回

export const asyncMenus = [

{

id: ‘1’,

pid: ‘-1’,

text: ‘首页’,

icon: ‘dashboard’,

name: ‘dashboard’

},

{

id: ‘2’,

pid: ‘-1’,

text: ‘产品信息’,

icon: ‘table’,

children: [

{

id: ‘2-1’,

pid: ‘2’,

text: ‘产品展示’,

name: ‘product-show’,

icon: ‘table’

}]

},

{

id: ‘3’,

pid: ‘-1’,

text: ‘杂项管理’,

icon: ‘example’,

children: [

{

id: ‘3-1’,

pid: ‘3’,

text: ‘图标管理’,

name: ‘icon’,

icon: ‘example’

},

{

id: ‘3-3’,

pid: ‘3’,

text: ‘树功能展示’,

name: ‘tree’,

icon: ‘tree’

},

{

id: ‘3-2’,

pid: ‘3’,

text: ‘二级菜单2’,

icon: ‘tree’,

children: [

{

id: ‘3-2-2’,

pid: ‘3-2’,

text: ‘三级菜单2’,

name: ‘menu1-1’,

icon: ‘form’

}

]

}

]

}

]

如果我们需要根据ID来遍历查询,就是一个典型的递归查询处理。

// 根据菜单id来获取对应菜单对象

FindMenuById(menuList, menuid) {

for (var i = 0; i < menuList.length; i++) {

var item = menuList[i];

if (item.id && item.id === menuid) {

return item

} else if (item.children) {

var foundItem = this.FindMenuById(item.children, menuid)

if (foundItem) { // 只有找到才返回

return foundItem

}

}

}

}

这里值得注意的是,不能在递归的时候,使用下面直接返回:

return this.FindMenuById(item.children, menuid)

而需要判断是否有结果在进行返回,否则嵌套递归就可能返回undefined类型:

var foundItem = this.FindMenuById(item.children, menuid)

if (foundItem) { // 只有找到才返回

return foundItem

}

3、forEach遍历集合处理

===========================================================================

在很多场合,我们也需要对集合进行一个forEach的遍历处理,如下根据它的键值进行处理,注册全局过滤器的处理操作:

// 导入全局过滤器

import * as filters from ‘./filters’

// 注册全局过滤器

Object.keys(filters).forEach(key => {

Vue.filter(key, filters[key])

})

或者我们在通过API方式获取数据后,对集合进行处理的操作:

// 获取产品类型,用于绑定字典等用途

GetProductType().then(data => {

if (data) {

this.treedata = [];// 树列表清空

data.forEach(item => {

this.productTypes.set(item.id, item.name)

this.typeList.push({ key: item.id, value: item.name })

var node = { id: item.id, label: item.name }

this.treedata.push(node)

})

// 获取列表信息

this.getlist()
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。

深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!

因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。

img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!

由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!

如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)


前端面试题汇总


前端面试题是我面试过程中遇到的面试题,每一次面试后我都会复盘总结。我做了一个整理,并且在技术博客找到了专业的解答,大家可以参考下:

由于篇幅有限,只能分享部分面试题,完整版面试题及答案可以【点击我】阅读下载哦~无偿分享给大家

感悟

面试后我都会复盘总结。我做了一个整理,并且在技术博客找到了专业的解答,大家可以参考下:

由于篇幅有限,只能分享部分面试题,完整版面试题及答案可以【点击我】阅读下载哦~无偿分享给大家

感悟

春招面试的后期,运气和实力都很重要,自己也是运气比较好,为了回馈粉丝朋友们(毕竟自己也玩了这么久哈哈哈),整理个人感悟和总结以上。最后祝愿大家能够收获理想offer!!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10157.html
标签
评论
发布的文章

用点jquery实现的登录页面

2024-06-06 00:06:07

echarts-锥型柱状图

2024-06-06 00:06:05

echarts的使用

2024-06-06 00:06:00

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!