標簽系統 · 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)