数组迭代方法对每个数组项进行操作,听着挺高深,其实,就是对数组对象一次性逐一进行一种操作的一种叫法。(文章来源: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. UWP 打开系统设置面板

    由于UWP各种权限管理的比较严格,所以在执行某一个特殊的操作之前,最好先申请一下相应的权限,以便告知用户你使用了这个权限,而且可以有效的避免App崩溃. 比如你想让用户手动打开麦克风权限,那么可以执行 ...

  2. 6.1 自定义abp拦截器示例

    一个简单.基于AbpInterceptor的拦截器示例: using Microsoft.Extensions.DependencyInjection; using System; using Sys ...

  3. Android odex,oat文件的反编译,回编译

    现在,许多Android手机的ROM包在生成过程中都启用优化,把jar文件抽空,生成odex/oat和vdex文件,以在运行时省掉编译时间.如果想对这些jar进行修改,就要修改它们所对应的odex或者 ...

  4. 使用mysql-proxy实现mysql的读写分离

     前言: MySQL读写分离是指让master处理写操作,让slave处理读操作,非常适用于读操作量比较大的场景,可减轻master的压力.使用mysql-proxy实现mysql的读写分离,mysq ...

  5. 初识微信小程序

    一.简介 微信小程序是运行在微信环境中的应用,它只能在微信中运行,不能运行在浏览器等其他环境中,微信团队提供了专门的开发工具用于微信小程序的开发,还提供了丰富的API,让我们的小程序能够具备与手机设备 ...

  6. 【CF528D】Fuzzy Search

    Problem Description 你有一个长度为 \(n\) 的串 \(S\),以及长度为 \(m\) 的串 \(T\). 现给定一个数 \(k\) ,我们说 \(T\) 在 \(S\) 的位置 ...

  7. Python3 pickle模块用法

    pickle(python3.x)和cPickle(python2.x的模块)相当于java的序列化和反序列化操作. 常采用下面的方式使用: import pickle pickle.dump(obj ...

  8. console 有没有小伙伴跟我一样想知道这个对象呢

    晚上看了会代码,没什么简单又好分享的 -0- 突然想到console这个对象,就把它打印了出来看看吧 ; for(var key in console){ i++; ){ document.write ...

  9. JS---part2课程介绍+part1复习

    part1复习 JavaScript分三个部分: 1. ECMAScript标准----JS基本的语法 2. DOM:Document Object Model 文档对象模型 3. BOM:浏览器对象 ...

  10. leaflet 结合 Echarts4 实现散点图(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...