JavaScript迭代:forEach、every、some、map、filter、find、findIndex、for in、includes

2023-10-09 23:10

本文主要是介绍JavaScript迭代:forEach、every、some、map、filter、find、findIndex、for in、includes,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

forEach:为数组中的每个元素调用定义的回调函数

array.foreach(callback[,thisArg])

thisArg:可选参数,callback函数中的this关键字可引用的对象。如果省略thisArg,则underfunded将会用做this值

回调函数语法:

function callbackfn(value,index,array)

用户可以最多使用3个参数来声明回调函数
value:数组元素的值
index:数组元素的数字索引
array:包含该元素的数组对象

注:
1、除了数组对象之外,foreach方法还可以用于具有length属性且具有按数字编制索引的属性名的任何对象
2、对于数组中出现的每个元素,foreach方法都会调用callbackfn函数一次,采用升序索引顺序。但不会为数组中缺少的元素调用回调函数
3、foreach方法不直接修改原始数组,但回调函数肯会修改它

示例1 使用forEach迭代数组letters,然后把每个元素的值和下标索引输出显示

var a = ['a', 'b', 'c']function show(value, index, ar) {var str = '';str = "index: " + index + "->" + "value: " + valueconsole.log(str)
}
a.forEach(show)

在这里插入图片描述
示例2 使用thisArg参数,该参数指定可对其引用this关键字的对象

var obj = {show: function(value, index) {var squared = this.calcSquare(value)var s = ''var s = "value: " + value + "->index: " + index + "->squared: " + squaredconsole.log(s)},calcSquare: function(x) {return x * x}
}var numbers = [5, 6]
//方式一 
numbers.forEach(obj.show, obj)
//方式二
numbers.forEach(function(value, index) {this.show(value, index)
}, obj)

在这里插入图片描述
evary:确定数组的所有成员是否满足指定的测试

array.every(callbackfn[,thisArg])
function callbackfn(value,index,array)

注:
1、every方法会为array中的每个元素都调用callbackfn函数,直到callbakckfn返回false或者直到数组的结尾
2、调用callbackfn函数,如果所有元素都返回true,则返回true,否则返回false。如果数组没有元素,则every方法返回true
3、除了数组对象之外,every方法还可以用于具有length属性且具有按数字编制索引的属性名的任何对象

示例1 检查数组numbers中元素是否都是偶数

function checkIfEven(value, index, arr) {document.write(value + " ")if (value % 2 == 0) {return true} else {return false}
}
var numbers = [2, 4, 5, 6]
if (numbers.every(checkIfEven)) {document.write("都是偶数")
} else {document.write("不全是偶数")  //2 4 5 不全是偶数
}

可以看出一个问题,当有一个元素返回false时,后续元素都不会再执行回调函数

示例2 使用thisArg参数,该参数指定可对其引用this关键字的对象

var checkNumberRange = function(value) {if (typeof value !== 'number') {return false} else {return value >= this.min && value <= this.max}
}
var numbers = [10, 15, 19]
var obj = {min: 14,max: 20
}
if (numbers.every(checkNumberRange, obj)) {alert("都在指定范围内")
} else {alert("部分不在指定范围内")
}

some:检查定义的回调函数是否为数组的任何元素返回true

array.some(callback[,thisArg])

some方法用法与every方法用法相同,唯一的区别是:只要数组中有一个元素返回true,some方法返回值就为true

示例 检测数组中的元素是否都为奇数

function checkIfEven(value) {if (value % 2 == 0) {return true}
}
var a = [1, 3, 4, 7]
if (a.some(checkIfEven)) {alert("不全是奇数")
} else {alert("全是奇数")
}

map:对数组的每个元素调用定义的回调函数,并返回包含结果的数组

array.map(callbackfn[,thisArg])
function callbackfn(value,index,array)

注:
1、map方法将返回一个新数组,其中每个元素均为关联的原始数组元素的回调函数返回值。对于数组中的每个元素,map方法都会调用回调函数一次(采用升序索引顺序)。将不会为数组中缺少元素调用回调函数
2、除了数组对象之外,map方法还可以用于具有length属性且具有按数字编制索引的属性名的任何对象
3、map方法不会直接修改原始数组,但回调函数可能会修改它

示例1 将数组a中元素的平方作为新数组的元素值,最后返回这个新数组

function Square(value) {return value * value
}
var a = [2, 3, 4, 5]
var b = a.map(Square)
console.log(b) //[4, 9, 16, 25]

