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. 个人网站接入Google Ads的一点心得

    前言 前段时间花了一些精力尝试和摸索主题接入 Google Ads 的问题,算是阶段性成功了吧,这次简单分享一下,如果有缘看到这篇文章,应该会有些启发. 1. 展示效果 上篇文章说到,前两天我在我的两 ...

  2. .Net Core 访问 appsettings.json

    1.添加 NuGet 包 Microsoft.Extensions.Configuration 2.通过注入获取 Configuration 注意:注入获取的必须提前在 StartUp 里面提前注册 ...

  3. Mac mysql 5.7启动报错,解决之道 The server quit without updating PID file

    导读 晚上捣鼓数据库的时候,将mysql服务停止下,然后就死活启动不起来,这下可把我急坏了,自己数据库上有好多自己的个人项目,错误信息如下 ERROR! The server quit without ...

  4. Nuxt框架中内置组件详解及使用指南(五)

    title: Nuxt框架中内置组件详解及使用指南(五) date: 2024/7/10 updated: 2024/7/10 author: cmdragon excerpt: 摘要:本文详细介绍了 ...

  5. Solo 开发者周刊 (第9期):Dawwin首位人工智能编程师或将改变未来?

    这里会整合 Solo 社区每周推广内容.产品模块或活动投稿,每周五发布.在这期周刊中,我们将深入探讨开源软件产品的开发旅程,分享来自一线独立开发者的经验和见解.本杂志开源,欢迎投稿. 好文推荐 Daw ...

  6. Java 线程池之Jetty 线程池学习总结

    Java 线程池之Jetty 线程池学习总结 前提 Jetty 11.0.x 为什么是Jetty? Java提供4中创建线程池的快捷方式 Executors.newFixedThreadPool(); ...

  7. 后端报错记录:406/实体类getset缺失

    报错为406:org.springframework.web.HttpMediaTypeNotAcceptableException 报错历程:在使用后端写neo4j的实体的时候忘记写@Data(没有 ...

  8. redis数据结构:RedisObject,SkipList,SortedSet

    1.RedisObject对象 redis中任何KV都会被封装为RedisObject对象,也叫做Redis对象 2.SkipList 跳表 元素按照升序排列存储,是有序的双向链表 节点可以有多个指针 ...

  9. 【Mybatis】06 Session获取 & 配置参数总结

    会话获取 SqlSessionFactory 最佳的获取方式就是使用Mybatis提供的资源类加载配置文件 调用会话工厂建造者实例的建造方法注入读取流 要注意的是建造者生成了了实例就可以不需要了 这里 ...

  10. FFmpeg开发笔记(四十四)毕业设计可做的几个拉满颜值的音视频APP

    ​一年一度的毕业季就要到了,毕业设计算是大学生毕业前的最后一个大作业,尤其是计算机相关专业的毕业设计,通常要通过编程开发一个软件,比如开发一个图书馆管理系统,开发一个电商APP等等. 一个好的毕业设计 ...