# 知识点
* [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>
```
- 内容介绍
- EcmaScript基础
- 快速入门
- 常量与变量
- 字符串
- 函数的基本概念
- 条件判断
- 数组
- 循环
- while循环
- for循环
- 函数基础
- 对象
- 对象的方法
- 函数
- 变量作用域
- 箭头函数
- 闭包
- 高阶函数
- map/reduce
- filter
- sort
- Promise
- 基本对象
- Arguments 对象
- 剩余参数
- Map和Set
- Json基础
- RegExp
- Date
- async
- callback
- promise基础
- promise-api
- promise链
- async-await
- 项目实践
- 标签系统
- 远程API请求
- 面向对象编程
- 创建对象
- 原型继承
- 项目实践
- Classes
- 构造函数
- extends
- static
- 项目实践
- 模块
- import
- export
- 项目实践
- 第三方扩展库
- immutable
- Vue快速入门
- 理解MVVM
- Vue中的MVVM模型
- Webpack+Vue快速入门
- 模板语法
- 计算属性和侦听器
- Class 与 Style 绑定
- 条件渲染
- 列表渲染
- 事件处理
- 表单输入绑定
- 组件基础
- 组件注册
- Prop
- 自定义事件
- 插槽
- 混入
- 过滤器
- 项目实践
- 标签编辑
- 移动客户端开发
- uni-app基础
- 快速入门程序
- 单页程序
- 底部Tab导航
- Vue语法基础
- 模版语法
- 计算属性与侦听器
- Class与Style绑定
- 样式与布局
- Box模型
- Flex布局
- 内置指令
- 基本指令
- v-model与表单
- 条件渲染指令
- 列表渲染指令v-for
- 事件与自定义属性
- 生命周期
- 项目实践
- 学生实验
- 贝店商品列表
- 加载更多数据
- 详情页面
- 自定义组件
- 内置组件
- 表单组件
- 技术专题
- 状态管理vuex
- Flyio
- Mockjs
- SCSS
- 条件编译
- 常用功能实现
- 上拉加载更多数据
- 数据加载综合案例
- Teaset UI组件库
- Teaset设计
- Teaset使用基础
- ts-tag
- ts-badge
- ts-button
- ta-banner
- ts-list
- ts-icon
- ts-load-more
- ts-segmented-control
- 代码模版
- 项目实践
- 标签组件
- 失物招领客户端原型
- 发布页面
- 检索页面
- 详情页面
- 服务端开发技术
- 服务端开发环境配置
- Koajs快速入门
- 快速入门
- 常用Koa中间件介绍
- 文件上传
- RestfulApi
- 一个复杂的RESTful例子
- 使用Mockjs生成模拟数据
- Thinkjs快速入门
- MVC模式
- Thinkjs介绍
- 快速入门
- RESTful服务
- RBAC案例
- 关联模型
- 应用开发框架
- 服务端开发
- PC端管理界面开发
- 移动端开发
- 项目实践
- 失物招领项目
- 移动客户端UI设计
- 服务端设计
- 数据库设计
- Event(事件)
- 客户端设计
- 事件列表页面
- 发布页面
- 事件详情页面
- API设计
- image
- event
- 微信公众号开发
- ui设计规范