示例2 使用JavaScript内置方法作为回调函数

var a = [9,16,25]
var b = a.map(Math.sqrt)
console.log(b) //[3, 4, 5]

示例3 使用map函数应用于字符串上,把每个字符加上左右两个字符截取出,映射到一个新数组中
需要通过动态调用的方法(call)把map作用于一个字符串上

function threeChars(value, index, str) {return str.substring(index - 1, index + 2)
}
var word = "JavaScript"
var result = [].map.call(word, threeChars)
console.log(result) //["Ja", "Jav", "ava", "vaS", "aSc", "Scr", "cri", "rip", "ipt", "pt"]

filter:对数组的每个元素调用定义的回调函数,并返回回调函数为其返回true的值的数组

array.filter(callbackfn[,thisArg])

注:
1、返回值是一个包含回调函数为其返回true的所有值的新数组。如果回调函数为array的所有元素返回false,则新数组的长度为0
2、除了数组对象外,filter方法可由具有length属性,且具有已按数字编制索引的属性名的任何对象使用

示例1 筛选数组中的素数

function CheckIfPrime(value, index, arr) {high = Math.floor(Math.sqrt(value)) + 1;for (var d = 2; d <= high; d++) { //单重循环比双重循环节约时间if (value == 1 || value % 2 == 0) {return false;}}return true;
}
var a = [1, 3, 5, 7, 9, 11]
var primes = a.filter(CheckIfPrime)
console.log(primes) //[3, 5, 7, 9, 11]

示例2 使用filter方法过滤数组中字符串的元素

var arr = [1, 2, '3', 'a']
var result = arr.filter(function(value) {return (typeof value == 'string')
})
console.log(result)

示例3 使用filter方法过滤window对象包含的以字母css开头的属性名

var filteredNames = Object.getOwnPropertyNames(window).filter(IsC);function IsC(value) {var str = value.substr(0, 3);if (str.toLowerCase() == 'css') {return true;} else {return false}
}
console.log(filteredNames)

示例3 过滤数组number中值在min和max范围的元素

var number = [2, 4, 3, 8, 9]
var obj = {min: 3,max: 10
}function check(value) {return (value > this.min && value < this.max)
}
var re = number.filter(check, obj)
console.log(re)

示例5
使用filter方法过滤字符串中每个单词的首字母

var str = 'Hello World!'function checkValue(value, index, arr) {if (index == 0) {return true} else {return arr[index - 1] === ' '}
}
var s = [].filter.call(str, checkValue)
console.log(s)

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

  • find() 方法为数组中的每个元素都调用一次函数执行。 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined
  • find() 对于空数组,函数是不会执行的。 find() 并没有改变数组的原始值。

实例:查找数组中第一个id为3的对象

let arr=[{id:1,age:10},{id:3,age:12},{id:3,age:3}]
console.log(arr.find(e=> e.id==3))

findIndex:返回传入一个测试条件(函数)符合条件的数组第一个元素位置

  • findIndex() 方法为数组中的每个元素都调用一次函数执行。当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1
  • findIndex() 对于空数组,函数是不会执行的, findIndex() 并没有改变数组的原始值。

实例:找到数组中第一个6的位置

console.log([1,2,6,9,5,6,4,6].findIndex(e=> e==6))

**for in:**循环语句,用于对对象的循环

  let person={name:'Tom',age:15,sex:'man'}for(let p in person){console.log(p,person[p])}

includes: 用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false
实例:

[1,2,3,8,5].includes(2)    //true 
[1,2,3,8,5].includes(2,2)   //false//第一个参数必须,要查找的值。第二个参数可选,查询的起始下标

这篇关于JavaScript迭代:forEach、every、some、map、filter、find、findIndex、for in、includes的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/176245

相关文章

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时,有没有考虑过 JVM 是如何把静态的字节码(byte code)转化为运行时对象的呢,这个问题看似简单,但清楚的同学相信也不会太多,这篇文章首先介绍 JVM 类初始化的机制,然后给出几个易出错的实例来分析,帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段,分别是:loading 、Linking、initialization

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权,允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true (Spring security默认会带有ROLE_前缀),去

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程,特意画了如下的类图,包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口,接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类,它们之间的依赖,构建起了整个框架。想要理解整个架构,最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文(security context)的信息。当前操作的用户是谁,该用户是否已经被认证,他拥有哪些角色权限…这些都被保

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目,文件名一般为项目名8 确定