forEach

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

let array = [1, 2, 3, 4];
array.forEach((item, index, arr) => {
  console.log(item);
});

forEach()的用法大概就是这样的, 不过不知道各位发没发现一个问题, forEach()不能跳出循环, 我说的跳出循环是跳出整个循环而不是跳出当前的循环, 口说无凭, 直接上代码.

let array = [1, 2, 3, 4, 5];
array.forEach((item) => {
if (item > 2) {
return;
}
console.log(item);
});

各位, 上面的代码会输出啥呢?

答案是: 1 2

这时候有人就会说了, 这不是跳出循环了吗, 其实并不是, 它仍然把数组挨个遍历了一遍, 把输出换个位置我们就会发现了.

let array = [1, 2, 3, 4, 5];
array.forEach((item) => {
console.log(item);
if (item > 2) {
return;
}
});

这回怎么样, 输出了 1 2 3 4 5吧.

看过了上面两段代码之后, 不难发现, 在forEach()循环体里写return, 只是能跳出当前循环去执行下一次循环,并不能跳出整个循环.

再说说什么叫forEach()循环没有返回值, 这个问题在看过接下来的map循环之后就会明白了.

map

map()的主要作用, 其实是创建一个新的数组, map()的参数和forEach()是一样的, 这里就不在多说了, 直接上例子.

let array = [1, 2, 3, 4 ,5];
let temp = array.map((item, index, arr) => {
return item + 1;
});
console.log(temp);
console.log(array);

猜猜输出的temparr的值都是什么

temp: [2, 3 ,4, 5, 6]

arr: [1, 2, 3, 4, 5]

各位, 到这里应该明白map()forEach()有什么区别了吧, 使用map()遍历数组, 可以返回一个新数组, 并且不会改变原数组里的内容.

当然了, map()也可以这么用, 直接把数组里的元素都转成字符串.

let temp = array.map(String);

filter

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

怎么用呢, 直接上代码.

let array = [1, 2, 3, 4, 5];
let temp = array.filter((item, index, arr) => {
return item > 3;
});
console.log(temp);
console.log(array);

会输出什么呢, temp是4, 5, array没有变化, 清晰明了吧, 是不是比用for循环硬写方便多了.

every

every() 我就不解释入参了, 都一样的, 主要说说every()的作用, 它会遍历数组, 在循环体内写条件, 如果每一项都是true, 就会返回true, 只要有一个是false, 就会返回false, 下面看看实例代码.

let array = [1, 2, 3, 4, 5];
let bo = array.every((item, index, arr) => {
return item > 2;
});
console.log(bo);

这个输出不用我说了吧, 肯定是false啊, 不用再解释了吧.

some

some()又是做什么的呐, 同样, 遍历数组的每一项, 然后根据循环体内的条件去判断, 只要有一个是true, 就会停止循环.

let array = [1, 2, 3, 4, 5];
array.some((item, index, arr) => {
console.log(item);
return item > 3;
});

根据输出的item, 我们可以知道一共循环了多少次.

reduce

reduce(), 官方说明: 接收一个函数作为累加器, 数组中每个值(从左到右)开始缩减, 最终为一个值. 看完这句话, 心里莫名的想说一句 卧槽, '这什么玩意'. 其实说白了, reduce()接收的那个函数就是回调函数, 回调函数调用数组里的每一个元素, 直到循环结束.

reduce()跟其他几个方法不一样, 它有4个参数, 按顺序分别是 上一次的值, 当前的值, 当前值的索引, 数组. 参数介绍完毕, 直接看例子.

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

let array = [1, 2, 3, 4, 5];
let total = array.reduce((a, b) => {
return a + b;
});
console.log(total); // 15

