JavaScript之把表格数据变成数组对象tablereplaceargumentssplitfilterwhilepushslicemap

Posted 2022-12-02 web半晨

文章目录

• 1、前言
• 2、功能函数
• 3、函数执行

---

1、前言

定义一个名为tableToArray的函数。

第一步：在函数顶部定义三个变量，分别是i、towArray和result。i用于while循环退出条件；towArray用于存储二维数组；result存储最终结果。

第二步：使用正则的replace方法截取标签里面的值。replace方法的第二个参数是一个函数，需要通过函数的arguments获取截取到的值。此处的arguments长度为5，下标分别与函数的形参顺序一一对应。建议使用arguments实现对值的获取，但是个人喜欢使用形参获取值。arguments[0]：<td>浅粉红；arguments[1]：浅粉红；arguments[2]：红；arguments[3]：139；arguments[4]：字符串本身。

第三步：使用split方法把字符串分割成数组，分割依据是\\s正则表达式集合，\\s表示匹配一个空白字符，包括空格、制表符、换页符和换行符。至此得到一个带有许多空字符串项的数组。

第四步：使用数组的filter方法过滤数组中的空字符串项，最终得到一个纯值的数组。

第五步：使用while、push和slice生成二维数组。

第六步：使用map生成最终需要的数据结构，即数组对象数据结构的数据。

注意：传入的字符串必须使用模板字符包裹，如果传入的是普通字符串，那么第三步将无法正确执行，这也意味着之后的所有步骤将无意义。

---

2、功能函数

function tableToArray(str) 
	// 第一步
	let i = 0,
		towArray = [],
		result = [];
		
	// 第二步
	str = str.replace(/\\<[^>]*\\>(([^<])*)/gi, (undefined, strVal) => strVal);
	
	// 第三步
	str = str.split(/[\\s]/);

	// 第四步
	str = str.filter(item => item !== '');
	
	// 第五步
	while (i < str.length) towArray.push(str.slice(i, i += 4));
	
	// 第六步
	result = towArray.map((item, i) => 
		let item1 = item[0].toLowerCase(),
			item2 = item[1],
			item3 = item[2],
			item4 = item[3];
		
		return 
			// 设置id
			a_id: `$i + 1$item3`,
			// 形象描述
			b_imageDescription: item2,
			// 英文代码
			c_englishCode: item1,
			// 十六进制
			d_hexadecimal: item3,
			// RGB
			e_rgb: item4,
			// 搜索
			f_allText: `$item2$item1$item3$item4`,
			// 单击行文字高亮
			isShow: false
		;
	);
	
	return result;

---

3、函数执行

let str = `<table>
	<tr>
		<td bgcolor = "#ffb6c1"></td>
		<td>LightPink</td>
		<td>浅粉红</td>
		<td>#FFB6C1</td>
		<td>255,182,193</td>
	</tr >
	<tr>
		<td bgcolor="#ffc0cb"></td>
		<td>Pink</td>
		<td>粉红</td>
		<td>#FFC0CB</td>
		<td>255,192,203</td>
	</tr>
	<tr>
		<td bgcolor="#dc143c"></td>
		<td>Crimson</td>
		<td>猩红</td>
		<td>#DC143C</td>
		<td>220,20,60</td>
	</tr>
</table>`;

console.log(tableToArray(str));
// […, …, …]