数组迭代方法对每个数组项进行操作,听着挺高深,其实,就是对数组对象一次性逐一进行一种操作的一种叫法。(文章来源: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. oracle中add_months()函数总结

    今天对add_months函数进行简单总结一下: add_months 函数主要是对日期函数进行操作,在数据查询的过程中进行日期的按月增加,其形式为: add_months(date,int);其中第 ...

  2. kvm磁盘管理

    kvm磁盘管理 kvm虚拟机虚拟磁盘格式转换 各种格式说明介绍 row:裸格式,占用空间较大,不支持快照功能,性能较好,不方便传输(顺序读写) 50G 2G 传输50G qcow2:cow 占用空间小 ...

  3. CentOS下 安装 Nginx

    官方文档:https://nginx.org/en/linux_packages.html#RHEL-CentOS 安装环境:Linux 服务器 CentOS 7.3.Root 权限 1.Instal ...

  4. ffmpeg+nginx 实现rtsp转rtmp并通过nginx转发

    Windows安装 ffmpeg ffmpeg windows版下载地址https://ffmpeg.zeranoe.com/builds/ static版本就行 配置环境变量:下载的压缩包解压后的路 ...

  5. 网页解析库-Xpath语法

    网页解析库 简介 除了正则表达式外,还有其他方便快捷的页面解析工具 如:lxml (xpath语法) bs4 pyquery等 Xpath 全称XML Path Language, 即XML路径语言, ...

  6. WebRTC分支提交记录

    截至2019.8.6日,webrtc官网release了M76,具体可参考:release notes WebRTC分支提交记录可以查看git commit记录. 方法:git checkout 到特 ...

  7. IT兄弟连 HTML5教程 CSS3属性特效 渐变1

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  8. 【转载】记一次因 Redis 使用不当导致应用卡死 bug 的排查及解决!

    说明:此篇文章 作者分析问题的思路很好,值得学习记录,原文转载自公众号. 首先说下问题现象:内网sandbox环境API持续1周出现应用卡死,所有api无响应现象 刚开始当测试抱怨环境响应慢的时候 , ...

  9. U8隐藏的配置项

    数据表:accinformation 我使用了一个是否自动审核库存生成的单据,看看是否能解决调拨单自动生成的其他出入库单自动审核的功能.

  10. python判断字典中key是否存在

    例:#生成一个字典d = {'title':'abc','age':18} if 'title' in d.keys(): print('存在')else: print('不存在') if 'titl ...