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>