检测数组元素,并返回符合条件所有元素的数组。

1、过滤数组中不符合条件的元素

let arr = [1, 2, 3, 4, 5, 6];

// 方式一
let newArr = arr.filter((value, index, array) => {
if(value % 2 === 0) {
return value
}
});
console.log(newArr);// [ 2, 4, 6 ] // 方式二
newArr = arr.filter((item) => item % 2 === 0);
console.log(newArr);// [ 2, 4, 6 ]

2、过滤数组中空字符串、undefined、null的元素

let arr = ['a', '', 'b', undefined, 'c', null];
let newArr = arr.filter(item => item);
console.log(newArr);// [ 'a', 'b', 'c' ]

3、过滤数组中重复的元素(数组去重)

let arr = [1, 2, 2, 3, 3, 3, 4, 5];
let newArr = arr.filter((value, index, array) => array.indexOf(value) === index);
console.log(newArr);// [ 1, 2, 3, 4, 5 ]

ES5新增数组方法(1):filter的更多相关文章

  1. 4日6日--ES5新增数组方法

    forEach使用的函数调用,所以占内存比较大,不如定长for循环和迭代for循环 1.通过forEach将数组中的元素逐个表示出来(遍历方法,读取操作). 2.通过map将原数组中的元素进行算数运算 ...

  2. js数组定义和方法 (包含ES5新增数组方法)

    数组Array 1. 数组定义 一系列数据的集合成为数组.数组的元素可以为任何类型的数据(包括数组,函数等),每个元素之间用逗号隔开,数组格式:[1,2,3]. 2. 数组创建方式 (1) 字面量方法 ...

  3. ES5新增数组方法测试和字符串常见API测试

    首先是ES5新增数组方法测试: <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

  4. ES5新增数组方法every()、some()、filter()、map()

    JavaScript ES5标准中新增了一些Array方法,如every().some().filter().map().它们的出现使我们能够更加便利地操作数组,但对IE9以下浏览器的兼容性比较差.下 ...

  5. ES5新增数组方法

    forEach/map   every/some  indexOf/lastIndexOf  filter reduce Array.isArray

  6. ES5新增数组方法(4):every

    检查数组元素的每个元素是否符合条件. // 数组中的元素全部满足指定条件返回true let arr = [1, 3, 5, 7, 9]; console.log(arr.every((value, ...

  7. ES5新增数组方法(3):some

    检查数组元素中是否有元素符合指定. // 数组中的元素部分满足指定条件返回true let arr = [1, 3, 5, 7, 9]; console.log(arr.some((value, in ...

  8. ES5新增数组方法(2):map

    通过指定函数处理数组的每个元素,并返回处理后的数组. 1.计算数组中每个元素的平方 let arr = [1, 2, 3, 4, 5, 6]; let newArr = arr.map(item =& ...

  9. ES5新增数组的方法

    ES5新增数组的方法 ES5新增数组常见方法(indexOf/forEach/map/filter/some/every) .indexOf( data , start)  检测数组中是否存在指定数据 ...

随机推荐

  1. Object Detection with Discriminatively Trained Part Based Models

    P. Felzenszwalb, R. Girshick, D. McAllester, D. RamananObject Detection with Discriminatively Traine ...

  2. NPM 常见错误

    找不到兼容版本 你有一个过时的npm.请更新到最新稳定的npm. 权限错误 npm ERR! code EPERM npm ERR! code EACCES 修复缓存的权限sudo chown -R ...

  3. linux 执行程序时,提示not found问题分析

    sh: ./test: not found 通常可以通过readelf查看该进程文件所以依赖的运行环境,检查相关路径是否存在对应的文件. 比如如下: 1. 检查/lib目录,发现ld-X.XX.so为 ...

  4. ssm整合-错误4

    严重: Servlet.service() for servlet [dispatcher] in context with path [/management] threw exception [R ...

  5. Linux运维工作中需要掌握的知识

    说到工具,在行外可以说是技能,在行内我们一般称为工具,就是运维必须要掌握的工具.我就大概列出这几方面,这样入门就基本没问题了.linux系统如果是学习可以选用redhat或centos,特别是cent ...

  6. angular、angular2、vue的生命周期

    angular生命周期是什么 1.Angular每个组件都存在一个生命周期,从创建,变更到销毁.Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力,掌握 ...

  7. JS高级. 03 混入式继承/原型继承/经典继承、拓展内置对象、原型链、创建函数的方式、arguments、eval、静态成员、实例成员、instanceof/是否在同一个原型链

    继承:当前对象没有的属性和方法,别人有,拿来给自己用,就是继承 1 混入式继承 var I={ }; var obj = { name: 'jack', age:18, sayGoodbye : fu ...

  8. phpstudy apache启动失败,80端口占用问题解决方案

    安装phpstydy,启动apache时,启动失败,提示80端口占用,需要将占用80端口的服务进程关闭 1.运行cmd, netstat -ano 找到80端口对应的pid  4 2.一般都是调用 h ...

  9. 使用Jcrop-canvas画布-制作前端图像裁剪

    写在前面 –公司有这个需求,安排调查 –目前各大网站都是采用的-前端做裁剪返回坐标-由后端来做到裁剪 –而使用html-canvas画布可以直接前端裁剪并返回base64流-ajax可以直接下载保存 ...

  10. ruby net/http模块使用

    ruby中的NET::HTTP:这里暂时先列出几个固定用法: 其中一,二不支持请求头设置(header取ruby默认值),只能用于基本的请求,不支持持久连接,如果您执行许多HTTP请求,则不推荐它们: ...