Javascript數組系列二之迭代方法1

tylin 發布于2019-08-23 11:53 / 670人閱讀

摘要：我們在數組系列一之棧與隊列中介紹了一些數組的用法。該方法接受兩個參數，一個是元素每一項執行的回調函數，一個是可選參數，回調函數運行時的值。今天我們就說這么多，希望你有所收獲，接下來還請繼續關注，我們繼續來說數組的其他一系列的方法。

我們在《avascript數組系列一之棧與隊列》中介紹了一些數組的用法。比如：數組如何表現的和「棧」一樣，用什么方法表現的和「隊列」一樣等等一些方法，因為 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);
})

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

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	Yes	Yes

map()

該方法對數組的每一個元素執行給定的函數，返回一個新的數組，新數組的結果是原數組中元素執行方法后的結果。

該方法接受兩個參數，一個是元素每一項執行的回調函數，一個是可選參數，回調函數運行時 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]

在我們日常開發工作中，會遇到非常多的數據格式化的過程，利用這些方法可以大大方便我們的處理。

例如類數組轉換為數組的過程

});

例如格式化需要的數據

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() 方法的兼容性，直接上圖。

Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Yes	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。

今天我們就說這么多，希望你有所收獲，接下來還請繼續關注，我們繼續來說數組的其他一系列的方法。

關注微信公眾號：六小登登。領取全套學習資源

云服務器 GPU云服務器 javascript迭代數組 javascript數組方法數組迭代器 js迭代數組

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97632.html

Javascript數組系列二之迭代方法2

摘要：該方法接受兩個參數，一個是元素每一項執行的回調函數，一個是可選參數，回調函數運行時的值。今天我們來繼續 Javascript 數組系列的文章，上文《Javascript數組系列二之迭代方法1》我們說到一些數組的迭代方法，我們在開發項目實戰的過程中熟練的使用可以大大提高我們的開發效率以及數據的處理。接下來我們繼續來講解其他的一些迭代的方法。天也黑了，時間也不早了，話不多說，擼起袖...

fredshare 2019-08-23 11:56 評論0 收藏0
Javascript數組系列五之增刪改和強大的 splice()

摘要：刪除數組元素的開始索引需要刪除元素的個數，插入數組的元素語法因為參數變化多樣，我們主要從三個方面來展示的用法。今天是我們介紹數組系列文章的第五篇，也是我們數組系列的最后一篇文章，只是數據系列的結束，所以大家不用擔心，我們會持續的更新干貨文章。生命不息，更新不止！今天我們就不那么多廢話了，直接干貨開始。我們在《Javascript數組系列一之棧與隊列》中描述我們是如何利用 pus...

chavesgu 2019-08-23 12:01 評論0 收藏0
python綜合學習二之多進程

摘要：本節講學習的多進程。和之前的的不同點是丟向的函數有返回值，而的沒有返回值。所以接下來讓我們來看下這兩個進程是否會出現沖突。本節講學習Python的多進程。一、多進程和多線程比較多進程 Multiprocessing 和多線程 threading 類似, 他們都是在 python 中用來并行運算的. 不過既然有了 threading, 為什么 Python 還要出一個 multip...

gityuan 2019-07-30 17:37 評論0 收藏0
Map學習二之LinkedHash,HashTable,計算一個給定字符串的每個字符出現的次數

package com.itheima.demo03.Map; import java.util.HashMap;import java.util.LinkedHashMap; /* java.util.LinkedHashMap entends HashMap Map 接口的哈希表和鏈接列表實現，具有可預知的迭代順序。底層原理: 哈希表+鏈表(記錄元素的順序) */public cla...

Rocture 2019-08-16 18:33 評論0 收藏0
clay教程二之布局的使用

摘要：上圖是布局的計算模型。刪除方法刪除的只是布局保存的數據，然后重繪畫面，如果你需要畫面平滑改變，修改繪圖實現方法即可，這里不再贅述。作者：心葉時間：2018-11-06 14:47 clay項目Github地址：https://github.com/yelloxing/... 喜歡本項目的可以在github上給給star。在繪制一些常見圖形的時候，比如關系圖，單個結點或連線并不難，麻...

Forest10 2019-08-23 12:49 評論0 收藏0