ES6操作数组目前共有7中方法,分别是:forEach、map、filter、find、every、some、reduce

forEach方法:对数组的每个元素执行一次提供的函数

1. forEach方法

forEach方法中的function回调有三个参数:
第一个参数是遍历的数组内容,
第二个参数是对应的数组索引,
第三个参数是数组本身

foreach 语法:

 

arr.forEach(function(value,index,array){
    //code something
  });

实例:

var arr = [1,2,3,4];
var sum =0;
arr.forEach(function(value,index,array){ array[index] == value; //结果为true sum+=value; }); console.log(sum); //结果为 10

①数组名.forEach(function(数组中一个元素的值){对这个值进行处理....})

②数组名.forEach(test)test为方法名,不用加(),把函数引用传进去

③利用函数引用这种方式的话,会自己把每个值传进去,不需要用()传进去

2.map()方法

返回一个新的数组,数组中的元素为原始数组调用函数处理后的值。

注意:

  • map()不会对空数组进行检测
  • map()不会改变原始数组

语法

array.map(function(currentValue, index, arr), thisIndex)

参数说明:

  • function(currentValue, index, arr)必须。为一个函数,数组中的每个元素都会执行这个函数。其中函数参数:
  1. currentValue:必须。当前元素的的值。
  2. index:可选。当前元素的索引。
  3. arr:可选。当前元素属于的数组对象。

应用场景:要返回一个要利用原数组经过运算后的数组,或者是在一个对象数组中要拿到某一个属性,并且返回一个新数组的情况

3.filter()函数

创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意:

filter() 不会对空数组进行检测。

filter() 不会改变原始数组。

语法

array.filter(function(currentValue,index,arr), thisValue)

参数说明:
  1. currentValue:必须。当前元素的的值。
  2. index:可选。当前元素的索引。
  3. arr:可选。当前元素属于的数组对象。

应用场景:

1.已知对象数组,要把对象数组中一些符合要求的对象重新组成一个数组

2.筛选出符合多个条件的对象数组中的一些元素,组成新数组或者是直接覆盖原数组

3.有两个数组(A,B),根据A中的ID值,过滤掉B数组中不符合的数据

4.find()函数

返回通过测试(函数内判断)的数组的第一个元素的值。

  • 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
  • 如果没有符合条件的元素返回 undefined

注意:

IE 11 及更早版本不支持 find() 方法。

find() 对于空数组,函数是不会执行的。

find() 并没有改变数组的原始值。

语法:

array.find(function(currentValue, index, arr),thisValue)

参数说明:
  1. currentValue:必须。当前元素的的值。
  2. index:可选。当前元素的索引。
  3. arr:可选。当前元素属于的数组对象。

应用场景:

1.在对象数组中,找到符合要求的对象,只能找到第一个符合要求的

2. 两个对象数组,找A数组中有B数组的ID的元素

5.some()方法和every()方法

 some()方法

  • 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
  • 如果没有满足条件的元素,则返回false。

every()方法

  • 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
  • 如果所有元素都满足条件,则返回 true。

some()方法只要有一个满足就行,every()方法要所有的满足才可以,即some():一真即真,every():一假即假,跟逻辑运算符差不多

应用场景

1.如果所有的操作系统都大于16位,则该程序可用,否则即为不可用

//some只要有一个大于,它就不会再往下找,直接返回true,因为相当于 || (逻辑或运算符)

//every()相当于&&,找到第一个错的就直接返回false,不再往下找

6. reduce()方法

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

reduce() 可以作为一个高阶函数,用于函数的 compose。

语法:

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数说明:

total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象。
initialValue 可选。传递给函数的初始值

应用场景:

1.代替map做一些简单的运算

2.将一个对象数组中的某些属性的值抽出来,组成一个新的数组

文中应用场景内容来自:https://blog.csdn.net/PeaYing/article/details/100175757
语法取自菜鸟教程,与应用场景中有些不一致,应用场景为ES6语法。
本文仅作学习工作记录,如有错误请大佬留言指出

ES6操作数组的7中方法的更多相关文章

  1. ES6之数组的Array.from()方法

    Array.from()方法就是构造函数本身的方法 将一个类数组对象或者可遍历对象转换成一个真正的数组. 那么什么是类数组对象呢?所谓类数组对象,最基本的要求就是具有length属性的对象. 1.将类 ...

  2. js中用来操作数组的相关的方法

    push向数组的的末尾添加新的内容 unshift向数组的开头增加新的内容 slice(n,m)从索引n开始(包含n),找到索引m处(不包含m),然后把找到的内容作为一个新的数组返回,原有的数组不改变 ...

  3. vue操作数组时遇到的坑

    用vue操作数组时,一般就那几个方法,而且是可以渲染的,但是有时候列表是渲染不了的先说下操作数组的几个方法吧 1 push ( ) 这个方法是在数组的最后面添加元素 用法:  括号里写需要加入的元素  ...

  4. java中方法传入参数时:值传递还是址传递?

    JAVA中的数据类型有两大类型: ① 基本数据类型:逻辑型(boolean).文本型(char).整数型(byte.short.int.long).浮点型(float.double) ② 引用数据类型 ...

  5. javascript中slice() splice() concat()操作数组的方法

    这三个操作数组,哪个返回一个新数组呢.上代码 splice()方法,用于插入,删除和替换. var arr=[1,2,3,4,5]; var arr1=arr.splice(1,3); console ...

  6. thinkphp中cookie和session中操作数组的方法

    thinkphp中cookie和session中操作数组的方法 一.ThinkPHP模板中如何操作session,以及如果session中保存的是数组的情况 在ThinkPHP的模板中操作sessio ...

  7. JavaScript中操作数组的方法

    JavaScript Array 对象 对数组操作的方法分为两种 一种是会改变原始数组的变异方法,还有一种是不会改变原始数组的非变异方法. 总结 巧记 Push() 尾部添加 pop() 尾部删除 U ...

  8. ES6之数组扩展方法【一】(相当好用)

    form 转化为真正的数组 先说一下使用场景,在Js中,我们要经常操作DOM,比如获取全部页面的input标签,并且找到类型为button的元素,然后给这个按钮注册一个点击事件,我们可能会这样操作: ...

  9. ES6之数组操作

    es6中对于数组操作添加了4种方法: 1.map —— 映射(一个对应一个) 2.reduce —— 汇总(多个出来一个) 3.filter —— 过滤 4.forEach —— 迭代/循环. 1.m ...

  10. ES5与ES6常用语法教程之 ④展开运算符...在数组和对象中的作用

    展开操作符(spread) 展开运算符(spread operator)允许一个表达式在某处展开.展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以 ...

随机推荐

  1. 开源日志组件Sejil--附带日志管理界面

    1.开源日志组件源码:  https://github.com/alaatm/Sejil 2.下载下来发现里面对于不同的.net core 版本的配置提供了对应的示例 .Net Core 3.1 Pr ...

  2. 为ssh服务器添加2fa认证,一个python脚本全搞定

    服务器ssh如果被别人登陆就是一场灾难,所以我研究了ssh认证,我发现Google Authenticator PAM可以实现ssh的2fa认证,但是安装和配置比较麻烦.因此我用python实现了ss ...

  3. 使用EF 连接 数据库 SQLserver、MySql 实现 CodeFirst

    1.新建项目,下载Nuget安装包 创建项目需要注意几点,如果是基于 .net framework 的项目 需要选择 相应版本的 EF, 如果是跨平台则选择EF Core版本. 我这里选择的是 .ne ...

  4. 详解Web应用安全系列(7)使用具有已知漏洞的组件

    使用具有已知漏洞的组件,这种安全漏洞普遍存在,基于组件开发的模式使得多数开发团队根本不了解其应用或API中使用的组件,更谈不上及时更新这些组件了. 下面就分别以.NET和Java各分享一个案例. .N ...

  5. koa web框架入门

    1.在hello-koa这个目录下创建一个package.json,这个文件描述了我们的hello-koa工程会用到哪些包.完整的文件内容如下: { "name": "h ...

  6. mysql 二进制的读取与写入

    插入语句 用binary转换函数可将字符串转为二进制 insert into mytable (id, bin) values(1, binary('abcdef')) 查询语句 用cast进行类型转 ...

  7. 使用浏览器的cookies进行登陆

    1.使用浏览器Cookie登陆 In [ ]: cookie = 'uniqueVisitorId=a2151df1-4833-00ae-72e0-f4b99d2b7be2; pgv_pvid=232 ...

  8. Django导出EXCEL并确保表头左右两列显示

    以下是导出EXCEL确保表头左右两列显示正确值的代码示例: from openpyxl import Workbook from openpyxl.styles import Alignment # ...

  9. [oeasy]python0116_文字的起源_苏美尔文明_楔形文字_两河流域

    文字起源 回忆上次内容 上次回顾了西里尔字符的编码过程 KOI-7 KOI-8   ISO-8859 系列进行总结 字符扩展 ascii 共 16 种 由iso组织制定 从 iso-8859-1 到 ...

  10. 第四节 JMeter基础-初级登录【固定用户登录】

    声明:本文所记录的仅本次操作学习到的知识点,其中商城IP错误,请自行更改. 1.认识JMeter (1)测试计划:测试的起点,所有组件的容器.相当于一个测试项目,对测试计划展开一系列的操作. (2)线 ...