如何在 JavaScript 中移除陣列中索引為 0 的元素並返回其餘元素？

陣列是一種結構，可以儲存值元素，並且可以透過使用索引號引用它們來訪問它們。

Const colors = [“Green”, “Maroon”, “Blue”];

陣列的索引引用

在 JavaScript 中，陣列透過索引引用來引用。這些索引是從零開始的。陣列中的第一個元素將是索引 0。第二個元素將是索引 1。陣列中的最後一個元素將是陣列的總大小減 1。

擴充套件運算子 (…)

在本文中，我們將討論如何在 JavaScript 中移除陣列中索引為 0 的元素並返回其餘元素。

使用 rest() 方法

_.rest() 方法位於 JavaScript 中的 underscore.js 庫中。此方法將在陣列上執行，返回除索引 0 以外的其餘元素。

它包含兩個引數，第一個是陣列，另一個是索引值。第二個引數將從提到的索引陣列開始搜尋。

語法

_.rest( array, index );

示例 1

使用 rest 運算子

在這種情況下，我們對陣列執行了 rest 方法以列印陣列中第 0 個元素之後的元素。因為我們沒有包含第二個引數。

<html>
<body>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js">
   </script>
   <script type="text/javascript">
      document.write("Resultant array after performing rest method");
      document.write(_.rest([1, "Sharukh", 3, "Hrithik", 5, 6, 7, 8, "Aamir", 10]));
   </script>
</body>
</html>

示例 2

在這種情況下，我們對陣列執行了rest方法以列印第二個引數中傳遞的索引號之後的元素。這意味著它不會列印傳遞的索引號之前的元素。它列印該傳遞索引號之後的元素。

<html>
<body>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js">
   </script>
   <script type="text/javascript">
      document.write("Resultant array after performing rest method: ");
      document.write(_.rest([1, "Sharukh", 3, "Hrithik", 5, 6, 7, 8, "Aamir", 10],2));
   </script>
</body>
</html>

示例 3

使用 shift() 方法

在這種情況下，我們使用shift方法移除陣列中索引為 0 的元素，並將其大小減少 1。

<!DOCTYPE html>
<html>
   <title>Removing element using Shift method</title>
<head>
   <script>
      /* JavaScript code to perform shift() method to remove elements from array */
      function remove() {
         var arr = ["Car", "Bus", "Flight", "Train", "Bike"];
         
         // Deleting the first element in the array
         document.write("Original Array: " +arr+ "<br>");
         
         //Performing the deletion
         var newArr = arr.shift();
         document.write("Removed element: " + newArr + "<br>");
         document.write("Remaining elements: " + arr);
      }
      remove();
   </script>
</head>
<body>
</body>
</html>

示例 4

使用 splice() 方法

在這種情況下，我們執行了splice方法來移除陣列中的第一個元素。此方法透過新增或修改元素來修改現有陣列。為了移除，我們需要指定特定元素。

<!DOCTYPE html>
<html>
   <title>Removing an element using Shift method</title>
<head>
   <script>
      // JavaScript code to perform splice() function on array
      function Array() {
         var arr = ["Lion", "Tiger", "Cheetah", "Elephant", "Giraffe"]; // creating an array
         document.write("Original Array: " +arr+"<br>");
         
         // performing the removal of particular element from the array
         var newArr = arr.splice(0, 1);
         document.write("Removed element: " + newArr + "<br>");
         document.write("Remaining elements: " + arr);
      }
      Array();
   </script>
</head>
<body>
</body>
</html>

示例 5

在 splice 方法中使用 for 迴圈

在這種情況下，我們透過在 splice 方法中新增 for 迴圈來移除陣列中索引為 0 的元素。

<!DOCTYPE html>
<html>
   <title>Removing an element using Splice method</title>
<head>
   <script>
      // JavaScript code to perform splice() function on array.
      function Array() {
         var arr = ["BMW", "AUDI", "JAGUAR", "FERRARI", "LAMBHORGINI"];
         document.write("Original Array: " + arr + "<br>");
         // Removing the specified element by value from the array
         for (var i = 0; i < arr.length; i++) {
            if (arr[i] === "BMW") {
               var newArr = arr.splice(i, 1);
               document.write("Removed element: " + newArr + "<br>");
               document.write("Remaining elements: " + arr);
            }
         }
      }
      Array();
   </script>
</head>
<body>
</body>
</html>

示例 6

使用 remove() 方法

在這種情況下，透過使用 filter 方法建立 remove() 方法來移除第 0 個節點。

<!DOCTYPE html>
<html>
   <title>Removing an element in array using REMOVE NODE method</title>
<head>
   <script>
      // Declare an array
      var arr = ["Ten", "Twenty", "Thirty", "Fourty", "Fifty"]
      
      //Creating function
      function arrayRemove(array, value) {
         document.write("Original Array: " + arr + "<br>");
         // performing filter method to create a remove method
         return arr.filter(function(func) {
            return func != value;
         });
      }
      var result = arrayRemove(arr, "Ten");
      document.write("Remaining elements: " + result)
   </script>
</head>
<body>
</body>
</html>

示例 7

使用 Delete 運算子

在這種情況下，我們使用 Delete 運算子執行了陣列中索引為 0 的元素的刪除操作。

<!DOCTYPE html>
<html>
   <title>Removing an element in array using DELETE OPERATOR method</title>
<head>
   <script>
      // Create and assign elements to an array
      var arr = ["Ironman", "Batman", "Thor", "CapAmerica", "Groot"]
      document.write("The original array: " + arr +"<br>")
      
      // Delete element at index 0
      var deleted = delete arr[0];
      
      //Printing the rest of the array
      document.write("Remaining elements: " + arr);
   </script>
   </head>
<body>
</body>
</html>

示例 8

使用 for 迴圈遍歷陣列

在這種情況下，我們建立的 for 迴圈將遍歷陣列，排除已移除的元素，並將剩餘元素儲存到函式內部定義的新陣列中。

<!DOCTYPE html>
<html>
   <title>Removing an element in array using for loop() and new array</title>
<head>
   <script>
      let deleteElement = (arr, n) => {
         let newArray = [];
         for (let i = 0; i < arr.length; i++) {
            if (arr[i] !== n) {
               newArray.push(arr[i]);
            }
         }
         return newArray;
      };
      
      //Elements in the array
      let elements_in_array = ["SHIFT", "ALT", "TAB", "CAPS", "HOME"];
      
      //Selecting the element to be deleted
      let element_to_be_deleted = "SHIFT";
      let newArr = deleteElement(elements_in_array, element_to_be_deleted);
      document.write("Existing array is: " + elements_in_array);
      document.write("Remaining elements after deletion: " + newArr);
   </script>
</head>
<body>
</body>
</html>

更新於： 2022-09-19

657 次瀏覽

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.