数组迭代方法对每个数组项进行操作,听着挺高深,其实,就是对数组对象一次性逐一进行一种操作的一种叫法。(文章来源: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. 通过 Drone Rest API 获取构建记录日志

    Drone是一款CICD工具,提供rest API,简单介绍下如何使用API 获取构建日志. 获取token 登录进入drone,点头像,在菜单里选择token 复制token即可 API 介绍 Dr ...

  2. 轻松玩转windows之redis实战

    Redis是一个常用的键值对数据库.本篇分享一下如何轻松在睿江云上实现基于windows的redis开发环境. 1. 登录睿江云 点击右上角登录框 ​ 进入登录页面,输入账号密码登录 ​ 进入控制台, ...

  3. 【30天自制操作系统】day02:寄存器和Makefile

    基本寄存器 AX(accumulator):累加寄存器 CX(counter):计数寄存器 DX(data):数据寄存器 BX(base):基址寄存器 SP(stack pointer):栈指针寄存器 ...

  4. Zuul Swagger 整合

    疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列 [博客园总入口 ] 架构师成长+面试必备之 高并发基础书籍 [Netty Zookeeper Redis 高并发实战 ] 前言 Crazy ...

  5. Xposed的新打开方式--Xpatch工作流程分析

    1. Xpatch概述 Xpatch是一款利用重打包的方式,使得被处理的Apk启动时自动加载Xposed模块,来实现应用内Hook的工具. 项目地址:https://github.com/WindyS ...

  6. Jenkins之自动部署、代码安全扫描、自动化接口测试

    搭建Jenkins wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.reporpm --i ...

  7. 精通awk系列(9):修改字段或NF引起的$0重新计算

    回到: Linux系列文章 Shell系列文章 Awk系列文章 修改字段或NF值的联动效应 注意下面的分割和计算两词:分割表示使用FS(field Separator),计算表示使用预定义变量OFS( ...

  8. mysql存储4字节的表情包数据报异常_Emoji表情包_Incorrect string value: '\xF0\x9F\x98\x84\xF0\x9F

    本文章转载自:https://www.cnblogs.com/coprince/p/7485968.html 原文如下: 问题描述:从新浪微博抓取消息保存到MySQL数据中,对应数据库字段为varch ...

  9. 初识NLP 自然语言处理

    接下来的一段时间,要深入研究下自然语言处理这一个学科,以期能够带来工作上的提升. 学习如何实用python实现各种有关自然语言处理有关的事物,并了解一些有关自然语言处理的当下和新进的研究主题. NLP ...

  10. js的常用场景效果

    转自https://www.cnblogs.com/tangdiao/p/9481681.html 1.checkbox的使用场景,学习之后就是购物车页面的自动计算的上手示例. 做成给checkbox ...