ES5中数组遍历方式:
for循环
forEach():没有返回值,只是针对每个元素调用func
map():返回新的Array,每个元素为调用func的结果
filter():返回符合func条件的元素数组
some():返回boolean,判断是否有元素、是否符合func条件
every():返回boolean,判断每个元素是否符合func条件
reduce():接收一个函数作为累加器
for in ???
 
先定义数组arr提供下面代码使用:
let arr = [1, 2, 3];

 

for循环:

for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}

  

forEach():

forEach有三个参数:当前元素,当前索引值,数组本身

arr.forEach((item, index, array) => {
console.log(item, index, array);
});

  

for和forEach之间的区别是什么
for是可以跳出循环,而forEach是不能够跳出循环
也就是forEach不能使用break和continue两个关键字。
 
map:
从下面方法可以看出,map返回的是新数组,不会影响原来数组,没有副作用
let result = arr.map((value) => {
value++;
return value;
});
console.log(arr, result);

  

filter:
从下面方法可以看出,filter返回的是新数组,不会影响原来数组,没有副作用
let farr = [1, 2, 3];
let fresult = farr.filter((value) => {
return value === 2;
});
console.log(farr, fresult);

  

some:
some只要找到一个符合条件的元素,就会返回true
let sresult = arr.some((value) => {
return value === 2;
})
console.log(arr, sresult);

  

every:
every只要有一个不符合条件的元素,就会返回false
let eresult = arr.every((value) => {
return value === 2;
})
console.log(arr, eresult);

  

reduce:
reduce第一个参数是方法,第二个参数是累加的初始值
第一个参数方法能有四个参数:
prev:上一次调用回调函数的值,第一次就是初始值
cur:当前处理元素的值
index:当前处理元素的索引值
array:原数组
 
下面使用reduce计算arr数组里面所有元素的累加值:
let sum = arr.reduce((prev, cur, index, array) => {
// 上一次处理的结果加上当前元素值
return prev + cur
}, 0)
console.log(sum, arr);

  

利用reduce找出数组里面最大的值:
let max = arr.reduce((prev, cur) => {
return Math.max(prev, cur)
}, arr[0])
console.log(max);

  

利用reduce实现数组去重:
let arr2 = [1, 2, 2, 3, 4, 1]
let dresult = arr2.reduce((prev, cur) => {
// 当cur不在prev的时候,prev增加一项cur
prev.indexOf(cur) == -1 && prev.push(cur)
return prev
}, [])
console.log(dresult);

  

for in:
Array.prototype.foo = function () {
console.log('foo');
}
for (let index in arr) {
console.log(index, arr[index])
}
上面代码先在Array数组对象增加一个原型方法foo。
下面调用for in 的时候会把这个新增的原型方法打印出来。
for in 在操作数组的时候不够纯粹,不建议使用for in来操作数组。
 

ES6中数组遍历方式:
find():返回第一个通过测试的元素
findIndex():返回的值为该通过第一个元素的索引
for of
values()
keys()
entries()
 
find():
let f1 = arr.find((value) => {
return value < 2
})
console.log(f1, arr);

  

findIndex():
let f2 = arr.findIndex((value) => {
return value < 2
})
console.log(f2, arr);

  

for of:
for (let item of arr) {
console.log(item);
}

  

values:
for (let item of arr.values()) {
console.log(item);
}

  这里跟for of效果一样

keys:
for (let item of arr.keys()) {
console.log(item);
}

  

entries:
既要获取到索引又要获取到内容
for (let [index, item] of arr.entries()) {
console.log(index, item);
}

  

