🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 知识点 * [ ] 剩余参数 * [ ] 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)