移除JavaScript陣列中所有空索引
假設有一個數組包含一些空索引,需要移除這些空索引。
讓我們看看輸入輸出場景:
假設有一個包含一些空索引的陣列。現在我們需要排除它們,並返回只有真值元素。
Array = [22, 45, , 56, 71, , 10]; Output = [22, 45, 56, 71, 10]
正如我們在輸出中看到的,陣列中空索引已被移除。我們可以使用多種方法來完成上述任務,讓我們看看解決方法。
使用filter()方法
JavaScript中的filter()方法將建立一個包含滿足函式給定條件的元素的新陣列。此方法不會對空元素執行操作,也不會更改或修改現有陣列。
語法
以下是JavaScript中filter()方法的語法:
array.filter(function(currentValue index, arr));
引數
function()引數是一個函式,用於迭代每個陣列元素。
currentValue引數,這將是當前元素的值。
index引數,這將是當前元素的索引。
arr引數將是當前元素的陣列。
此filter()方法將返回一個包含滿足函式中條件的元素的新陣列。如果沒有任何元素透過條件,則返回空陣列。
示例
在下面的示例中,我們有一個包含空索引的陣列。我們使用了filter()方法來移除空索引。我們呼叫了filter()方法並將一個函式傳遞給它。對於陣列中函式的每次迭代,它將返回當前項。現在它將過濾所有假值(空索引)並返回一個包含陣列中真值項的新陣列。
<!DOCTYPE html> <html> <head> <title>Removing all the empty indices from array</title> <button onClick = "fun()">Click! </button> <p id = "para"> </p> </head> <body> <script> const array = ['Hello', 'Tutorialspoint', , , , 23, , 5, 7]; function fun(){ const res = array.filter(item => { return item; }); document.getElementById("para").innerHTML = res; }; </script> </body> </html>
在輸出中,我們可以看到filter()方法過濾了所有空索引(假值)並返回所有真值。
示例:使用While迴圈
實現上述所需任務的另一種方法是使用while迴圈。
在下面的示例中:
我們有一個包含一些空索引的陣列。
然後我們建立了一個空陣列來推送將滿足迴圈中條件的值。
然後我們有一個while迴圈,並檢查元素是否存在,並將它們推入新陣列。
<!DOCTYPE html> <html> <head> <title>Removing all the empty indices from array</title> <button onClick = "func()"> Click here! </button> <p id = "para"></p> </head> <body> <script> const array = [, , , , 4, , 6, 22, , 7, 5,77]; document.write("Existing array : " , array); function func(){ const resArr = []; let i = 0; while (i < array.length) { i++; if (array[i]) { resArr.push(array[i]); } }; document.getElementById("para").innerHTML = "After removing empty indices: " + resArr; }; </script> </body> </html>
在輸出中,我們可以看到陣列中存在的元素被推入新陣列。
使用forEach()方法
JavaScript中的forEach()方法對陣列中的每個元素呼叫一個函式,此方法不會對空元素執行操作。
語法
以下是JavaScript中forEach()方法的語法,返回值為undefined。
array.forEach(function(currentValue, index, arr), thisValue)
引數
function引數將迭代每個陣列元素。
currentValue是陣列中當前元素的值。
index是當前元素的索引。
arr,此引數是當前元素的陣列。
示例
在這個例子中:
我們有一個包含空索引的陣列。透過使用forEach()方法,我們已經從陣列中移除了所有空索引。
我們建立了一個空陣列來儲存非空元素。forEach()方法將遍歷陣列,對於每次迭代,它將檢查當前元素是否為null。
如果元素不為null,則我們將元素推入空陣列。
<!DOCTYPE html> <html> <head> <title>Removing all the empty indices from array</title> <button onClick = "func()"> Click me! </button> <p id = "para"></p> </head> <body> <script> const array = ['apple', , , 'ball', , , , , 93]; const ResArray = []; function func(){ array.forEach(item => { if (item !== null) { ResArray.push(item); } }); document.getElementById("para").innerHTML = ResArray; }; </script> </body> </html>
正如我們在輸出中看到的,我們已經使用forEach()方法將所有非空索引推入空陣列。