ES6-11学习笔记--数组遍历的更多相关文章

  1. C++11 学习笔记 std::function和bind绑定器

    C++11 学习笔记 std::function和bind绑定器 一.std::function C++中的可调用对象虽然具有比较统一操作形式(除了类成员指针之外,都是后面加括号进行调用),但定义方法 ...

  2. PHP学习之中数组-遍历一维数组【2】

    在PHP学习之中数组[1]中学会怎么创建一个数组,如果PHP学习之中数组[1]中的元素多的话,我们访问元素又是一个问题了,下面我们就使用for语句while,foreach来遍历我们的数组: < ...

  3. JavaScript学习笔记-数组

    数组 数组中的每个元素的位置是索引,索引是基于32位的由0开始的数值,最大索引为(2的32次方-2),最大长度为(2的32次方-3) 数组是无类型的:元素可为任意类型:动态的:可根据需要自动增长.缩减 ...

  4. JavaScript学习笔记-数组(1)

    数组是值的有序集合.每个值叫做一个元素,而每个元素在数组中有一个位置,以数字表示,称为索引.JavaScript数组是无类型的:数组元素可以是任意类型,并且同一个数组中的不同元素也可能有不同的类型.数 ...

  5. Java菜鸟学习笔记--数组篇(三):二维数组

    定义 //1.二维数组的定义 //2.二维数组的内存空间 //3.不规则数组 package me.array; public class Array2Demo{ public static void ...

  6. JavaSE中Collection集合框架学习笔记(3)——遍历对象的Iterator和收集对象后的排序

    前言:暑期应该开始了,因为小区对面的小学这两天早上都没有像以往那样一到七八点钟就人声喧闹.车水马龙. 前两篇文章介绍了Collection框架的主要接口和常用类,例如List.Set.Queue,和A ...

  7. java学习笔记 --- 数组

    一.Java的内存分配   A:栈内存: 存储局部变量,只要是在方法中定义的变量都是局部变量.一旦变量的生命周期结束该变量就被释放.   B:堆内存: 存储所有new出来的,及实体(对象),每一个实体 ...

  8. ES6-11学习笔记--数组的扩展

    类数组 / 伪数组 Array.from() Array.of() copyWithin() fill() includes()   类数组.伪数组例子: let divs = document.ge ...

  9. JavaScript(ES6)学习笔记-Set和Map与数组和对象的比较(二)

    一.Map,Set,Array对比: 1.增 let map = new Map(); let set = new Set(); let array = []; map.set('t',1); //M ...

随机推荐

  1. .Net/C#分库分表高性能O(1)瀑布流分页

    .Net/C#分库分表高性能O(1)瀑布流分页 框架介绍 依照惯例首先介绍本期主角:ShardingCore 一款ef-core下高性能.轻量级针对分表分库读写分离的解决方案,具有零依赖.零学习成本. ...

  2. ShardingJdbc-分表;分库;分库分表;读写分离;一主多从+分表;一主多从+分库分表;公共表;数据脱敏;分布式事务

    目录 创建项目 分表 导包 表结构 Yml 分库 Yml Java 分库分表 数据库 Yml 读写分离 数据库 Yml 其他 只请求主库 读写分离判断逻辑代码 一主多从+分表 Yml 一主多从+分库分 ...

  3. php 原生分页

    <?php // 连接数据库 $link = mysqli_connect("127.0.0.1", "root", "root", ...

  4. S5700上三层Vlan间隔离的例子

    转自:https://forum.huawei.com/enterprise/zh/forum.php?mod=viewthread&tid=247591 公司最近的无线覆盖做好了,但让人无语 ...

  5. Mysql-基础-DDL-数据定义语言

    一.SQL通用语法 SQL 语法可以单行或者多行书写,以分号结尾. SQL 语句可以使用空格/缩进来增强语句的可读性. Mysql 数据库的 SQL 语句不区分大小写,关键字建议使用大写. 注释: 单 ...

  6. LGP3953题解

    (口胡) 去年刚学 A_star 的时候以为是板子,上午推了一会儿之后受教了 遇到最短路的题先建最短路 DAG,虽然有0边但是先跑一个 Dijkstra. 然后设 \(d[u]\) 是从 \(1\) ...

  7. 闲聊系列之 5-why root cause分析法

    本篇参考: https://max.book118.com/html/2017/1126/141669829.shtm https://baike.baidu.com/item/5why%E5%88% ...

  8. (leetcode)二叉树的层次遍历-c语言实现

    这段代码,在后面跑测试用例时,出现了stack-overflow,但是原因还不清楚. 问题如下:  二叉树的层次遍历   给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点) ...

  9. Redis集群节点扩容及其 Redis 哈希槽

    Redis 集群中内置了 16384 个哈希槽,当需要在 Redis 集群中放置一个 key-value 时,redis 先对 key 使用 crc16 算法算出一个结果,然后把结果对 16384 求 ...

  10. Servlet:浏览器下载文件时文件名为乱码问题

    1 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletExcep ...