Vue的map()方法和filter()方法的使用

map()

map():方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值

案例:

c 复制代码
const data = res.map(item => item.id);
const data = res.map(item => return item.id);
const data = res.map(item => { name: item.name, id: item.id })
const data = res.map(item => { text: item.id + item.name });
const data = res.map(item => {
	const temp = find(options, { code: item });
	return temp;
})

filter()

filter():方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素

c 复制代码
const arr= [4, 9, 16, 25];
const arr1 = arr.map(item => item+2)
console.log(arr)
console.log(arr1)

注:

foreach遍历数组,不会有返回值

map遍历数组,返回处理后的新数组

every判断数组中每一个元素是否符合某个条件,返回一个布尔值

some判断数组中是否有元素符合某个条件,返回一个布尔值

filter筛选数组中满足条件的元素,返回筛选后的新数组

find:返回符合条件的第一个对象

相关推荐
进取星辰6 分钟前
31、魔法生物图鉴——React 19 Web Workers
开发语言·javascript·ecmascript
GISer_Jing33 分钟前
Vue 和 React 状态管理的性能优化策略对比
vue.js·react.js·性能优化
海天胜景34 分钟前
jqGrid冻结列错行问题,将冻结表格(悬浮表格)与 正常表格进行高度同步
前端
清风细雨_林木木1 小时前
解决 Tailwind CSS 代码冗余问题
前端·css
HSunR1 小时前
vue3 elementplus tabs切换实现
javascript·vue.js·elementui
搏博1 小时前
WPS中代码段的识别方法及JS宏实现
开发语言·javascript·wps
三天不学习1 小时前
VueUse/Core:提升Vue开发效率的实用工具库
前端·javascript·vue.js·vueuse
好青崧1 小时前
等于和绝对等于的区别
javascript
余道各努力,千里自同风2 小时前
CSS实现文本自动平衡text-wrap: balance
前端·css
半青年2 小时前
Qt图表库推荐指南与分析
c语言·开发语言·javascript·c++·qt·信息可视化