一个循环引发的思考

Posted 2022-12-04 前端e站

1、函数的场景
通过此函数需要解决的场景是这样的。
在React中，需要渲染一个列表，列表中后端返回了一个数组格式的数据，需要前端做一个简单的展示。这时候就考虑后端修改接口返回值，但是问题来了，后端一般不会轻易去给你做对应的修改。（当然后端能够修改是最符合业务标准的哈）
这个时候怎么办呢？肯定只能靠我们前端自己想办法了。这种情况在现实开发过程中是很常见的，所以心态要放好哈。
2、函数的构想
前面说了，这只是一个简单的数组数据展示。
第一时间想到的就是循环，什么 for ， forEach …等等，就出现在我们的脑洞里了 ，当然，脑洞更大一点的可能还会延伸一下 es6 的语法，就比如说博主我。
3、函数的实现
for方法
下面这个例子是从列表中拿到的数据，所有用了两个参数接收 record，name，record 参数是当前行的信息，name 对应所需要转化的数组 name。

// record 数据

	arr: [
		
			label: "我是label1",
			value: "a"
		,
		
			label: "我是label2",
			value: "b"
		
	],
	...

// 当前对象对应的是行信息 record
// arr则是要传入的参数 name

/**
 * @desc 返回数组需要渲染成字符串展示的转化方法
 * @eg [value: 1, label: '我是label1', ...] => return label, label
 * @param * record 行的信息
 * @param * name 对应的数组名
 * @returns String 逗号分开的字符串
 */
const arrJoinRender = (record, name) => 
    let a = [];
    let arr = record[name];
    for (let i = 0; i < arr?.length; i++) 
        a.push(arr[i].label);
    
    return a.length === 0 ? '-' : a.join(' , ');
;
export 
    arrJoinRender
;

// 调用这个方法
arrJoinRender(record, "arr") // 我是label1，我是label2

关注我，一起学习前端小知识。