技術標籤：學習JavaScriptjavascripthtmlhtml5es6

ES5中新增的陣列方法

迭代（遍歷）的方法5個：forEach(), map(), filter(), some(), every()

目錄

• ES5中新增的陣列方法
• • 前言
  • 一、forEach()
  • 二、map()
  • 三、filter()
  • 四、some()
  • 五、every()
  • • • • every() 的用法類似於some() ,這裡不再冗餘；區別在於：
• 總結

前言

–面試陣列問題：“說說你知道的陣列中的幾個方法？”
–諸如此類的面試題是前端開發人員必會知識點
–這裡總結ES5中的5個新增方法，後面還會總結ES6中常見的陣列方法。

提示：以下是本篇文章正文內容，下面案例可供參考理解
文章末尾會上機提供成功編譯的程式碼原始檔（如有不當之處，歡迎留言討論）

一、forEach()

• forEach() 方法用於呼叫陣列的每個元素,並將元素傳遞給回撥函式。
• 注意: forEach() 對於空陣列是不會執行回撥函式的。

// 陣列.forEach方法來遍歷陣列
array.forEach(function (currentValue, index, arr))

運用 forEach() 方法來遍歷陣列array，該方法中有一個回撥函式，有三個引數：

執行示例：

	// forEach 的使用
	let arr1 = [1, 6, 5, 4];
	// 求陣列之和
	let sum = 0;
	arr1.forEach(function (value, index, array) {
		console.log("元素：" + value);
		console.log("索引號：" + index);
		console.log("陣列本身：" + array);
	sum += value;
	})
	console.log(sum);

執行結果：

檢視執行程式碼

二、map()

• map() 方法返回一個新陣列，陣列中的元素為原始陣列元素呼叫函式處理後的值。

• map() 方法按照原始陣列元素順序依次處理元素。

• 注意： map() 不會對空陣列進行檢測。

• 注意： map() 不會改變原始陣列。

// 陣列.forEach方法來遍歷陣列
array.map(function (currentValue, index, arr), thisValue)

運用 map() 方法來遍歷陣列array，該方法中有一個回撥函式，有三個引數：

如果省略了 thisValue，或者傳入 null、undefined，那麼回撥函式的 this 為全域性物件。
執行示例：

	let arr = [56, 15, 48, 3, 7];
	let newArr = arr.map(function (item, index, array) {
		// 對整個陣列+3
		item += 3;
		return item
	});
	console.log(newArr)

執行結果：

檢視執行程式碼.

三、filter()

篩選工作：

• filter() 方法建立一個新的陣列，新陣列中的元素是通過檢查指定陣列中符合條件的所有元素。
  返回一個新陣列

• 注意： filter() 不會對空陣列進行檢測。

• 注意： filter() 不會改變原始陣列。

// 陣列.forEach方法來遍歷陣列
array.filter(function (currentValue, index, arr), thisValue)

運用 filter() 方法來遍歷陣列array，該方法中有一個回撥函式，有三個引數：

如果省略了 thisValue ，“this” 的值為 “undefined”
執行示例：
利用filter遍歷出所有偶數

	// 利用filter遍歷出所有偶數
        let arr = [56, 15, 48, 3, 7];
        let newArr = arr.filter(function (value, index, array) {
            return value % 2 === 0;
        });
        console.log(newArr)

執行結果：

檢視執行程式碼.

四、some()

• some() 方法用於檢測陣列中的元素是否滿足指定條件（函式提供）。

• some() 方法會依次執行陣列的每個元素：

• 如果有一個元素滿足條件，則表示式返回true , 剩餘的元素不會再執行檢測。

• 如果沒有滿足條件的元素，則返回false。即返回布林值。

• 注意： some() 不會對空陣列進行檢測。

• 注意： some() 不會改變原始陣列。

// 陣列.forEach方法來遍歷陣列
array.some(function (currentValue, index, arr), thisValue)

運用 some() 方法來遍歷陣列array，該方法中有一個回撥函式，有三個引數：

如果省略了 thisValue，或者傳入 null、undefined，那麼回撥函式的 this 為全域性物件。
執行示例：

		// 利用some查詢陣列中是否存在指定元素
        let arr = [18, 6, 1, 3, 41, 2];
        let flag = arr.some(function (value, index, array) {
            return value <= 10;
        });
        console.log(flag) 
        //存在小於10的元素  返回true否則返回false

執行結果：

some（）在未找到滿足新增的情況會遍歷所有元素，返回false
some（）在找到滿足條件的情況後，返回ture，並終止迴圈

• 斷點除錯
  
  
  
  檢視執行程式碼.

五、every()

• every() 方法用於檢測陣列所有元素是否都符合指定條件（通過函式提供）。
  every() 方法使用指定函式檢測陣列中的所有元素：

• 如果陣列中檢測到有一個元素不滿足，則整個表示式返回 false ，且剩餘的元素不會再進行檢測。
  如果所有元素都滿足條件，則返回 true。

• 注意： every() 不會對空陣列進行檢測。
  注意： every() 不會改變原始陣列

// 陣列.forEach方法來遍歷陣列
arr.every(function (currentValue, index, array), thisValue)

every() 的用法類似於some() ,這裡不再冗餘；區別在於：

every()會對陣列中的每一個元素，即currentValue進行匹配，只有全部滿足條件才會返回true，
而some()中，只需有一個currentValue滿足條件即可返回true，後面的currentValue不會再進行比較

總結

集腋成裘：學習前端JavaScript是一個需要不斷積累的過程。
希望對你有所幫助！

有任何問題歡迎留言討論
轉載請註明出處