JavaScript之把表格数据变成数组对象截取标签tablereplaceargumentssplitfilterwhilepushslicemap
Posted 牧碼人
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript之把表格数据变成数组对象截取标签tablereplaceargumentssplitfilterwhilepushslicemap相关的知识,希望对你有一定的参考价值。
文章目录
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
生成二维数组。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