es6 filter函数的用法_Es6简化操作的一些数组方法使用及原理-程序员宅基地

结合Es6数组方法的使用在Vue中使用更加简单

数组

下面方法都用这个数组

es6之前遍历数组我们通常使用for循环来遍历数组，拿到数组中的每一项

for循环

forEach(遍历)

forEach： forEach()会遍历数组，循环体内没有返回值，forEach()循环不会改变原来数组的内容， forEach()有三个参数，第一个参数是当前数组的每一项元素，第二个参数是当前数组每一项元素的索引，第三个参数是当前元素所属的数组(就是数组users).

使用箭头函数简化

forEach()不能跳出循环，意思就是之前我们在使用for 循环的时候满足条件break之后就会停止循环，但是forEach循环却不一样，无论是否满足条件它都会先遍历数组中所有项，然后再return出满足条件的项

forEach()不能跳出循环

所有说forEach在内部性能方面不高效，但是这种不高效只是对比其他方法，一般我们肉眼很难分辨出效率快慢，毕竟解析的速度都是毫秒级的，除非是非常非常庞大的数组数据的遍历才能体现出来，可以忽略不计

forEach是如何形成的，我们之前在JavaScript高级说过JavaScript对象的原型，函数Function本身就是一个对象，Array也是JavaScript的内置对象，对象实例都能用他原型对象的方法

这样就能自定义forEach

map(遍历展开)

map：map()的主要作用，其实是创建一个新的数组， map()的参数和forEach()是一样的，map()循环处理数组中的每一个数据返回一个新的数组

参数和forEach相同

不同的是它有返回值，会返回一个新数组

返回新数组

JavaScript高级我们说过，原型，闭包这些函数的原理，虽然对我们如果只满足实际开发来说的话，用处确实不大

但是却能更好的让我们理解JavaScript方法的底层原理，通过这些原理我们就能更好地利用JavaScript ，去进行一些工具的开发，例如开发框架等

自定义myMap

filter(过滤数据)

filter ：filter()参数和forEach()也是一样的， filter()主要是过滤的，用来过滤数组中不满足条件的元素，把满足条件的元素放到新的数组里，并且不会改变原数组.

过滤出users 数组里面大于等于18的

filter对比for循环，更加方便直接提取出我们想要的数据，简化操作，filter的原理和map()基本一样

findIndex(查找第一个符合条件的数据的索引)

findIndex ：findIndex()返回返回符合条件的元素的索引位置，如果没有符合条件的元素返回 -1 ，参数和forEach()一样

用法

findIndex 同样也能用作遍历，所以说他们的原理基本都是for循环的使用，只是条件不同，同样的我们依然可以简单写一个自己的findIndex

some(检测数组中有没有符合条件的数据 )

some： some()同样遍历数组的每一项，然后根据循环体内的条件去判断，只要有一个是true, 就会停止循环，如果有符合条件的数据返回true 否则返回false ， some() 不会改变原始数组。参数和forEach()一样

用法

every (检测数组中是否所有的数据都符合条件)

every ：every()的作用，它会遍历数组，在循环体内写条件，如果每一项都是true, 就会返回true, 只要有一个是false, 就会返回false ，参数都一样意思上和some有些相反

用法

reduce

reduce ：reduce() 接收一个函数作为累加器，数组中每个值(从左到右)开始缩减，简单来说Reduce方法是指将多个值缩减为一个， reduce()接收的那个函数就是回调函数，回调函数调用数组里的每一个元素，直到循环结束.

reduce()跟其他几个方法不一样，它有4个参数，按顺序分别是上一次的值，当前的值，当前值的索引，数组.

假如，有一个数组，里面的元素都是数字，现在要计算数字的和，正常情况就直接循环数组，然后弄个中间变量挨个加了吧，但是用了reduce()就省事儿多了

用法

参数a 必需有，代表初始值, 或者计算结束后的返回值。参数b必需有，代表当前元素 , 参数i可选，当前元素的索引，参数arr当前元素所属的数组对象。

a累积器 b是当前元素 a=a+b 此时b=1 a=1 --->b=2时 a=1+2 a=3----->依次将多个值缩减为一个

本文链接：https://blog.csdn.net/weixin_39907596/article/details/112873334

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

