前端工作常见数组数据处理的一些场景总结

一.对于数组进行修饰返回一个新的数组;

01.描述。

我们工作常常会发现后端传过来的数据有些不仅仅键值为空,甚至都没有键,也就是我们常说的属性名,那我们就需要去修改一下,返回一个结构正常的数据;

02.代码。

javascript 复制代码
const data = [
	{ id: 1, name: 'John' ,age:''},
    { id: 2 },
	{ name: 'Jane' },
	{ id: 3, age: 30 }
];
const filteredData = data.map(item => ({...item, id: item.id || '不存在',age:item.age||'不存在啊1'}));

03.总结。

使用map是一个很方便的数组方法,可以return一个新的数组,代码量大大减少,初学对于map不太了解的话,可以查看一下es6的语法,对于一下forEach两者的区别。

二.对于数组元素进行判断,元素是否为空字符。

01.场景藐视。

比如说在默写情况,需要对于一些数据进行判断,全部的数据元素不能为空字符串,必须有内容才能往接口传参。

02.代码实现。

复制代码
const data = [
		  { id: 1, name: 'John' ,age:''},
		  { id: 2 },
		  { name: 'Jane' },
		  { id: 3, age: 30 }
		];
		let tag = ''
		const ss = ['id','name','age']
		for(let i=0;i<data.length;i++){
			for(let j=0;j<ss.length;j++){
				if(data[i][ss[j]]===''){
					tag = true
					break
				}
			}
		}
		console.log(tag);

03.总结。

双重for循环是工作中非常常用的,必须重视。

路过的大咖,喜欢的话点个赞!万分感谢!

相关推荐
CoolerWu1 天前
TRAE SOLO实战成功展示&总结:一个所见即所得的笔记软体
前端·javascript
Cassie燁1 天前
el-button源码解读1——为什么组件最外层套的是Vue内置组件Component
前端·vue.js
vx_bscxy3221 天前
告别毕设焦虑!Python 爬虫 + Java 系统 + 数据大屏,含详细开发文档 基于web的图书管理系统74010 (上万套实战教程,赠送源码)
java·前端·课程设计
北极糊的狐1 天前
Vue3 子组件修改父组件传递的对象并同步的方法汇总
前端·javascript·vue.js
spionbo1 天前
Vue3 前端分页功能实现的技术方案及应用实例解析
前端
AI绘画小331 天前
Web 安全核心真相:别太相信任何人!40 个漏洞挖掘实战清单,直接套用!
前端·数据库·测试工具·安全·web安全·网络安全·黑客
7***n751 天前
前端设计模式详解
前端·设计模式·状态模式
用户47949283569151 天前
Vite 中 SVG 404 的幕后黑手:你真的懂静态资源处理吗?
前端·vite
未来之窗软件服务1 天前
幽冥大陆(三十五)S18酒店门锁SDK go语言——东方仙盟筑基期
java·前端·golang·智能门锁·仙盟创梦ide·东方仙盟·东方仙盟sdk
卸任1 天前
解密Flex布局:为什么flex:1仍会导致内容溢出
前端·css·flexbox