map数组遍历器
这里的map不是地图的意思，而是“映射”。
map的使用方法和forEach类似。但是map有返回值。在工作中如果需要根据条件重组数组，用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>
<script>
// 1.map应用场景：利用某种规则映射得到一个新数组
// 说人话：遍历每一个元素，并对每一个元素做响应的处理，返回一个新数组
// 例如：将数组中的每一个元素+1
// 例如：将数组中的每一个元素*2
// 2.注意点：
// a.回调函数执行次数 == 数组长度（数组中有几个元素，回调函数就会执行几次）
// b.map函数返回的新数组长度 == 原数组长度
// c.回调函数中一定要return，返回的是当前遍历的元素值
// (如果不return,新数组中的每一个元素都变成了undefined)
// 3.语法：(元素,下标) => {return 新元素}
let arr = [12,19,77,0,1,-9]
// (1)需求：数组中每一个元素+1
let arr1= arr.map((value,index) => {
return value +1; //让每一个元素的值+1
})
console.log(arr1);//6) [13, 20, 78, 1, 2, -8]
// (2)需求：数组中每一个元素*2
let arr2= arr.map( (value,index) => {
return value *2; //让每一个元素的值*2
})
console.log(arr2); //(6) [24, 38, 154, 0, 2, -18]
</script>
</body>
</html>
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>
// 1.filter应用场景：用于筛选数组中满足条件的元素，返回筛选后的新数组
// 例：找出数组中的偶数;求数组中大于50的所有元素
// 2.语法：
// a.数组.filter(function(value,index,arr){
// return 筛选条件
// })
// 3.注意点：
// a.回调函数执行次数 == 数组长度
// b.filter函数返回的新数组长度 ！= 原数组长度
let arr = [1,0,66,88,99,-101,255]
// (1)需求：求数组中大于50的所有元素
// 之前的方法
// let result = []
// for (let i = 0; i < arr.length; i++){
// if (arr[i] > 10){
// result.push(arr[i])
// }
// }
// console.log(result);
let nArr = arr.filter(function(value){
//筛选条件
return value > 50
})
// nArr里保存的是所有满足条件的元素
console.log(nArr); //(4) [66, 88, 99, 255]
// (2)作业：找出数组中的偶数
let neArr = arr.filter(function(x){
return x % 2 == 0
})
console.log(neArr); //(3) [0, 66, 88]
</script>
</body>
</html>
forEach数组遍历器
除了for循环可以遍历数组外，JS中还有一个方法也可以遍历数组：forEach()
但此方法只支持IE8以上的浏览器。forEach()方法需要一个函数作为参数。
像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>
<script>
// 1.forEach应用场景：用于遍历数组，相当于for循环另一种写法
// 2.语法：数组.forEach(function( value,index,arr){ // 算法 })
// 3.forEach必须提供一个参数
// a.value:每次遍历到的数组元素
// b.index:每次遍历到的数组的下标
// c.arr:数组
// d.forEach
let arr = [25,33,66,88,99,101,255];
// (1)需求：对数组进行累加
// 原来的写法：
// let sum = 0;
// for (let i = 0; i < arr.length; i++){
// sum += arr [i]
// }
// console.log(sum);
//现在的写法
let sum = 0;
arr.forEach(function (value) {
sum += value
})
console.log(sum);//667
// 4.注意点：
// a.回调函数执行次数 == 数组长度(数组中有多少元素，回调函数就会执行几次)
// b.forEach函数没有返回值
// c.回调函数不需要return(就算手动return,也不会结束循环)
// 5.filter方法和forEach方法的参数完全相同
// filter主要是根据条件进行筛选，满足条件的值会被return返回,需要一个变量接收
arr.forEach((item,index) =>{
console.log(`下标为${index}的元素是${item}`);
})
// 下标为0的元素是25
// 下标为1的元素是33
// 下标为2的元素是66
// 下标为3的元素是88
// 下标为4的元素是99
// 下标为5的元素是101
// 下标为6的元素是255
</script>
</body>
</html>
some判断数组中是否有元素符合给定条件
some( )方法用于监测数组中的元素是否满足指定条件，方法会依次执行数组的每一个元素，如果有一个元素满足条件，表达式返回true，剩余的元素不会再执行监测，如果没有满足条件的元素，则返回false。
实例：
<!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.some应用场景:用于判断数组中是否存在满足条件的元素
// 2.注意点：
// a.回调函数执行次数 ！= 数组长度
// b.some函数返回一个布尔类型值
// c.回调函数返回布尔类型值用于结束遍历
// return true; 遍历结束，且some函数返回值为true
// return false; 遍历继续，且some函数返回值为true
// (1)需求：判断数组中有没有>100的数
let arr = [0,5,255,108,-100,88]
let arr1 = arr.some((item) =>{
return item > 100
})
console.log(arr1);//true
</script>
</body>
</html>
every判断是否所有元素符合过滤条件
every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
every() 方法使用指定函数检测数组中的所有元素：
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。
注意⚠️：every() 不会对空数组进行检测。
注意⚠️： every() 不会改变原始数组。
实例：
<!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.every应用场景：用于判断数组中是否所有元素都满足条件
// 2.注意点：
// a.every函数返回一个布尔类型值
// 需求：判断数组中没有负数
let arr = [0,5,255,108,-100,88]
let arr1 = arr.every((item) =>{
return item > 0;
})
console.log(arr1);//false
</script>
</body>
</html>
findIndex返回第一个匹配的元素位置
findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
findIndex() 方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1
注意⚠️： findIndex() 对于空数组，函数是不会执行的。
注意⚠️：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:10},
{ name:'尔尔',age:20},
{ name:'叁叁',age:30},
{ name:'丝丝',age:40},
{ name:'呜呜',age:50},
]
// 数组findIndex方法：获取符合条件的第一个元素位置(下标)
// 需求：查找arr1中第一个大于30岁在什么位置
let res = arr.findIndex((item,index) =>{
return item.age > 30;
})
console.log(res);//3
</script>
</body>
</html>
reduce数组操作
reduce方法接受一个函数作为累加器（“连续操作器”）。
数组中的每个值（从左到右）开始合并（不一定是相加）最终为一个值。
reduce为数组中的每一个元素[依次执行]回调函数，但是不包括数组中被删除或从未被赋值的元素。
reduce方法最终返回的是最后一次调用累加器的结果。
累加器函数接受四个参数：preValue，nowValue，nowIndex，arr。
实例：
<!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.数组reduce方法：
// a.作用：遍历数组元素,为每个数组执行一次回调函数
// b.语法：arr.reduce( (sum,value) =>{ return sum + value})
// 返回值：最终sum值
// c.应用场景：数组求和/平均数/最大值/最小值
// d.注意点：最好给一个初始值,避免空数组报错
let arr1 = [15,33,66,88,108];
// sum:初始值,默认为数组第一个元素
// value: 数组的每一个元素,默认为数组第二个元素
let res1 = arr1.reduce((sum,value) => {
// 这里必须要return,相当于把本次计算的结果赋值给下一次的sum: sum = sum + value
return sum + value;
},0)
console.log(res1); //310
// 下面这种写法与上面等价,ES6箭头函数如果只有一行代码则可以省略函数大括号,且省略return
console.log(arr1.reduce((sum,value) => sum + value)); //310
</script>
</body>
</html>
注意⚠️：
1.如果initialValue在调用时被提供，那么第一次的preValue就等于initialvalue,nowValue等于数组中的第一个值
2.如果initialValue未被提供，那么preValue等于数组中的第一个值，nowValue自动等于数组中的第二个值
扫一扫
1323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
