javascript
027_JavaScript数组迭代
1. forEach()方法
1.1. forEach()方法為數(shù)組每個元素調(diào)用一次函數(shù)(回調(diào)函數(shù))。
1.2. forEach()方法回調(diào)函數(shù)接受3個參數(shù), 按順序依次是: 項(xiàng)目值、項(xiàng)目索引、數(shù)組本身。如果沒有需要, 還可以省略后面2個參數(shù)。
1.3. 實(shí)例
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參數(shù), 因此也可以簡寫為:function myFunction2(value) {document.write(value + " "); }</script></body> </html>1.3.2. 效果圖
2. map()方法
2.1. map()方法通過對數(shù)組每個元素執(zhí)行函數(shù)來創(chuàng)建新數(shù)組。
2.2. map()方法不會對沒有值的數(shù)組元素執(zhí)行函數(shù)。
2.3. map()方法不會更改原始數(shù)組。
2.4. map()方法回調(diào)函數(shù)接受3個參數(shù), 按順序依次是: 項(xiàng)目值、項(xiàng)目索引、數(shù)組本身。如果沒有需要, 還可以省略后面2個參數(shù)。
2.5. 實(shí)例
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('數(shù)組第' + (index + 1) + '元素執(zhí)行函數(shù)。<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()方法在數(shù)組每個元素上運(yùn)行函數(shù), 以生成單個值。
3.2. reduce()方法在數(shù)組中從左到右工作。
3.3. reduce()方法不會減少原始數(shù)組。
3.4. reduce()方法回調(diào)函數(shù)接受4個參數(shù), 按順序依次是: 初始值/先前返回的值、項(xiàng)目值、項(xiàng)目索引、數(shù)組本身。如果沒有需要, 還可以省略后面2個參數(shù)。
3.5. reduce()方法還能夠接受一個初始值。
3.6. reduceRight()方法和reduce()方法唯一不同是在數(shù)組中從右到左工作。
3.7. 實(shí)例
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('數(shù)組第' + (index + 1) + '元素執(zhí)行函數(shù)。<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()方法過濾數(shù)組創(chuàng)建一個包含通過測試的新數(shù)組。
4.2. filter()方法回調(diào)函數(shù)接受3個參數(shù), 按順序依次是: 項(xiàng)目值、項(xiàng)目索引、數(shù)組本身。如果沒有需要, 還可以省略后面2個參數(shù)。
5. every()方法
5.1. every()方法檢查數(shù)組所有值是否通過測試。
5.2. every()方法回調(diào)函數(shù)接受3個參數(shù), 按順序依次是: 項(xiàng)目值、項(xiàng)目索引、數(shù)組本身。如果沒有需要, 還可以省略后面2個參數(shù)。
6. some()方法
6.1. some()方法檢查數(shù)組某些值是否通過了測試。
6.2. some()方法回調(diào)函數(shù)接受3個參數(shù), 按順序依次是: 項(xiàng)目值、項(xiàng)目索引、數(shù)組本身。如果沒有需要, 還可以省略后面2個參數(shù)。
6.3. 實(shí)例
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()方法在數(shù)組中搜索元素值并返回其位置。和字符串的indexOf()用法一樣。
7.2. indexOf()方法包含2個參數(shù)
7.3. indexOf()方法如果未找到項(xiàng)目, 返回-1。
7.4. indexOf()方法如果項(xiàng)目多次出現(xiàn), 則返回第一次出現(xiàn)的位置。
7.5. lastIndexOf()與indexOf()類似, 但是從數(shù)組結(jié)尾開始搜索。
7.6. 實(shí)例
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('要查找的數(shù)組: ' + fruits + '<br />'); document.write('Apple第一次出現(xiàn)的位置: ' + fruits.indexOf("Apple") + '<br />'); document.write('從下標(biāo)2的位置開始查找, Apple第一次出現(xiàn)的位置: ' + fruits.indexOf("Apple", 2) + '<br />'); document.write('從結(jié)尾開始搜索, Apple第一次出現(xiàn)的位置: ' + fruits.lastIndexOf("Apple") + '<br />');document.write('從結(jié)尾下標(biāo)為1的位置開始搜索, Apple第一次出現(xiàn)的位置: ' + fruits.lastIndexOf("Apple", 1) + '<br />');</script></body> </html>7.6.2. 效果圖
8. find()和findIndex()方法
8.1. find()方法返回通過測試函數(shù)的第一個數(shù)組元素的值。
8.2. findIndex()方法返回通過測試函數(shù)的第一個數(shù)組元素的索引。
8.3. find()和findIndex()方法調(diào)用函數(shù)接受3個參數(shù), 按順序依次是: 項(xiàng)目值、項(xiàng)目索引、數(shù)組本身。如果沒有需要, 還可以省略后面2個參數(shù)。
8.4. 實(shí)例
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('原始數(shù)組: ' + numbers + '<br />'); document.write('數(shù)組中第一個大于18的元素是: ' + value + '<br />'); document.write('數(shù)組中第一個大于18的元素的下標(biāo)是: ' + index);</script></body> </html>8.4.2. 效果圖
總結(jié)
以上是生活随笔為你收集整理的027_JavaScript数组迭代的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 026_JavaScript数组排序
- 下一篇： 038_JavaScript对象