項目實踐 · JS與WEB前端框架技術

# 知識點 * [x] 使用prototype實現類 * [x] 剩余參數 * [x] map/reduce/filter高階函數 * [x] Set * [x] Array * [x] forEach迭代 * [x] 數組拼接 * [x] 使用正則表達式進行字符串分割文件：tags.prototype.js 使用prototype實現類以及類的繼承 ```js function Tags() { this.tags = []; } Tags.prototype.merge = function (...tags) { let tagArray = tags.reduce((previous, current) => { return previous.concat(current); }); return [...new Set(tagArray)]; } /** * 將標簽字符串轉換為標簽數組，支持多種分隔符號 * @param {標簽自負換} tagString */ Tags.prototype.create = function (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] //輸出數組形式 } //tag.add("tag1","tag2","tag3") //tag.add("tag1,tag2,tag3") Tags.prototype.add = function (...tags) { tags.forEach((tagString) => { if (Array.isArray(tagString)) { this.tags = this.merge(this.tags, tagString) } else { let tags = this.create(tagString); this.tags = this.merge(this.tags, tags) //或者使用如下的語法 //this.tags = this.constructor.merge(this.tags, tags) } }) } // tag.delete('tag') Tags.prototype.delete = function (tag) { let set = new Set(this.tags); set.delete(tag); this.tags = [...set]; } ``` ``` <html> <head> <script src="tags.prototype.js"></script> <script> const tagInstance = new Tags(); tagInstance.add("軟件"); tagInstance.add("背景，前端，，，，中國，電腦，人名幣 "); tagInstance.add('計算機', '電腦'); tagInstance.add(['測試', '北京']); tagInstance.delete("計算機"); console.log(tagInstance.tags); </script> </head> <body> <h1>標簽錄入系統</h1> </body> </html> ```