循序渐进VUE+Element 前端应用开发(7）— 介绍一些常规的JS处理函数-CSDN博客

本文链接：https://blog.csdn.net/weixin_33549415/article/details/135958182

本文介绍了在Vue+Element前端开发中常用的JavaScript处理方法，包括filter、map、reduce、forEach、Object.assign以及slice()方法的使用，通过实例展示了如何在实际开发中应用这些技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在我们使用VUE+Element 处理界面的时候，往往碰到需要利用JS集合处理的各种方法，如Filter、Map、reduce等方法，也可以涉及到一些对象属性赋值等常规的处理或者递归的处理方法，以前对于这些不是很在意，但往往真正使用的时候，需要了解清楚，否则很容易脑袋出现短路的情况。本篇随笔列出一些在VUE+Element 前端开发中经常碰到的JS处理场景，供参考学习。

1、常规集合的filter、map、reduce处理方法

filter函数的主要用途是对数组元素进行过滤，并返回一个符合条件的元素的数组

const nums = [10,20,30,111,222,333]
let newNums=nums.filter(function(n){
    return n<100
})

输出：[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