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对象