介绍三种用JS清空数据的应用方法 - Web前端

在javascript中有许多方法可以清空数组，并且在项目开发中经常会用到。今天我们一起来学下“JS清空数据”最基础的应用，有了“资本”，就可以去拓展更复杂的啦，GO~~~~

介绍三种方法：

方法一：将数组变量设置为大小为零的新数组

方法二：使用length属性将数组的长度设置为零

方法三：使用pop方法连续删除数组元素，得到空数组

接下来用具体实例逐个分析下：

方法一：将数组变量设置为大小为零的新数组

<!DOCtype html>
<HTML>
<head>
<meta charset="utf-8">
<title>JavaScript清空数组</title>
</head>
<body style = "text-align:center;">   
   
    <p id = "up"></p> 
      
    <button onclick="empty()">  
        单击可清空
    </button>  
      
    <p id = "down" style="color: green"></p> 
    <p id = "down1" style="color: green"></p> 
    <!-- 将数组大小设置为零 -->
    <script>  
        var GFG_Array = [1, 2, 3, 4, 5]; 
        var up = document.getElementById("up"); 
        up.innerHTML = "GFG_array："+GFG_Array; 
        var down = document.getElementById("down"); 
        down.innerHTML = "GFG_Array的长度为：" 
                + GFG_Array.length; 
        function empty() { 
            GFG_Array = []; 
            down = document.getElementById("down"); 
            down.innerHTML = "GFG_Array的长度为：" 
                    + GFG_Array.length; 
            down1 = document.getElementById("down1"); 
            down1.innerHTML = "GFG_Array："+GFG_Array; 
        } 
        
    </script>  
</body>   
  
</html>

方法二：使用length属性将数组的长度设置为零

数组的 length 属性总是比数组中定义的最后一个元素的下标大 1。对于那些具有连续元素，而且以元素 0 开始的常规数组而言，属性 length 声明了数组中的元素的个数。

数组的 length 属性在用构造函数 Array() 创建数组时被初始化。给数组添加新元素时，如果必要，将更新 length 的值。

设置 length 属性可改变数组的大小。如果设置的值比其当前值小，数组将被截断，其尾部的元素将丢失。如果设置的值比它的当前值大，数组将增大，新的元素被添加到数组的尾部，它们的值为 undefined。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript清空数组</title>
</head>
<body style = "text-align:center;">      
    <p id = "up"></p>       
    <button onclick="empty()">  
        单击可清空
    </button>  
      
    <p id = "down" style="color: green"></p> 
    <p id = "down1" style="color: green"></p> 
    <!-- 将数组大小设置为零 -->
    <script>  
        var GFG_Array = [1, 2, 3, 4, 5]; 
        var up = document.getElementById("up"); 
        up.innerHTML = "GFG_Array："+GFG_Array; 
        var down = document.getElementById("down"); 
        down.innerHTML = "GFG_Array的长度为：" 
                + GFG_Array.length; 
        function empty() { 
            GFG_Array.length = 0; 
            down = document.getElementById("down"); 
            down.innerHTML = "GFG_Array的长度为：" 
                    + GFG_Array.length; 
            down1 = document.getElementById("down1"); 
            down1.innerHTML = "GFG_Array："+GFG_Array; 
        } 
        
    </script>  
</body>   
</html>

方法三：使用pop方法连续删除数组元素，得到空数组

pop()方法用于删除并返回数组的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript清空数组</title>
</head>
<body style = "text-align:center;">      
    <p id = "up"></p>       
    <button onclick="empty()">  
        单击可清空
    </button>  
      
    <p id = "down" style="color: green"></p> 
    <p id = "down1" style="color: green"></p> 
    <!-- 将数组大小设置为零 -->
    <script>  
        var GFG_Array = [1, 2, 3, 4, 5]; 
        var up = document.getElementById("up"); 
        up.innerHTML = "GFG_Array："+GFG_Array; 
        var down = document.getElementById("down"); 
        down.innerHTML = "GFG_Array的长度为：" 
                + GFG_Array.length; 
        function empty() { 
            while(GFG_Array.length > 0) { 
                GFG_Array.pop(); 
            } 
            down = document.getElementById("down"); 
            down.innerHTML = "GFG_Array的长度为：" 
                    + GFG_Array.length; 
            down1 = document.getElementById("down1"); 
            down1.innerHTML = "GFG_Array："+GFG_Array; 
        } 
        
    </script>  
</body>     
</html>

大家可以点击预览，看最终效果，以上方法仅供参考，如您有任何意见都可以留言或者加群讨论。

标签：三种清空方法数据WebJS