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

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

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循环是工作中非常常用的,必须重视。

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

相关推荐
@PHARAOH1 小时前
HOW - Kratos 入门实践(二)- 概念学习
前端·微服务·go
We་ct5 小时前
LeetCode 77. 组合:DFS回溯+剪枝,高效求解组合问题
开发语言·前端·算法·leetcode·typescript·深度优先·剪枝
KerwinChou_CN5 小时前
什么是流式输出,后端怎么生成,前端怎么渲染
前端
爱上妖精的尾巴5 小时前
8-20 WPS JS宏 正则表达式-懒惰匹配
服务器·前端·javascript
网络点点滴6 小时前
组件通信props方式
前端·javascript·vue.js
二十雨辰6 小时前
[小结]-线上Bug监控
前端·bug
前端技术6 小时前
【鸿蒙实战】从零打造智能物联网家居控制系统:HarmonyOS Next分布式能力的完美诠释
java·前端·人工智能·分布式·物联网·前端框架·harmonyos
CHU7290356 小时前
指尖践行环保——旧衣服回收小程序前端功能玩法详解
前端·小程序
LawrenceLan6 小时前
38.Flutter 零基础入门(三十八):网络请求实战 http、dio —— 获取列表与刷新 UI
开发语言·前端·flutter·dart
csdn_aspnet6 小时前
Asp.Net Core 10.0 中的 Blazor 增强功能
前端·后端·asp.net·blazor·.net10