项目实践 · 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> ```