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:返回符合条件的第一个对象

相关推荐
HjhIron几秒前
前端面试高频考点 —— TS 高级类型 & CSS 三列布局
前端
李剑一10 分钟前
《牛来》火了?我用ThreeJs实现了一个简易版的,代码全送给你,文章最后附演示效果
前端
世界哪有真情1 小时前
AI 写代码两年多,我发现自己越来越"看不进去"了
前端·后端·ai编程
星栈1 小时前
被 Rust async 纠正的三个异步认知
前端·后端·rust
前端_刘师兄1 小时前
前端开发工程师转FAE工程师路线规划
前端
禁止摆烂_才浅1 小时前
前端 AI 面试题
前端·面试·ai编程
程序员老赵1 小时前
Docker 部署 ZLMediaKit:轻松搭建高性能流媒体服务平台
前端·javascript·后端
Liora_Yvonne1 小时前
为什么每次发版,总有用户看到白屏?
前端
风月说与山鬼1 小时前
四、浏览器存储
前端·vue.js
hunterandroid1 小时前
[Android 从零到一] ViewPager2 与 Fragment 生命周期协同:从预加载到状态一致性
android·前端