opencv 利用傅里叶变换获取低频和高频部分图像-07_opencv统计图像高频-程序员宅基地

文章浏览阅读6.4k次，点赞9次，收藏58次。1. 效果2. 代码# -*- coding: utf-8 -*-import cv2import cv2 as cvimport numpy as npfrom matplotlib import pyplot as pltdef filter_high_f(fshift, radius_ratio): """ 过滤掉除了中心区域外的高频信息 """ # 1, 生成圆形过滤器, 圆内值1, 其他部分为0的过滤器, 过滤 template _opencv统计图像高频

芯灵思Sinlinx A33开发板boa与CGI移植-程序员宅基地

文章浏览阅读346次。开发平台* 芯灵思SinlinxA33开发板淘宝店铺: https://sinlinx.taobao.com/嵌入式linux 开发板交流 641395230在嵌入式设备的管理与交互中，基于Web方式的应用成为目前的主流，这种程序结构也就是大家非常熟悉的B/S结构，即在嵌入式..._cgi path_info boa

AudioES8374音频驱动调试_es8374 调试-程序员宅基地

文章浏览阅读6.9k次，点赞2次，收藏19次。 AudioES8374驱动模块调试目录 Audio ES8374. 2 一、Audio ES8374文件建立与编译... 2 二、Audio ES8374原理图... 3 三、Audio ES8374相关配置... 3 四、Audio ES8374 I2C读写... 4..._es8374 调试

利用Vitis开发基于ZCU106的神经网络加速器（二）——DPU编译及Demo_dpu kernel编译工具是什么-程序员宅基地

文章浏览阅读4.4k次，点赞2次，收藏26次。前言上一篇文章讲到了如何生成可供Vitis使用的XRT platform。这次我们使用生成的platform来开发一个完整的加速器Demo并在ZCU06上跑通。DPU概述DPU是Vitis AI中官方提供的FPGA神经网络加速器，其架构如下图：DP(Deep Learning Processor Unit)是专用于卷积神经网络的可配置计算引擎。引擎中使用的并行度是设计参数和应用程序。它包含一组高度优化的指令，并支持大多数卷积神经网络，例如VGG，ResNet，GoogleNet，YOLO，SS_dpu kernel编译工具是什么

毕业论文图片格式、分辨率选择及高质量Word转PDF方法_什么格式的图像在word转pdf的时候损失小-程序员宅基地

文章浏览阅读1.8k次。毕业论文插图格式、分辨率选择及高质量Word转PDF方法_什么格式的图像在word转pdf的时候损失小

文件在线预览，支持各种文件类型，docker 离线发布kkFileview。_离线docker部署kkfile-程序员宅基地

文章浏览阅读681次。文件在线预览，docker离线安装，1分钟内即可搞定，word，ppt，excel纯开源，下载执行执行脚本，一步到位_离线docker部署kkfile

随便推点

了解 Xamarin.Forms 创建移动应用程序的基础知识 4 - Button_xaml语言 botton-程序员宅基地

文章浏览阅读229次。演示如何自定义 Button_xaml语言 botton

stm32资料库 6_stm ibis-程序员宅基地

文章浏览阅读1.1k次。PC端软件 1.DfuSe DfuSe——USB设备固件升级 ST扩展：包含PC端演示程序、调试演示程序和所有协议层源程序 2009年7月 DfuSe DfuSe——USB设备固件升级 ST扩展程序包DfuSe DfuSe——USB设备固件升级 ST扩展英文文档2.Flash loader demonstrator STM32F101xx和STM32F103xx闪存加载演示程序：包含PC端演示程序、命令行演示程序和头文件源码 20_stm ibis

GeoServer速成：安装启动，发布地图，加载QGIS_qgis geoserver-程序员宅基地

文章浏览阅读1.6k次，点赞2次，收藏11次。本节主题：Geoserver下载配置启动，发布地图，发布服务用QGIS查看。预计时间15分钟。练习数据位置：https://download.csdn.net/download/sinat_41310868/19362372视频教程见：https://www.bilibili.com/video/BV1Sg41137EZ/如果CSDN图片不清楚，请移步知乎：https://zhuanlan.zhihu.com/p/377826133一、下载配置启动访问http://geoserver_qgis geoserver