目录
- [forEach](#1)
- [every](#2)
- [some](#3)
- [map](#4)
- [filter](#5)
- [reduce && reduceRight](#6)
- [indexOf](#7)
- [lastIndexOf](#8)
前言
ES6原生语法中提供了非常多好用的数组'遍历'方法给我们，让我们可以实现更多更强大的功能，下面让我们通过这篇文章好好学习下，该如何使用它们
forEach
对数组的每个元素执行一次提供的函数。跳过空位元素
没有办法中止或者跳出 forEach() 循环，除了抛出一个异常。如果你需要这样，使用 forEach() 方法是错误的。
语法解析
arr.forEach((currentValue,index,array)=>{});
// currentValue 数组中正在处理的当前元素
// index 当前索引值
// array 正在处理的数组
// 返回值是undefined
例子则是非常简单的应用了
[1,2,3].forEach((currentValue,index,array)=>{
console.log(currentValue,index,array);
});
every
回调函数中，所有的都返回真，则返回真，有一个返回假，则返回假。
简而言之：“一假则假”
语法解析
arr.every((currentValue,index,array)=>{
// currentValue = 当前执行元素
// index = 当前索引值
// array = 执行的数组
})
返回值是true或者false
可别小看这个方法，我自己平时工作当中两个方面经常使用到
全选中使用
多个关系的搜索中使用
先看一个简单的例子
[12, 5, 8, 130, 44].every((item)=>{
return item >= 10
})
上面的意思：当数组中所有的元素的值都大于10的时候则返回true，否则返回false
全选伪代码示例
let allChecked = false;
const arr = [
{
id:"a",
name:"a",
checked:false
},
{
id:"b",
name:"b",
checked:false
}
]
allChecked = arr.every((item)=>{
return item.checked === true
})
// 实现起来就是这么简单，当所有的都选中了，allChecked 全选的变量就赋值true
// 这如果硬是用es5的语法去实现的话，还是比较麻烦的
some
回调函数中有一个返回真，则返回真
简言之：“一真则真”
语法解析
arr.some((currentValue,index,array)=>{
// currentValue = 当前执行元素
// index = 当前索引值
// array = 执行的数组
})
返回值是true或者false
代码展示
let bok = [2, 5, 8, 1, 4].some((item)=>{
return item>5
})
// bok = true
// 只要有一个数组大于5 则整体返回true
map
> 创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
语法
arr.map((currentValue,index,array)=>{
// currentValue = 当前执行元素
// index = 当前索引值
// array = 执行的数组
})
// 返回一个新的数组
实例
let arr = [1,2,3,4];
const map = arr.map(x=>x*2);
//返回每一个处理过后的新数组 [2,4,6,8]
filter
> 返回一个新数组，其结果是改数组中的每个元素符合条件的结果
语法
arr.filter((currentValue,index,array)=>{
// currentValue = 当前执行元素
// index = 当前索引值
// array = 执行的数组
})
// 返回一个新的数组
顾名思义这个应该肯定是各类查询，筛选上面
实例
let arr = [{name:"abc"},{name:"bcd"},{name:"afc"}];
arr.filter((item)=>{
return item.name.includes('b');
});
// 筛选出名字字段中带有b的项
reduce && reduceRight
> reduce()方法在数组的每个成员上执行一个reducer函数(您提供的)，生成一个输出值。
reduceRight是从右到左的相加(其它的同reduce是一样的，所以这里只讲reduce)
语法
无参数
arr.reduce((accumulator, currentValue,currentIndex,array)=>{
// accumulator第一项的值或者上一次叠加的结果值
// currentValue 当前项
// currentIndex 当前项索引
// array 数组本身
});
有参数
arr.reduce((accumulator, currentValue,currentIndex,array)=>{},参数);
参数 = accumulator 第一次运行时的初始值
实例1：计算数据总和
const arr = [1,2,3];
const num = arr.reduce((acc,cur,index)=>{
return acc + cur
});
// num = 6
const num1 = arr.reduce((acc,cur,index)=>{
return acc+cur
},10)
// num = 16
实例2：计算一个字符串中字母出现的次数
const str = 'aaabbcccdd';
str.split('').reduce((acc,cur)=>{
acc[cur] ? acc[cur]++ : acc[cur] = 1
},{});
解析：初始化的值是一个空对象
运行的时候，判断对象里面是不是有当前的字母，
如果没有的话则添加到对象中，并赋值为1
如果已经存在的话在++，这样就计算出一个字符串中字母出现的次数
同样可以利用这点进行数组去重
const arr = ['a','a','b','c'];
const obj = arr.reduce((acc,cur)=>{
return acc[cur] ? acc[cur]++ : acc[cur] = 1
},{})
最后通过obj.keys() 的方法获取到的数组就是去重之后的。
indexOf
> indexOf()方法返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回-1。
var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));
// expected output: 1
// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4
console.log(beasts.indexOf('giraffe'));
// expected output: -1
lastIndexOf
> lastIndexOf()方法返回给定元素在数组中找到的最后一个索引，如果该元素不存在，则返回-1。数组从fromIndex开始向后搜索。
var animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];
console.log(animals.lastIndexOf('Dodo'));
// expected output: 3
console.log(animals.lastIndexOf('Tiger'));
// expected output: 1
小结
本篇文章主要讲述了ES6中数组新增的一些方法，以及如何使用。其实这些方法的实战场景还是非常多的，需要在实战中才能有更加深刻的体会
关于 ES5 &; ES6 数组遍历的方法
ES5 数组遍历方法 1.for 循环 , , , , ] ; i < arr.length; i++) { console.log(arr[i]) } 2.forEach , , , , ] ...
js数组遍历方法总结
数组遍历方法 1.for循环 使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显. 1 2 3 for(j = 0,len=arr.length; j < le ...
JS数组遍历方法
常用数组遍历方法: 1.原始for循环 var a = [1,2,3]; for(var i=0;i
JavaScript ES6 数组新方法 学习随笔
JavaScript ES6 数组新方法 学习随笔 新建数组 var arr = [1, 2, 2, 3, 4] includes 方法 includes 查找数组有无该参数 有返回true var ...
浅谈6种JS数组遍历方法的区别
本篇文章给大家介绍一下6种JS数组遍历方法:for.foreach.for in.for of.. each. ().each的区别.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
数组遍历方法forEach 和 map 的区别
数组遍历方法forEach 和 map 的区别:https://www.cnblogs.com/sticktong/p/7602783.html
Python map filter reduce enumerate zip 的用法
map map(func, list) 把list中的数字,一个一个运用到func中,常和lambda一起用. nums = [1, 2, 3, 4, 5] [*map(lambda x: x**2, ...
javascript(基础)_对数组的遍历方法总结(find, findIndex, forEach,)
一.前言 ...
es6数组的方法
1.复习的函数 函数是由关键字function声明的,他是一个引用数据类型,是Function的实例,在调用的时候会开辟一个私有空间 2.函数的成员 arguments:null (是实参构成的数组 ...
随机推荐
Spark踩坑记——Spark Streaming+Kafka
[TOC] 前言 在WeTest舆情项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark strea ...
EpicEditor – 可嵌入的 JavaScript Markdown 编辑器
EpicEditor 是一款可以嵌入到网页中的 JavaScript Markdown 编辑器,支持全屏编辑.在线预览.自动保存草稿,离线支持等等.对于开发人员,它提供了一个健壮的API,可以很容易定 ...
selenium--python如何定位一组元素并返回文本值
from selenium import webdriverimport time a=[] #创建一个空列表用于存储查询到的元素组driver = webdriver.Firefox()driver ...
【项目】搜索广告CTR预估(一)
本文介绍CTR相关基础知识. 一.广告投放系统 广告系统包含多个子系统.除了上图所示的广告投放系统外,还包含商业系统(广告库的获得),统计系统(点击展示日志的获得)等. 广告投放系统主要是面向用户的, ...
均价 和 最新价格 是啥意思 什么是MACD DIFF DEA 指标？
均价=当前时刻成交的总价格/成交的总量 最新价格=当前时刻的价格 一.平滑异同平均线(Moving Average Convergence Divergence)原理:MACD(Moving Aver ...
DHTML【11】--DOM
大家好,从今天开始,我们将进入DOM的学习. DOM?DOM是何东东呢?大家还记得我在前面提过的DOM树吗?就是我在前面讲HTML的时候画的那个图,那个其实就是一个简单的DOM树,浏览器在解析HTML ...
git仓库管理笔录
Git是目前世界上最先进的分布式版本控制系统(没有之一). 小明做了个个人博客,放到了Git 仓库里面.第二天换了台电脑,只需要 git clone 克隆一下git 远程仓库的代码到本地即可.然后他 ...
mysql数据库插入数据获取自增主键的三种方式(jdbc PreparedStatement方式、mybatis useGeneratedKeys方式、mybatis selectKey方式)
通常来说对于mysql数据库插入数据获取主键的方法是采用selectKey的方式,特别是当你持久层使用mybatis框架的时候. 本文除此之外介绍其它两种获取主键的方式. 为了方便描述我们先建一张my ...
【相关网站 - 02】- Java 好文博客
一.源码分析博客 还有这种操作?浅析为什么要看源码 你觉得什么才是 Java 的基础知识? 1. JDK 2. Mybatis 3. Spring 4. Sring Boot 5. Spring Cl ...
第1章 ssh命令和SSH服务详解
基础服务类系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 本文对SSH连接验证机制进行了非常详细的分析,还详细介绍了ssh客户端工具的各种 ...