javaScript數組遍歷和對稀疏數組處理方法有哪些

本篇內容介紹了“javaScript數組遍歷和對稀疏數組處理方法有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

1.forEach()方法

  forEach（參數1，參數2）方法本身可以接收兩個參數，第一個參數是一個函數，并且數組中的每一個元素均會調用一遍這個函數（稀疏數組除外）。一般來說，我們只會傳入第一個參數（且為必傳項），此處也不對其他參數多做介紹。下述其他方法的傳參情況與forEach（）相同。

  且下述方法中，作為參數傳入的函數其本身也有參數值，分別為：數組元素的值，數組元素的索引和數組本身。即：

myArray.forEach(

    function (數組元素的值，數組元素的索引，數組本身) {

    }

)

補充：function（a） { return a+3} 為沒有函數名稱的匿名函數， 其可寫成箭頭函數的形式

a => a+3

示例:

let myArray = [1,2,3];

// num=>{} 箭頭函數,相當于一個匿名函數

// function(num) { num = num * 3 }

myArray.forEach(num => {

    num = num * 3;

});

console.log(myArray) //打印結果為[ 1, 2, 3 ]

  forEach()方法沒有返回值，且沒有像普通for循環一樣可以終止迭代的break語句，并且正如上文所說，我們在此處對num進行的改變不會更改到myArray數組中。

2.map()方法

  map()與forEach（）方法不同的點在于，map（）方法的第一個參數函數會接收我們每個數組的元素，并可以返回一個值。而整個map（）方法的返回值就是這個函數的返回值所構成的數組。

  例：

let myArray = [1,2,3]

let result = myArray.map(num => {

    num *= 3

    return num

});

console.log(result,"\n原數組",myArray)

// 打印結果為

// [ 3, 6, 9 ] 

// 原數組 [ 1, 2, 3 ]

3.filter()

  filter()方法也有返回值，但他期望參數函數的返回值是一個boolean類型，也就是說它期望參數函數為斷言函數。它的返回值是一個滿足條件的myArray中的元素組成的數組。

示例：

let myArray = [1,2,3]

let result = myArray.filter(num => {

    num *= 3

    return num > 5

});

console.log(result)

//[ 2, 3 ]

  我們可以看到num值經過運算后為3、6、9，其中6和9滿足大于5的條件。其返回值是數組中的2、3這兩個元素，而不是運算后的結果。

4.一些非常用方法

find（）和 findIndex()

  這兩個方法與filter（）相似，但他們會在找到第一個滿足條件的值時停止迭代，find()方法會返回該元素的值，而findIndex（）方法會返回這個元素在數組中的索引。例：

let myArray = [1,2,3]

let result = myArray.find(num => {

    num *= 3

    return num > 5

});

console.log(result) // 打印值為： 2

let myArray = [1,2,3]

let result = myArray.findIndex(num => {

    num *= 3

    return num > 5

});

console.log(result) // 打印值為： 1

every() 和 some()

  every（）和some（）函數返回值為boolean類型，亦會使用一個斷言函數作為第一個入參，但只有數組中所有元素都滿足斷言函數的條件時，every（）才會返回true，當有一個元素不滿足條件時，every()會停止遍歷并返回false。

let myArray = [4,1,2,3];

let count = 0; // 用于記錄遍歷的次數

let result = myArray.every(num => {

    count++;

    num *= 3;

    return num > 5;

});

console.log(result,"遍歷的次數為",count) 

// 打印值為： false 遍歷的次數為 2

  而some（）函數只要有一個滿足條件便會停止遍歷，返回true值。

let myArray = [4,1,2,3];

let count = 0; // 用于記錄遍歷的次數

let result = myArray.some(num => {

    count++;

    num *= 3;

    return num > 5;

});

console.log(result,"遍歷的次數為",count) 

// 打印值為： true 遍歷的次數為 1

  此處需要注意的是 myArray數組的元素經過乘3運算后的結果為1、6、9，其中6和9滿足大于5的條件，但其返回的是myArray中的元素，也就是沒有經過運算的2和3。（不滿足條件的元素不會被返回，此處與map（）不同，map() 返回的數組長度與原數組一樣。）

對于稀疏數組的處理

  稀疏數組定義:

稀疏數組就是其元素沒有從0開始的索引的數組。正常情況下，數組的length屬性表明數組中元素的個數。如果數組是稀疏的，則length屬性的值會大于元素個數。

  正常的數組如 let myArray = [0,1,2]，這個數組的長度為3，元素個數為3，與數組長度相同，索引依次為0、1、2。

  稀疏數組簡單實踐：

let testArray = new Array(10);  //數組長度為10

testArray[20] = 1 //數組長度為21

console.log(testArray) // 打印結果為 [ <20 empty items>, 1 ]

&emsp;&emsp;此時數組長度為21，而元素只有一個，這就變成了一個稀疏數組。而造就稀疏數組的實際應用場景可能在運用delete刪除數組元素時發生，如：

let myArray = [1,2,3]

delete  myArray[1]

console.log(myArray,"數組的長度為",myArray.length)

console.log(1 in myArray)

// 打印結果為

// [ 1, <1 empty item>, 3 ] 數組的長度為 3

// 索引為1的元素是否存在 false

&emsp;&emsp;delete并不會修改數組的長度，也不會改變其他元素的索引值，所以會形成一個稀疏數組。如果想要元素索引值隨著數組元素的刪減而變化，可以使用splice（）方法。

forEach()方法不會遍歷稀疏數組中缺失元素

let myArray = [4,,2,3];

console.log("myArray",myArray)  

// 打印值為：myArray [ 4, <1 empty item>, 2, 3 ]

let count = 0; // 用于記錄遍歷的次數

myArray.forEach(num => {

    count++;

});

console.log("數組的長度為",myArray.length,"遍歷的次數為",count) 

// 數組的長度為 4 遍歷的次數為 3

map()也不會遍歷稀疏數組中缺失元素，但其返回值數組與原數組長度相同，且缺失的元素位置也相同

let myArray = [4,,2,3];

console.log("myArray",myArray)

// 打印值為：myArray [ 4, <1 empty item>, 2, 3 ]

let count = 0; // 用于記錄遍歷的次數

let result = myArray.map(num => {

    count++;

    return num*3

});

console.log("數組的長度為",myArray.length,"遍歷的次數為",count,"返回的數組為",result)

// 打印值為： 數組的長度為 4 

// 遍歷的次數為 3 

// 返回的數組為 [ 12, <1 empty item>, 6, 9 ]

filter（）的返回值不會包含稀疏數組中缺失的元素

let myArray = [4,,2,3];

console.log("myArray",myArray)

// 打印值為：myArray [ 4, <1 empty item>, 2, 3 ]

let count = 0; // 用于記錄遍歷的次數

let result = myArray.filter(num => {

    count++;

    return num>1

});

console.log("數組的長度為",myArray.length,"遍歷的次數為",count,"返回的數組為",result)

// 打印值為： 數組的長度為 4

// 遍歷的次數為 3

// 返回的數組為 [ 4, 2, 3 ]

“javaScript數組遍歷和對稀疏數組處理方法有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！