数组迭代方法对每个数组项进行操作,听着挺高深,其实,就是对数组对象一次性逐一进行一种操作的一种叫法。(文章来源:www.sysoft.net.cn,加v:15844800162深度交流)

Array.forEach()

forEach() 方法为每个数组元素调用一次函数(回调函数)。

实例

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction); function myFunction(value, index, array) {
txt = txt + value + "<br>";
}

注释:该函数接受 3 个参数:

  • 项目值
  • 项目索引
  • 数组本身

上面的例子只用了 value 参数。这个例子可以重新写为:

实例

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction); function myFunction(value) {
txt = txt + value + "<br>";
}

所有浏览器都支持 Array.forEach(),除了 Internet Explorer 8 或更早的版本:

Array.map()

map() 方法通过对每个数组元素执行函数来创建新数组。

map() 方法不会对没有值的数组元素执行函数。

map() 方法不会更改原始数组。

这个例子将每个数组值乘以2:

实例

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction); function myFunction(value, index, array) {
return value * 2;
}

请注意,该函数有 3 个参数:

  • 项目值
  • 项目索引
  • 数组本身

当回调函数仅使用 value 参数时,可以省略索引和数组参数:

实例

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction); function myFunction(value) {
return value * 2;
}

所有浏览器都支持 Array.map(),除了 Internet Explorer 8 或更早的版本:

Array.filter()

filter() 方法创建一个包含通过测试的数组元素的新数组。

这个例子用值大于 18 的元素创建一个新数组:

实例

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction); function myFunction(value, index, array) {
return value > 18;
}

请注意此函数接受 3 个参数:

  • 项目值
  • 项目索引
  • 数组本身

在上面的例子中,回调函数不使用 index 和 array 参数,因此可以省略它们:

实例

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction); function myFunction(value) {
return value > 18;
}

Array.reduce()

reduce() 方法在每个数组元素上运行函数,以生成(减少它)单个值。

reduce() 方法在数组中从左到右工作。另请参见 reduceRight()。

reduce() 方法不会减少原始数组。

这个例子确定数组中所有数字的总和:

实例

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction); function myFunction(total, value, index, array) {
return total + value;
}

请注意此函数接受 4 个参数:

  • 总数(初始值/先前返回的值)
  • 项目值
  • 项目索引
  • 数组本身

上例并未使用 index 和 array 参数。可以将它改写为:

实例

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction); function myFunction(total, value) {
return total + value;
}

reduce() 方法能够接受一个初始值:

实例

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100); function myFunction(total, value) {
return total + value;
}

所有浏览器都支持 Array.reduce(),除了 Internet Explorer 8 或更早的版本:


Array.every()Array.reduceRight()

reduceRight() 方法在每个数组元素上运行函数,以生成(减少它)单个值。

reduceRight() 方法在数组中从左到右工作。另请参见 reduce()。

reduceRight() 方法不会减少原始数组。

这个例子确定数组中所有数字的总和:

实例

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction); function myFunction(total, value, index, array) {
return total + value;
}

请注意此函数接受 4 个参数:

  • 总数(初始值/先前返回的值)
  • 项目值
  • 项目索引
  • 数组本身

上例并未使用 index 和 array 参数。可以将它改写为:

实例

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction); function myFunction(total, value) {
return total + value;
}

所有浏览器都支持 Array.reduceRight(),除了 Internet Explorer 8 或更早的版本:

every() 方法检查所有数组值是否通过测试。

这个例子检查所有数组值是否大于 18:

实例

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction); function myFunction(value, index, array) {
return value > 18;
}

请注意此函数接受 3 个参数:

  • 项目值
  • 项目索引
  • 数组本身

如果回调函数仅使用第一个参数(值)时,可以省略其他参数:

实例

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction); function myFunction(value) {
return value > 18;
}

所有浏览器都支持 Array.every(),除了 Internet Explorer 8 或更早的版本:

Array.some()

some() 方法检查某些数组值是否通过了测试。

这个例子检查某些数组值是否大于 18:

实例

var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction); function myFunction(value, index, array) {
return value > 18;
}

请注意此函数接受 3 个参数:

  • 项目值
  • 项目索引
  • 数组本身

所有浏览器都支持 Array.some(),除了 Internet Explorer 8 或更早的版本:

Array.indexOf()

indexOf() 方法在数组中搜索元素值并返回其位置。

注释:第一个项目的位置是 0,第二个项目的位置是 1,以此类推。

实例

检索数组中的项目 "Apple":

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

语法

array.indexOf(item, start)

如果项目多次出现,则返回第一次出现的位置。如果未找到项目,Array.indexOf() 返回 -1。

Array.lastIndexOf()

Array.lastIndexOf() 与 Array.indexOf() 类似,但是从数组结尾开始搜索。

实例

检索数组中的项目 "Apple":

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

所有浏览器都支持 Array.lastIndexOf(),除了 Internet Explorer 8 或更早的版本:

Array.find()

find() 方法返回通过测试函数的第一个数组元素的值。

这个例子查找(返回)大于 18 的第一个元素的值:

实例

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction); function myFunction(value, index, array) {
return value > 18;
}

请注意此函数接受 3 个参数:

  • 项目值
  • 项目索引
  • 数组本身

Array.findIndex()

findIndex() 方法返回通过测试函数的第一个数组元素的索引。