ES6新增的数组的方法的更多相关文章

  1. ES6 新增的数组的方法

    给定一个数组 let list = [ // wu: 武力 zhi:智力 { id: 1, name: '张飞', wu: 97, zhi: 10 }, { id: 2, name: '诸葛亮', w ...

  2. 前端面试之ES6新增了数组中的的哪些方法?!

    前端面试之ES6新增了数组中的的哪些方法?! 我们先来看看数组中以前有哪些常用的方法吧! 1 新增的方法! 1 forEach() 迭代遍历数组 回调函数中的三个参数 value: 数组中的每一个元素 ...

  3. ES6新增的math,Number方法

    ES6新增的math,Number方法,下面总结了一些我觉得有用的 Nunber.isInteger()判断是否为整数,需要注意的是1,和1.0都会被认为是整数 console.log(Number. ...

  4. es6新增的数组方法和对象

    es6新增的遍历数组的方法,后面都会用这个方法来遍历数组,或者对象,还有set,map let arr=[1,2,3,4,3,2,1,2]; 遍历数组最简洁直接的方法法 for (let value ...

  5. ES6新增的数组方法

    ES6新增:(IE9级以上支持) 1.forEach():遍历数组,无返回值,不改变原数组. 2.map():遍历数组,返回一个新数组,不改变原数组. 3.filter():过滤掉数组中不满足条件的值 ...

  6. es6新增的数组遍历方式

    1.some方法 1)some() 方法测试是否至少有一个元素通过由提供的函数实现的测试. 2)参数列表: arr.some(callback(element[, index[, array]])[, ...

  7. ES6中的数组reduce()方法详解

    reduce() 方法对数组中的每个元素执行一个由我们提供的reducer函数(升序执行),将其结果汇总为单个返回值. 1. 语法reduce说明 arr.reduce(callback(accumu ...

  8. es5和es6创建新数组的方法

    //es5 let array = Array(5) let array = [] //es6 1.let array = Array.of(1,2,3,4,5) 2.let array = Arra ...

  9. JavaScript(ES6之前)数组方法总结

    一.数组的创建 1.使用 Array 构造函数 var arr1 = new Array(); // 创建一个空数组 var arr2 = new Array(20); // 创建一个包含20项的数组 ...

随机推荐

  1. ubuntu无法找到ifconfig(command not found: ifconfig)

    演示环境 $ uname -a Linux xxxxx-xxxxx-xxxx5.4.0-47-generic #51-Ubuntu SMP Fri Sep 4 19:50:52 UTC 2020 x8 ...

  2. 【九度OJ】题目1207:质因数的个数 解题报告

    [九度OJ]题目1207:质因数的个数 解题报告 标签(空格分隔): 九度OJ 原题地址:http://ac.jobdu.com/problem.php?pid=1207 题目描述: 求正整数N(N& ...

  3. 【LeetCode】112. 路径总和 Path Sum 解题报告(Java & Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 DFS 回溯 BFS 栈 日期 题目地址:https ...

  4. css的鼠标手势总结

    css的鼠标手势 cursor:pointer; 或 cursor:hand : 手型 cursor:crosshair : 十字 cursor:text : 文本 cursor:wait : 等待 ...

  5. Capstone CS5265替代LT8711龙迅|Typec转HDMI4K60HZ投屏转换方案

    LT8711是一款高性能C型/DP1.2至HDMI2.0转换器,设计用于将USB typec或DP1.2源连接至HDMI2.0接收器.LT8711集成了兼容DP1.2的接收机和兼容HDMI2.0的发射 ...

  6. 使用 DML语句,对 “锦图网” 数据进行操作,聚合函数练习

    查看本章节 查看作业目录 需求说明: 根据客户 ID 统计订单数.订单总金额.最高订单金额.最低订单金额和每份订单平均金额,并按订单总金额升序显示 根据客户统计订单总订购人次数> 5 的统计信息 ...

  7. 编写Java程序,跑道长 50m,模拟 3 名学生同时在跑道跑步的场景 3名同学相当于3个线程对象

    查看本章节 查看作业目录 需求说明: 跑道长 50m,模拟 3 名学生同时在跑道跑步的场景 3名同学相当于3个线程对象 实现思路: 创建 Java 项目,在项目中创建StudentRunning类,该 ...

  8. Python两处容易理解错误的设计

    函数内部修改可变类型的变量时不会视作局部变量(除非函数内有该变量的赋值运算符),因为如果做局部变量处理则修改语句势必报错,此处的理解不会有歧义: s = 'test' d = {True:1,2:'S ...

  9. .NET5.0 依赖注入,关于 Autofac 使用

    前置 工具 VS2019 概念 关于以下几个概念,自行百度. 控制反转:IoC(Inversion of Control) 依赖注入: 容器:DI 容器(.NET Core 自带),Autofac(本 ...

  10. 执行jar包指定main

    java包中多个main,需要指定执行java -cp iot-device-sdk-java-0.0.5-SNAPSHOT.jar com.inspur.iot.client.sample.paho ...