移除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()方法將所有非空索引推入空陣列。

更新於:2022年12月19日

瀏覽量:1000+

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告