# filter
filter也是一个常用的操作,它用于把`Array`的某些元素过滤掉,然后返回剩下的元素。
和`map()`类似,`Array`的`filter()`也接收一个函数。和`map()`不同的是,`filter()`把传入的函数依次作用于每个元素,然后根据返回值是`true`还是`false`决定保留还是丢弃该元素。
例如,在一个`Array`中,删掉偶数,只保留奇数,可以这么写:
~~~js
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
return x % 2 !== 0;
});
r; // [1, 5, 9, 15]
~~~
把一个`Array`中的空字符串删掉,可以这么写:
~~~
var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function (s) {
return s && s.trim(); // 注意:IE9以下的版本没有trim()方法
});
r; // ['A', 'B', 'C']
~~~
可见用`filter()`这个高阶函数,关键在于正确实现一个“筛选”函数。
# 实践
将标签字符串转换为标签数组,支持多种分隔符号
* [ ] map
* [ ] filter
* [ ] Set
* [ ] Array
* [ ] 扩展运算符
* [ ] 正则表达式
* [ ] split
* [ ] 箭头函数
```js
/**
* 将标签字符串转换为标签数组,支持多种分隔符号
* @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); //标签去重
//set.delete('');//去掉零长度字符串
return [...set] //输出数组形式
}
```
- 内容介绍
- 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
- 自定义事件
- 插槽
- 混入
- 过滤器
- 项目实践
- 标签编辑
- iView
- iView快速入门
- 课程讲座
- 环境配置
- 第3周 Javascript快速入门