Remove last item from array using JavaScript (3 ways)-JS Tutorial-php.cn

Remove last item from array using JavaScript (3 ways)

藏色散人

Release： 2021-08-26 15:15:39

Original

10826 people have browsed it

In the previous article "JavaScript restricts the input box to only allow integers and decimal points (two methods)", I introduced how to use javascript to restrict the input box to only allow integers and decimal points. Interested Friends can learn about it~

What this article will explain is to teach you how to use JavaScript to delete the last item from an array.

Below I will explain how to use JavaScript to delete the last item from an array through 3 examples:

First sample code:

Note: This example uses the splice() method to remove the last item from the array.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body style="text-align:center;"
      id="body">
<h1 style="color:red;">
    PHP中文网
</h1>
<p id="GFG_UP"
   style="font-size: 16px;">
</p>
<button onclick="gfg_Run()">
    删除最后一项
</button>
<p id="GFG_DOWN"
   style="color:red;
              font-size: 20px;
              font-weight: bold;">
</p>
<script>
    var el_up =
        document.getElementById("GFG_UP");
    var el_down =
        document.getElementById("GFG_DOWN");
    var array = [34, 24, 31, 48];
    el_up.innerHTML = "Array = [" + array + "]";

    function gfg_Run() {
        array.splice(-1, 1);
        el_down.innerHTML =
            "删除后的数组 = [" + array + "]";
    }
</script>
</body>
</html>

Copy after login

The running results are as follows:

GIF 2021-8-26 星期四下午 3-02-06.gif

JavaScript Array splice() method adds/removes items to/from the array and returns The item that was removed; this method mutates the original array.

Second sample code:

Note: This example uses the pop() method to remove the last item from the array.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body style="text-align:center;"
      id="body">
<h1 style="color:orange;">
    PHP中文网
</h1>
<p id="GFG_UP"
   style="font-size: 16px;">
</p>
<button onclick="gfg_Run()">
    删除最后一项
</button>
<p id="GFG_DOWN"
   style="color:orange;
              font-size: 20px;
              font-weight: bold;">
</p>
<script>
    var el_up =
        document.getElementById("GFG_UP");
    var el_down =
        document.getElementById("GFG_DOWN");
    var array = [34, 24, 31, 48];
    el_up.innerHTML = "Array = [" + array + "]";

    function gfg_Run() {
        array.pop();
        el_down.innerHTML =
            "删除后的数组 = [" + array + "]";
    }
</script>
</body>
</html>

Copy after login

The running results are as follows:

GIF 2021-8-26 星期四下午 3-04-00.gif

The JavaScript Array pop() method will delete the arrayObject , decrements the array length by 1 and returns the value of the element it removed. If the array is already empty, pop() does not modify the array and returns an undefined value.

Third code example:

Note: This example does not remove the last item from the array, instead using The slice() method returns a new array with the items removed.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body style="text-align:center;"
      id="body">
<h1 style="color:pink;">
    PHP中文网
</h1>
<p id="GFG_UP"
   style="font-size: 16px;">
</p>
<button onclick="gfg_Run()">
    删除最后一项
</button>
<p id="GFG_DOWN"
   style="color:pink;
              font-size: 20px;
              font-weight: bold;">
</p>
<script>
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");
    var array = [34, 24, 31, 48];
    el_up.innerHTML = "Array = [" + array + "]";

    function gfg_Run() {
        el_down.innerHTML =
            "删除后的数组 = [" + array.slice(0, -1) + "]";
    }
</script>
</body>
</html>

Copy after login

The running results are as follows:

GIF 2021-8-26 星期四下午 3-07-32.gif

The JavaScript Array slice() method can return selected elements from an existing array , the slice() method can extract a certain part of the string and return the extracted part as a new string; the slice() method does not change the original array.

Finally, I would like to recommend "JavaScript Basics Tutorial" ~ Welcome everyone to learn ~

The above is the detailed content of Remove last item from array using JavaScript (3 ways). For more information, please follow other related articles on the PHP Chinese website!