JavaScript之把表格数据变成数组对象截取标签tablereplaceargumentssplitfilterwhilepushslicemap

Posted 牧碼人

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript之把表格数据变成数组对象截取标签tablereplaceargumentssplitfilterwhilepushslicemap相关的知识,希望对你有一定的参考价值。

文章目录


1、前言

定义一个名为tableToArray的函数。

第一步:在函数顶部定义三个变量,分别是itowArrayresulti用于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方法过滤数组中的空字符串项,最终得到一个纯值的数组。

第五步:使用whilepushslice生成二维数组。slice中的i += 4表示每次截取数组的4个连续值,因为截取出来的值都是4个值是连续的值,也是需要分到一组的值。

第六步:使用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));
// […, …, …]

以上是关于JavaScript之把表格数据变成数组对象截取标签tablereplaceargumentssplitfilterwhilepushslicemap的主要内容,如果未能解决你的问题,请参考以下文章

javascript 数组里面的对象变成了undefined

php面向对象之把对象串行化

获取地址栏的key-value形式的值(包括重复的key值)形成对象--重复的变成数组形式

剑指offer之把数组排成最小的数

剑指offer三十二之把数组排成最小的数

字符串的截取