松软科技web课堂:JavaScript 数组迭代方法
数组迭代方法对每个数组项进行操作,听着挺高深,其实,就是对数组对象一次性逐一进行一种操作的一种叫法。(文章来源: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 数组迭代方法的更多相关文章
- 松软科技web课堂:JavaScript 数组方法
JavaScript 数组的力量隐藏在数组方法中. 把数组转换为字符串 JavaScript 方法 toString() 把数组转换为数组值(逗号分隔)的字符串. 实例 var fruits = [& ...
- 松软科技web课堂:JavaScript 数组
JavaScript 数组用于在单一变量中存储多个值. 实例 var cars = ["Saab", "Volvo", "BMW"]; 什么 ...
- 松软科技web课堂:JavaScript 数据类型
字符串值,数值,布尔值,数组,对象. JavaScript 数据类型 JavaScript 变量能够保存多种数据类型:数值.字符串值.数组.对象等等: var length = 7; // 数字 va ...
- 松软科技Web课堂:JavaScript JSON
JSON 是存储和传输数据的格式. JSON 经常在数据从服务器发送到网页时使用. 什么是 JSON? JSON 指的是 JavaScript Object Notation JSON 是轻量级的数据 ...
- 松软科技Web课堂:JavaScript 类型转换
Number() 转换数值,String() 转换字符串,Boolean() 转换布尔值. JavaScript 数据类型 JavaScript 中有五种可包含值的数据类型: 字符串(string) ...
- 松软科技Web课堂:JavaScript this 关键词
实例 var person = { firstName: "Bill", lastName : "Gates", id : 678, fullName : fu ...
- 松软科技Web课堂:JavaScript 正则表达式
正则表达式是构成搜索模式的字符序列. 该搜索模式可用于文本搜索和文本替换操作. 什么是正则表达式? 正则表达式是构成搜索模式(search pattern)的字符序列. 当您搜索文本中的数据时,您可使 ...
- 松软科技Web课堂:JavaScript Break 和 Continue
break 语句“跳出”循环. continue 语句“跳过”循环中的一个迭代. Break 语句 在本教程稍早的章节中,您已见到了 break 语句.它被用于“跳出” switch 语句. brea ...
- 松软科技Web课堂:JavaScript For 循环
循环可多次执行代码块. JavaScript 循环 假如您需要运行代码多次,且每次使用不同的值,那么循环(loop)相当方便使用. 通常我们会遇到使用数组的例子: 不需要这样写: text += ca ...
随机推荐
- 安装包RPM包或源码包
RPM工具 # mount /dev/cdrom /mnt 挂载光盘 # rpm 软件包管理器 -i 安装(需要安装包完整名称) -v 可视化 -h 显示安装进度 ...
- B树概述与简单应用示例(C#)
引言: 天不生仲尼,万古如长夜.在计算机科学中,也有一个划时代的发明,B树(多路平衡查找树)及其变体(B树,b*树,b+树): 由德国科学家(鲁道夫·拜尔 Rudolf Bayer),美国科学家(爱德 ...
- cpv framework 0.1 正式发布 (C++ 网页框架)
项目地址 https://github.com/cpv-project/cpv-framework 项目介绍 cpv framework 是一个 C++ 编写的网页框架,基于 seastar fram ...
- python字符串与字典转换
经常会遇到字典样式字符串的处理,这里做一下记录. load load针对的是文件,即将文件内的json内容转换为dict import json test_json = json.load(open( ...
- C# Parallel 多线程并发
Parallel并发执行多个任务 多线程的,主线程会参与计算---阻塞界面等于TaskWaitAll+主线程计算 常用方法 1.Invoke 尽可能并行执行提供的每个操作 Console.Write ...
- https类型接口,关闭认证(verify=False)情况下消除告警的方法
一.问题描述 当我们测试接口的协议为https时,当关闭了认证(verify=False)的时候,我们测试通过了,但是使用有一条警告显示,最终生成的测试报告也不美观,如下图 二.解决办法 我们可以在封 ...
- 阿里云服务器搭建web项目小结
前言 最近恰好有时间,自己搞了个云服务器试着搭建了个网站,遇到了一些问题,通过踩坑也涨了一些经验,遂记录一二,与后来者分享. 正文 1.博主用的阿里云服务器,为什么用它呢?一个是恰逢双十一,有优惠:另 ...
- WebShell代码分析溯源(八)
WebShell代码分析溯源(八) 一.一句话变形马样本 <?php $e=$_REQUEST['e'];$arr= array('test', $_REQUEST['POST']);uasor ...
- Windows10安装Elasticsearch IK分词插件
安装插件 cmd切换到Elasticsearch安装目录下 C:\Users\Administrator>D: D:\>cd D:\Program Files\Elastic\Elasti ...
- .NET Core项目与传统vs项目的细微不同
我不是什么资深专家,但是我在观察.NET Core创建的控制台程序与普通控制台程序的csproj文件时,发现了一个不同 csproj本质上是一个XML,其中的一个节点<PropertyGroup ...