1.filter用给定条件过滤
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr =[-2,-1,0,1,2]
//数组>0
// let result = [];
// for (let i =0 ; i<arr.length ;i++){
// if(arr[i] > 0)
// result.push(arr[i])
// }
// console.log(result);
let nArr =arr.filter(function(value){
//筛选条件
return value >0
})
//nArr里保存的是所以满足条件的元素
console.log(nArr);
// 筛选出偶数
let arr1=arr.filter(function(value){
return value%2==0
})
console.log(arr1);
</script>
</body>
</html>
效果图:
2.findindex
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1.数组findIndex万法:
// a.作用:获取符合条件的第一个元素位置(下标)。
// b.语法: arr.findIndex((item,index) =>{return true/false})
//返回值:符合则返回元素下标,不符合则返回-1。
//c.应用场景:适合于数组中元素为对象·类型,比传统for循环要高效。
let arr = [
{name:'护牙菜',age:19},
{name:'小老鼠',age:20},
{name:'罗毅',age:15},
]
//数组findIndex方法:获取符合条件的第一个元素位置(下标)
//需求:查找arr1中第一个未成年在什么位置
let res =arr.findIndex((item,index) =>{
return item.age <18;
})
console.log(res);//2
</script>
</body>
</html>
效果图:
3.forEach遍历器
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 1.forEach应用场景:用于遍历数组,相当于for循环另一种写法。
2.语法:数组.forEach( function(value,index, arr){//算法})
3.forEach必须提供一个参数
a.value:每次遍历到的数组元素
b.index:每次遍历到的数组的下标
c.arr:数组 -->
<script>
let arr=[12,21,34,42,35,666]
// // 累加
// let sum =0;
// for(let i = 0; i < arr.length;i++){
// sun += arr[i]
// }
// console.log(sum);
// 现在写法
let sum =0
arr.forEach(function(value){
sum += value
})
console.log(sum);
</script>
</body>
</html>
效果图:
4.map数组遍历器
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 1.map应用场景:利用某种规则映射得到一个新数组
说人话:遍历每一个元素,并对每一个元素做响应的处理,返回一个新数组
例如:将数组中的每一个元素+1 -->
<!-- 2.注意点:
a.回调函数执行次数==数组长度(数组中有几个元素,回调函数就会执行几次)
b.map函数返回的新数组长度==原数组长度
c.回调函数中一定要return,返回的是当前遍历的元素值
(如果不return,新数组中的每一个元素都变成了undefined) -->
<!-- 3.语法:(元素,下标)=> {return新元素} -->
<script>
let arr = [1,2,3,4,5]
// 每个数组加一
let arr1 = arr.map((value) => {
return value + 1
})
console.log(arr1);
// 每个数组乘二
let arr2 = arr.map((value)=>{
return value *2
})
console.log(arr2);
</script>
</body>
</html>
效果图: