标签系统 · JS与WEB前端框架技术

# 知识点 * [ ] 剩余参数 * [ ] map/reduce/filter高阶函数 * [ ] Set * [ ] Array * [ ] forEach迭代 * [ ] 数组拼接 * [ ] 使用正则表达式进行字符串分割 # 标签编辑考虑编程实现以下功能： > 在界面设计中设计标签编辑组件需要一次性录入多个标签，但是手工录入或者导入的数据可能不一致，需要进行容错设计。 * [ ] 批量添加（编辑）标签Tags，两个标签之间使用分隔符分隔，系统转换为数组。 * [ ] 支持多种分隔符号，例如英文和中文的逗号，分号，|等都要兼容（容错） * [ ] 多次输入的数据拼接成一个数组。测试数据：计算机，电脑，，程序;数据；| 测试以上解析为：计算机,电脑,程序数据,测试 # 参考设计 * [ ] 根据给定的字符串解析标签数组 * [ ] 合并两个标签数组 * [ ] 去重 tags.js文件 * [ ] 合并多个标签数组 * [ ] 创建标签 ```javascript // 基本实现方法 function mergeTags1(tags1, tags2) { let newTagList = []; newTagList = newTagList.concat(tags1, tags2) let set = new Set(newTagList) return [...set]; } // 使用剩余参数，支持合并多个数组 function mergeTags(...tags) { let tagArray = []; tags.forEach((value) => { tagArray = tagArray.concat(value) }) return [...new Set(tagArray)]; } //另外一种实现方式 function mergeTags2(...tags) { let tagArray = tags.reduce((previous, current) => { return previous.concat(current); }); return [...new Set(tagArray)]; } /** * 将标签字符串转换为标签数组，支持多种分隔符号 * @param {标签自负换} tagString */ function createTags(tagString) { let newTag = tagString.trim(); // 匹配中文的和英文的逗号和分好作为分隔号，支持：,;#，； // 考虑英文但此间可能有空格，所以不能用空格间隔 const regex = /,|;|，|；|#/; let newTags = newTag.split(regex).map((val) => { return val.trim(); //去掉每个标签的首尾空格 }).filter((s) => { //把一个Array中的空字符串删掉 return s && s.trim(); // 注意：IE9以下的版本没有trim()方法 }); let set = new Set(newTags); //标签去重 return [...set] //输出数组形式 } ``` tags.html文件 ``` <html> <head> <script src="tags.js"></script> <script> let testData = " 电脑，数据; 测试，中国,,,," let tags1 = createTags(testData); let tags2 = ['计算机', '电脑']; let tags3 = createTags("背景，前端，，，，中国，电脑，人名币 "); let tags = mergeTags(tags1, tags2, tags2, tags3) console.log(tags); </script> </head> <body> <h1>标签录入系统</h1> </body> </html> ``` 控制台输出结果 ![](https://box.kancloud.cn/557d77a75080e3704293b383fc6b3ed7_762x345.png)