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

相关推荐
SchuylerEX10 分钟前
第六章 JavaScript 互操(2).NET调用JS
前端·c#·.net·blazor·ui框架
东风西巷1 小时前
Rubick:基于Electron的开源桌面效率工具箱
前端·javascript·electron·软件需求
探码科技2 小时前
AI知识管理软件推荐:九大解决方案与企业应用
前端·ruby
编程小黑马2 小时前
解决flutter 在控制器如controller 无法直接访问私有类方法的问题
前端
Miracle_G2 小时前
每日一个知识点:JavaScript 箭头函数与普通函数比较
javascript
unfetteredman2 小时前
Error: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.32' not found
前端·javascript·vite
云存储小精灵2 小时前
Dify x 腾讯云 COS MCP:自然语言解锁智能数据处理,零代码构建 AI 新世界
前端·开源
山间板栗2 小时前
微信小程序环境变量设置方案
前端
电商API大数据接口开发Cris2 小时前
Java Spring Boot 集成淘宝 SDK:实现稳定可靠的商品信息查询服务
前端·数据挖掘·api
pepedd8642 小时前
LangChain:大模型开发框架的全方位解析与实践
前端·llm·trae