javascript
027_JavaScript数组迭代
1. forEach()方法
1.1. forEach()方法为数组每个元素调用一次函数(回调函数)。
1.2. forEach()方法回调函数接受3个参数, 按顺序依次是: 项目值、项目索引、数组本身。如果没有需要, 还可以省略后面2个参数。
1.3. 实例
1.3.1. 代码
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8" /><title>forEach()方法</title></head><body><script type="text/javascript">var numbers = [45, 4, 9, 16, 25];numbers.forEach(myFunction1);function myFunction1(value, index, array) {document.write(value + " "); }document.write('<br />'); numbers.forEach(myFunction2);// 上面的例子只用了value参数, 因此也可以简写为:function myFunction2(value) {document.write(value + " "); }</script></body> </html>1.3.2. 效果图
2. map()方法
2.1. map()方法通过对数组每个元素执行函数来创建新数组。
2.2. map()方法不会对没有值的数组元素执行函数。
2.3. map()方法不会更改原始数组。
2.4. map()方法回调函数接受3个参数, 按顺序依次是: 项目值、项目索引、数组本身。如果没有需要, 还可以省略后面2个参数。
2.5. 实例
2.5.1. 代码
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8" /><title>map()方法</title></head><body><script type="text/javascript">var numbers1 = [45, 4, 9, 16, 25];function myFunction(value, index) {document.write('数组第' + (index + 1) + '元素执行函数。<br />');return value * 2;}document.write(numbers1 + '<br />');delete numbers1[0];document.write(numbers1 + '<br />');var numbers2 = numbers1.map(myFunction);document.write(numbers1 + '<br />'); document.write(numbers2);</script></body> </html>2.5.2. 效果图
3. reduce()和reduceRight()方法
3.1. reduce()方法在数组每个元素上运行函数, 以生成单个值。
3.2. reduce()方法在数组中从左到右工作。
3.3. reduce()方法不会减少原始数组。
3.4. reduce()方法回调函数接受4个参数, 按顺序依次是: 初始值/先前返回的值、项目值、项目索引、数组本身。如果没有需要, 还可以省略后面2个参数。
3.5. reduce()方法还能够接受一个初始值。
3.6. reduceRight()方法和reduce()方法唯一不同是在数组中从右到左工作。
3.7. 实例
3.7.1. 代码
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8" /><title>reduce()和reduceRight()方法</title></head><body><script type="text/javascript">var numbers = [45, 4, 9, 16, 25];function myFunction(total, value, index, array) {document.write('数组第' + (index + 1) + '元素执行函数。<br />');return total + value;}document.write(numbers + '<br />'); var sum1 = numbers.reduce(myFunction, 0); document.write(sum1 + '<br />'); var sum2 = numbers.reduceRight(myFunction, 10);document.write(sum2);</script></body> </html>3.7.2. 效果图
4. filter()方法
4.1. filter()方法过滤数组创建一个包含通过测试的新数组。
4.2. filter()方法回调函数接受3个参数, 按顺序依次是: 项目值、项目索引、数组本身。如果没有需要, 还可以省略后面2个参数。
5. every()方法
5.1. every()方法检查数组所有值是否通过测试。
5.2. every()方法回调函数接受3个参数, 按顺序依次是: 项目值、项目索引、数组本身。如果没有需要, 还可以省略后面2个参数。
6. some()方法
6.1. some()方法检查数组某些值是否通过了测试。
6.2. some()方法回调函数接受3个参数, 按顺序依次是: 项目值、项目索引、数组本身。如果没有需要, 还可以省略后面2个参数。
6.3. 实例
6.3.1. 代码
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8" /><title>filter()、every()和some()方法</title></head><body><script type="text/javascript">var numbers = [45, 4, 9, 16, 25];function myFunction(value, index, array) {return value > 18;}document.write(numbers + '<br />');var over18 = numbers.filter(myFunction); document.write(over18 + '<br />');var value1 = numbers.every(myFunction);document.write(value1 + '<br />');var value2 = numbers.some(myFunction);document.write(value2);</script></body> </html>6.3.2. 效果图
7. indexOf()和lastIndexOf()方法
7.1. indexOf()方法在数组中搜索元素值并返回其位置。和字符串的indexOf()用法一样。
7.2. indexOf()方法包含2个参数
7.3. indexOf()方法如果未找到项目, 返回-1。
7.4. indexOf()方法如果项目多次出现, 则返回第一次出现的位置。
7.5. lastIndexOf()与indexOf()类似, 但是从数组结尾开始搜索。
7.6. 实例
7.6.1. 代码
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8" /><title>indexOf()和lastIndexOf()</title></head><body><script type="text/javascript">var fruits = ["Apple", "Orange", "Apple", "Mango"];document.write('要查找的数组: ' + fruits + '<br />'); document.write('Apple第一次出现的位置: ' + fruits.indexOf("Apple") + '<br />'); document.write('从下标2的位置开始查找, Apple第一次出现的位置: ' + fruits.indexOf("Apple", 2) + '<br />'); document.write('从结尾开始搜索, Apple第一次出现的位置: ' + fruits.lastIndexOf("Apple") + '<br />');document.write('从结尾下标为1的位置开始搜索, Apple第一次出现的位置: ' + fruits.lastIndexOf("Apple", 1) + '<br />');</script></body> </html>7.6.2. 效果图
8. find()和findIndex()方法
8.1. find()方法返回通过测试函数的第一个数组元素的值。
8.2. findIndex()方法返回通过测试函数的第一个数组元素的索引。
8.3. find()和findIndex()方法调用函数接受3个参数, 按顺序依次是: 项目值、项目索引、数组本身。如果没有需要, 还可以省略后面2个参数。
8.4. 实例
8.4.1. 代码
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8" /><title>find()和findIndex()</title></head><body><script type="text/javascript">var numbers = [4, 9, 16, 25, 29];var value = numbers.find(myFunction);var index = numbers.findIndex(myFunction);function myFunction(value, index, array) {return value > 18;}document.write('原始数组: ' + numbers + '<br />'); document.write('数组中第一个大于18的元素是: ' + value + '<br />'); document.write('数组中第一个大于18的元素的下标是: ' + index);</script></body> </html>8.4.2. 效果图
总结
以上是生活随笔为你收集整理的027_JavaScript数组迭代的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 026_JavaScript数组排序
- 下一篇： 038_JavaScript对象