這篇文章帶給大家的內容是關於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('li'); 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); })
上面只是舉了一個簡單的例子,其實我們在日常的開發過程中遠不止此,而且要比這個複雜的很多很多,所以如何有效率的進行工作的開發是非常有必須的。下面就從我們比較常用的一個一個的來說起。
該方法對陣列的每一個元素執行給定的函數,傳回 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 | |
---|---|---|---|---|---|
Yes
Yes
1.59Yesmap() | 該方法對陣列的每一個元素執行給定的函數,傳回一個新的數組,新數組的結果是原始數組中元素執行方法後的結果。 | 此方法接受兩個參數,一個是元素每一項執行的回呼函數,一個是可選參數,回呼函數執行時 this 的值。 | 傳入的回呼函數會接受三個參數分別是:陣列中的元素(item),元素的索引(index,可選),陣列本身(array,可選)。 | //语法 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}] 登入後複製 | 當然我們在實際工作中的資料複雜度遠不止此,但是我們可以明顯感覺到這些方法處理資料的優勢。 最後我們來看看 map() 方法的兼容性,直接上圖。 |
Safari | Yes |
//语法 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]
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);
该方法是对数组的每一个元素执行给定的函数,
如果数组中的每个元素都满足给定的条件则返回 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 |
该方法是对数组的每一个元素执行给定的函数,
如果数组中的有一个元素满足条件则返回 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 |
相关推荐:
javascript中Array数组的迭代方法实例分析_javascript技巧
以上是Javascript數組中迭代方法的詳細分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!