Javascript數組中迭代方法的詳細分析

這篇文章帶給大家的內容是關於Javascript陣列中迭代方法的詳細分析，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

我們曾介紹了一些陣列的用法。例如：陣列如何表現的和「堆疊」一樣，用什麼方法表現的和「佇列」一樣等等一些方法，因為Javascript 中的陣列方法眾多，所以我們沒有在一篇文章中介紹過多的東西，接下來我們就來了解陣列的其他功能吧

正式開始！

陣列的迭代方法

陣列的迭代方法是我們在開發專案中使用頻率非常高、非常重要、非常高效，不僅如此這些方法還能使我們的程式碼會非常簡潔，可以這麼說，如果你在開發中不常使用這些方法的話，簡直就是太可怕了。

例如我們如何批量的添加DOM 節點

let containerUl = document.getElementById('container');
let li;
let peoples = [{name: 'Liu', age: 14}, {name: 'Li', age: 13}, {name: 'Cao', age: 11}];

//for 循环
for (let i = 0; i < peoples.length; i++) {
    li = document.createElement(&#39;li&#39;);
    li.innerHTML = peoples[i].name + ":" + peoples[i].age;
    containerUl.appendChild(li);
};

//数组的迭代方法，更加简洁
peoples.forEach((people) => {
    li = document.createElement('li');
    li.innerHTML = people.name + ":" + people.age;
    containerUl.appendChild(li);
})

上面只是舉了一個簡單的例子，其實我們在日常的開發過程中遠不止此，而且要比這個複雜的很多很多，所以如何有效率的進行工作的開發是非常有必須的。下面就從我們比較常用的一個一個的來說起。

forEach()

該方法對陣列的每一個元素執行給定的函數，傳回 undefined（或說無傳回值）。

此方法接受兩個參數，一個是元素每一項執行的回呼函數，一個是可選參數，回呼函數執行時 this 的值。

傳入的回呼函數會接受三個參數分別是：陣列中的元素（item），元素的索引（index，可選），陣列本身（array，可選）。

//语法
array.forEach(callback[, this])
array.forEach(callback(item, index, array){
    //函数体，执行的操作
});

//看个例子，本质上与 for 循环一样
let items = ['a', 'b', 'c'];
items.forEach(function (item) {
    console.log(item);
});

for (let i = 0; i < items.length; i++) {
    console.log(items[i])
}

最後我們來看看 forEach() 方法的相容性，直接上圖。

Chrome	Edge	#Firefox	Internet Explorer	Opera

Safari

Yes

Yes

1.5

9

YesYesmap()該方法對陣列的每一個元素執行給定的函數，傳回一個新的數組，新數組的結果是原始數組中元素執行方法後的結果。 此方法接受兩個參數，一個是元素每一項執行的回呼函數，一個是可選參數，回呼函數執行時 this 的值。 傳入的回呼函數會接受三個參數分別是：陣列中的元素（item），元素的索引（index，可選），陣列本身（array，可選）。 例如類別數組轉換為陣列的過程當然我們在實際工作中的資料複雜度遠不止此，但是我們可以明顯感覺到這些方法處理資料的優勢。 最後我們來看看 map() 方法的兼容性，直接上圖。 ChromeEdge

#Firefox

Internet Explorer

Opera

					//语法 var newArrs = array.map(callback[, this]) var newArrs = array.map(callback(item, index, array){ //return 执行后的结果 }); //例子 let numbers = [1, 2, 3]; let newNumbers = numbers.map(x => x * x); console.log(newNumbers); //[1, 4, 9] 在我們日常開發工作中，會遇到非常多的資料格式化的過程，利用這些方法可以大大方便我們的處理。
<ul>     <li><input type="text" value="1"></li>     <li><input type="text" value="2"></li>     <li><input type="text" value="3"></li> </ul> <script>     let list = document.getElementsByTagName('input');     let newList = Array.prototype.map.call(list, item => {         return item.value;     });     console.log(newList);//[1,2,3] </script> });	例如格式化需要的資料	let peoples = ['Liu', 'Cao', 'Pan']; let peoplesInfo = peoples.map(people => {     return {         name: people,         age: Math.floor(Math.random()*20)     } }); console.log(peoplesInfo); // [{name: Liu, age: XX},  //  {name: Cao, age: XX},  //  {name: Pan, age: XX}]

Yes

		Safari			Yes

1.5######9######Yes# #####Yes###############filter######該方法也是對陣列的每個元素執行給定的函數，傳回一個新的數組，新數組是由每項傳回true 的項組成。簡單來說就是篩選出來我們想要的。 ######此方法接受兩個參數，一個是元素每一項執行的回呼函數，一個是可選參數，回呼函數執行時 this 的值。 ######傳入的回呼函數會接受三個參數分別是：陣列中的元素（item），元素的索引（index，可選），陣列本身（array，可選）。 ###

//语法
var newArrs = array.filter(callback[, this])
var newArrs = array.filter(callback(item, index, array){
    //return 满足条件的项
});

//例子
let numbers = [1, 2, 3, 4, 5];
let newNumbers = numbers.filter(x => x > 2);
console.log(newNumbers); //[3, 4, 5]

###「filter」方法在實際工作上也同樣有著很多的作用，例如：我們找出一群人中哪些是小朋友。 ###

var peoples = [{name: 'liu', age: 9}, 
            {name: 'jiang', age: 18}, 
            {name: 'cao', age: 20}, 
            {name: 'pan', age: 3}];
var childrens = peoples.filter(people => people.age < 10);
console.log(childrens);

###最後我們來看看 filter() 方法的相容性，直接上圖。 ###############Chrome######Edge#######Firefox######Internet Explorer######Opera######################################################################################### #Safari##################Yes######Yes######1.5######9######Yes# #####Yes############

every

该方法是对数组的每一个元素执行给定的函数，
如果数组中的每个元素都满足给定的条件则返回 true，否则返回 false。

该方法接受两个参数，一个是元素每一项执行的回调函数，一个是可选参数，回调函数运行时 this 的值。

传入的回调函数会接受三个参数分别是：数组中的元素（item），元素的索引（index，可选），数组本身（array，可选）。

//语法
var newArrs = array.every(callback[, this])
var newArrs = array.every(callback(item, index, array){
    //执行方法
});

//例子
var number = [2, 3, 4, 5, 6];
var result1 = number.every(item => item > 4);
console.log(result1); //false
var result2 = number.every(item => item > 1);
console.log(result2); //true

我们在来看看 every() 方法的兼容性，直接上图。

Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Yes	Yes	1.5	9	Yes	Yes

some

该方法是对数组的每一个元素执行给定的函数，
如果数组中的有一个元素满足条件则返回 true，如果全部不满足条件则返回 false。

该方法接受两个参数，一个是元素每一项执行的回调函数，一个是可选参数，回调函数运行时 this 的值。

传入的回调函数会接受三个参数分别是：数组中的元素（item），元素的索引（index，可选），数组本身（array，可选）。

//语法
var newArrs = array.some(callback[, this])
var newArrs = array.some(callback(item, index, array){
    //执行方法
});

//例子
var number = [2, 3, 4, 5, 6];
var result1 = number.some(item => item < 1);
console.log(result1); //false
var result2 = number.some(item => item > 5);
console.log(result2); //true

我们在来看看 some() 方法的兼容性，直接上图。

Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Yes	Yes	1.5	9	Yes	Yes

可以看出 every 方法是全部返回 true 时，整个函数才返回 true；some 方法则是全部返回 false 时，整个函数才返回 false。

相关推荐：

javascript中Array数组的迭代方法实例分析_javascript技巧

JavaScript数组的5种迭代方法实例详解

以上是Javascript數組中迭代方法的詳細分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！