这个例子查找大于 18 的第一个元素的索引:

实例

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction); function myFunction(value, index, array) {
return value > 18;
}

请注意此函数接受 3 个参数:

  • 项目值
  • 项目索引
  • 数组本身

松软科技web课堂:JavaScript 数组迭代方法的更多相关文章

  1. 松软科技web课堂:JavaScript 数组方法

    JavaScript 数组的力量隐藏在数组方法中. 把数组转换为字符串 JavaScript 方法 toString() 把数组转换为数组值(逗号分隔)的字符串. 实例 var fruits = [& ...

  2. 松软科技web课堂:JavaScript 数组

    JavaScript 数组用于在单一变量中存储多个值. 实例 var cars = ["Saab", "Volvo", "BMW"]; 什么 ...

  3. 松软科技web课堂:JavaScript 数据类型

    字符串值,数值,布尔值,数组,对象. JavaScript 数据类型 JavaScript 变量能够保存多种数据类型:数值.字符串值.数组.对象等等: var length = 7; // 数字 va ...

  4. 松软科技Web课堂:JavaScript JSON

    JSON 是存储和传输数据的格式. JSON 经常在数据从服务器发送到网页时使用. 什么是 JSON? JSON 指的是 JavaScript Object Notation JSON 是轻量级的数据 ...

  5. 松软科技Web课堂:JavaScript 类型转换

    Number() 转换数值,String() 转换字符串,Boolean() 转换布尔值. JavaScript 数据类型 JavaScript 中有五种可包含值的数据类型: 字符串(string) ...

  6. 松软科技Web课堂:JavaScript this 关键词

    实例 var person = { firstName: "Bill", lastName : "Gates", id : 678, fullName : fu ...

  7. 松软科技Web课堂:JavaScript 正则表达式

    正则表达式是构成搜索模式的字符序列. 该搜索模式可用于文本搜索和文本替换操作. 什么是正则表达式? 正则表达式是构成搜索模式(search pattern)的字符序列. 当您搜索文本中的数据时,您可使 ...

  8. 松软科技Web课堂:JavaScript Break 和 Continue

    break 语句“跳出”循环. continue 语句“跳过”循环中的一个迭代. Break 语句 在本教程稍早的章节中,您已见到了 break 语句.它被用于“跳出” switch 语句. brea ...

  9. 松软科技Web课堂:JavaScript For 循环

    循环可多次执行代码块. JavaScript 循环 假如您需要运行代码多次,且每次使用不同的值,那么循环(loop)相当方便使用. 通常我们会遇到使用数组的例子: 不需要这样写: text += ca ...

随机推荐

  1. C#线程学习笔记六:线程同步--信号量和互斥体

    本笔记摘抄自:https://www.cnblogs.com/zhili/archive/2012/07/23/Mutex_And_Semaphore.html,记录一下学习过程以备后续查用.     ...

  2. 升鲜宝V2.0_生鲜配送管理系统_杭州生鲜配送行业,升鲜宝使用教程 客户管理 第二章

    1.新增客户 (1)新增客户有两种方式,单个添加和批量添加,客户的结构可以是独立的,也可以是父子结构(比如杭州升鲜宝科技有限公司下有西湖区部门,滨江区部门,余杭区部门等多个分部,就可以建立父子结构,这 ...

  3. Dynamics 365 Portal Onpremise缓存问题

    最近被Dynamics 365 Portal的缓存问题折腾得不轻,Portal的配置进行缓存也就算了,连CRM中的记录也进行了长达15分钟到2小时的缓存,这是完全无法接受的 试想,我们有一个Porta ...

  4. Silky-CTF: 0x02 Vulhub Walkthrough

    靶机地址: https://www.vulnhub.com/entry/silky-ctf-0x02,307/ 主机扫描: HTTP进行目录爆破 尝试SQL注入会被封掉IP 经过尝试发现usernam ...

  5. sqoop 安装与使用

    Sqoop(发音:skup)是一款开源的工具,主要用于在Hadoop(Hive)与传统的数据库间进行数据的传递,可以将一个关系型数据库(例如 : MySQL ,Oracle ,Postgres等)中的 ...

  6. SpringBoot整合jdbcTemplate

    一.目录展示 二.导入依赖 三.配置文件 四.Student实体类 package com.zn.entity; public class Student { private Integer stu_ ...

  7. Python爬虫基础——正则表达式

    说到爬虫,不可避免的会牵涉到正则表达式. 因为你需要清晰地知道你需要爬取什么信息?它们有什么共同点?可以怎么去表示它们? 而这些,都需要我们熟悉正则表达,才能更好地去提取. 先简单复习一下各表达式所代 ...

  8. 老版本nginx存在安全漏洞,不停服务热升级

    1.场景描述 安全部通知:nginx存在"整数溢出漏洞",经测试2017年4月21日之后的版本无问题,将openresty升级到最新版本,Nginx升级到1.13.2之后的版本. ...

  9. promise和axios

    1.接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环境是「单线程」 所谓单线程,是指JS引擎中负责解释和执行JavaScript代码的 ...

  10. C# 多线程总结 异常处理 线程取消 锁(lock)

    那么什么时候能用多线程? 任务能并发的时候 多线程能干嘛?提升速度/优化用户体验 网站首页:A数据库 B接口 C分布式服务 D搜索引擎,适合多线程并发,都完成后才能返回给用户,需要等待WaitAll列 ...