JavaScript常见数组方法的详细用法及示例

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

</head>
<body><button id="but" onclick="test(arr)">点击出结果</button><div id="div"></div><script type="text/javascript">// 填写JavaScriptvar 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">// 填写JavaScriptvar 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">// 填写JavaScriptvar 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">// 填写JavaScriptvar 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">// 填写JavaScriptvar 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">// 填写JavaScriptvar 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">// 填写JavaScriptvar 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">// 填写JavaScriptvar 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>