JavaScript常见数组方法的详细用法及示例-CSDN博客

本文链接：https://blog.csdn.net/qq_63044079/article/details/140080753

1.filter():检测数值元素，并返回符合条件所有元素的数组(具体要符合什么条件的的元素的函数方法需要我们自己去写)。示例如下

</head>
<body>
    <button id="but" onclick="test(arr)">点击出结果</button>
    <div id="div">
        
    </div>
    <script type="text/javascript">
       
        // 填写JavaScript
        var arr = [5,2,4,5,3,5,6,2,1];
        //输出arr数组中大于三的个数
        function test(arr){ 
           document.getElementById('div').innerHTML = arr.filter((num)=>{return num>3}).length;
          
         }
     
    </script>
   
</body>
</html>

要注意οnclick="test(arr)"onclick事件中的函数必须要有参数，不然会报错。

2.sort():对数组的元素进行排序(排序顺序默认按字母顺序排列，也可根据实际情况自己设定，常见的情况有升序表示为a-b；降序表示为b-a)。

示例如下：

升序

 function test(arr){ 
           document.getElementById('div').innerHTML = arr.sort((a,b)=>{return a-b});
          
         }

a-b表示的是当a-b返回一个负值时a排在b的前面，返回零时位置不变，返回正值时a在b的后面。

降序

 function test(arr){ 
           document.getElementById('div').innerHTML = arr.sort((a,b)=>{return b-a});
          
         }

b-a表示当返回一个正值时b在a前面，返回零时不变，返回负值时b在a后面，要注意仔细理解区分。

3.map():通过指定函数处理数组的每个元素，并返回处理后的数组。

示例如下：

 //将数组的每一个元素都×2输出
        function test(arr){ 
           document.getElementById('div').innerHTML = arr.map((num)=>{return num*2});
          
         }

4.forEach():数组每个元素都执行一次回调函数。

<body>
    <button id="but" onclick="test(arr)">点击出结果</button>
    <div>
        <div>初始的数组：<span id="div1"></span></div>
        <div>变化后数组：<span id="div2"></span></div>
        
    </div>
    <script type="text/javascript">
       
        // 填写JavaScript
        var arr = [5,2,4,5,3,5,6,2,1];
        document.getElementById('div1').innerHTML=arr;
        //将数组的每一个元素相加输出
        function test(arr){ 
            var sun = 0;
            arr.forEach(num => {
            sun += num;
            return sun
           });
            document.getElementById('div2').innerHTML = sun;
          
         }
     
    </script>
   
</body>

5.shift():删除并返回数组的第一个元素

示例如下：

<script type="text/javascript">
       
        // 填写JavaScript
        var arr = [5,2,4,5,3,5,6,2,1];
        document.getElementById('div1').innerHTML=arr;
        //删除并返回数组的第一个元素
        function test(arr){ 
            arr.shift();
            document.getElementById('div2').innerHTML = arr;
          
         }
     
    </script>

6.unshifit():向数组的第一个元素位置添加一个元素。

示例如下：

<script type="text/javascript">
       
        // 填写JavaScript
        var arr = [5,2,4,5,3,5,6,2,1];
        document.getElementById('div1').innerHTML=arr;
        
        function test(arr){ 
            arr.unshift(7);
            document.getElementById('div2').innerHTML = arr;
          
         }
     
    </script>

7.concat():连接两个或者多个数组并返回新数组

示例如下：

<script type="text/javascript">
       
        // 填写JavaScript
        var arr = [5,2,4,5,3,5,6,2,1];
        var arrs = [0,0,0];
        document.getElementById('div1').innerHTML=arr;
        
        function test(arr,arrs){ 
            
            document.getElementById('div2').innerHTML = arr.concat(arrs);
          
         }
     
    </script>

8.pop():删除数组的最后一个元素并返回

 <script type="text/javascript">
       
        // 填写JavaScript
        var arr = [5,2,4,5,3,5,6,2,1];
        document.getElementById('div1').innerHTML=arr;
        
        function test(arr){ 
            arr.pop(9);
            document.getElementById('div2').innerHTML = arr;
          
         }
     
    </script>

9.push():向数组的最后添加一个或多个元素并返回新数组的长度

<script type="text/javascript">
       
        // 填写JavaScript
        var arr = [5,2,4,5,3,5,6,2,1];
        document.getElementById('div1').innerHTML=arr;
        
        function test(arr){ 
            arr.push(9,9);
            document.getElementById('div2').innerHTML = arr;
          
         }
     
    </script>

10.includs():判断数组是否包含某一个值

<script type="text/javascript">
       
        // 填写JavaScript
        var arr = [5,2,4,5,3,5,6,2,1];
        document.getElementById('div1').innerHTML=arr;
        
        function test(arr){ 
           
            document.getElementById('div2').innerHTML = arr.includes(1);
          
         }
     
    </script>