持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情
数组迭代方法
官网文档：developer.mozilla.org/zh-CN/docs/…
以下所有的方法，都可以使用传统的for循环来代替，只是语法不同而已
| 数组几种遍历介绍(共同点：回调函数一样) | 应用场景 | 回调执行次数 | 函数返回值 | 回调是否需要return |
|---|---|---|---|---|
| map遍历 | 映射数组 | == 原数组长度 | 新数组(==) | 一定要return（当前元素） |
filter遍历 | 过滤数组 | == 原数组长度 | 新数组(!=) | return true(元素添加到新数组) |
| forEach遍历 | 遍历数组 | == 原数组长度 | 无 | 无 |
| some遍历 | 找出符合条件的数 | != 原数组长度 | 布尔类型 | return true；循环结束 |
| every遍历 | 判断所有元素是否符合条件 | != 原数组长度 | 布尔类型 | return true; 循环继续 |
| findIndex遍历 | 获取符合条件的第一个元素位置(下标) | != 原数组长度 | 数字 | return true; 循环结束 |
| includes方法(底层是遍历) | 判断数组/字符串是否包含某一个值 | 无回调 | 布尔类型 | 无回调 |
1.1-数组map遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
1.map应用场景：利用某种规则映射得到一个新数组
说人话：遍历每一个元素，并对每一个元素做对应的处理，返回一个新数组
例如：将数组中的每一个元素+1
例如：将数组中每一个元素 * 2
例如：100以上的商品打八折
2.注意点：
a. 回调函数执行次数 == 数组长度
* 数组中有多少个元素，回调函数就会执行几次
b. map函数返回的新数组长度 == 原数组长度
c. 回调函数中一定要return，返回的是当前遍历的元素值
* 如果不return，新数组中每一个元素都变成了undefined
*/
let arr = [23, 31, 60, 88, 90, 108, 260];
//(1)需求：数组中每一个元素+1
/**
* @description: 数组map遍历
* @param {Function}:回调函数 (元素,下标)=>{ return 新元素 }
* @return: 返回一个新数组
*/
let arr1 = arr.map((value, index) => {
return value + 1;//让每一个元素的值+1
});
console.log(arr1);
//(2)需求：数组中每一个元素*2
let arr2 = arr.map((value, index) => {
return value * 2;//让每一个元素的值 * 2
});
console.log(arr2);
//(3)需求3： 超过100的商品打八折
let arr3 = arr.map((value, index) => {
if(value > 100){
return value*0.8;
}else{
return value;
}
});
console.log(arr3);
</script>
</body>
</html>
1.2-数组filter遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
1.filter应用场景：用于筛选数组中满足条件的元素，返回筛选后的新数组
例如：找出数组中的偶数
2.注意点：
a. 回调函数执行次数 == 数组长度
* 数组中有多少个元素，回调函数就会执行几次
b. filter函数返回的新数组长度 != 原数组长度
c. 回调函数一定要return, 返回一个布尔类型值
结果为true: 当前遍历元素就会添加到新数组中
结果为false：当前遍历元素不会添加到新数组中
*/
let arr = [23, 31, 60, 88, 90, 108, 260];
//(1)需求：找出数组中的偶数
/**
* @description: 数组filter遍历
* @param {Function}:回调函数 (元素,下标)=>{}
* @return: 返回一个新数组
*/
let arr1 = arr.filter((item) => {
return item %2 == 0;
});
console.log(arr1);//[60, 88, 90, 108, 260]]
</script>
</body>
</html>
1.3-数组forEach遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
1.forEach应用场景：用于遍历数组，相当于for循环另一种写法
2.注意点：
a. 回调函数执行次数 == 数组长度
* 数组中有多少个元素，回调函数就会执行几次
b. forEach函数没有返回值
c. 回调函数不需要return
* 就算手动return，也不会结束循环
*/
let arr = [23, 31, 60, 88, 90, 108, 260];
/**
* @description: 数组forEach遍历
* @param {Function}:回调函数 (元素,下标)=>{}
* @return: 无
*/
arr.forEach((item,index) => {
console.log(`下标为${index}的元素是${item}`);
});
</script>
</body>
</html>
1.4-数组some遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
1.some应用场景：用于判断数组中是否存在满足条件的元素
2.注意点：
a. 回调函数执行次数 != 数组长度
* some函数在遍历的时候可以中途结束
b. some函数返回一个布尔类型值
c. 回调函数返回布尔类型值用于结束遍历
return true; //遍历结束，且some函数返回值为true
(默认) return false; //遍历继续，且some函数返回值为false
*/
//需求：判断数组中没有负数
let arr = [23, 31, 60, 88,-50, 90, 108, 260];
/**
* @description: 数组some遍历
* @param {Function}:回调函数 (元素,下标)=>{}
* @return: 布尔类型值
*/
let arr1 = arr.some((item,index) => {
console.log(`下标为${index}的元素是${item}`);
// if(item < 0){
// return true;//循环结束
// };
//简写成
return item<0;
});
console.log(arr1);
</script>
</body>
</html>
1.5-数组every遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
1.every应用场景：用于判断数组中是否所有元素都满足条件
* every与some功能类似，只是写法不同
2.注意点：
a. 回调函数执行次数 != 数组长度
b. every函数返回一个布尔类型值
c. 回调函数返回布尔类型值用于结束遍历
return true; //遍历继续，且every函数返回值为true
(默认)return false; //遍历结束，且every函数返回值为false
*/
//需求：判断数组中没有负数
let arr = [23, 31, 60, 88,-50, 90, 108, 260];
/**
* @description: 数组every遍历
* @param {Function}:回调函数 (元素,下标)=>{}
* @return: 布尔类型值
*/
let arr1 = arr.every((item,index) => {
console.log(`下标为${index}的元素是${item}`);
// if(item > 0){
// return true;//如果是正数，循环继续
// }
//简写成
return item>0;
});
console.log(arr1);
</script>
</body>
</html>
1.6-数组findindex方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
1.数组findIndex方法
1.1 作用 : 获取符合条件的第一个元素位置(下标)
1.2 语法 ： arr.findIndex( (item,index)=>{ return true/false } )
返回值： 符合则返回元素下标，不符合则返回-1
1.3 应用场景 ： 适用于数组中元素为对象类型，比传统for循环要高效
*/
let arr1 = [
{ name: '张三', age: 20 },
{ name: '李四', age: 30 },
{ name: '王五', age: 25 },
{ name: '赵六', age: 33 },
{ name: '小七', age: 10 },
];
//1.数组findIndex方法 : 获取符合条件的第一个元素位置(下标)
//示例：查找arr1中第一个未成年在什么位置
let res1 = arr1.findIndex((item,index)=>{
/* 回调函数
return true : 循环中断，findIndex方法返回值为当前index值
return false： 循环继续，如果数组全部遍历完还是没有返回true，则finedIndex方法最终返回-1
*/
// if(item.age<18){
// return true;
// }else{
// return false;
// };
return item.age < 18;
});
console.log(res1);
</script>
</body>
</html>
1.7-数组reduce方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
1.数组reduce方法
1.1 作用 : 遍历数组元素，为每一个元素执行一次回调函数
1.2 语法 ： arr.reduce( (sum,value)=>{ return sum + value } )
返回值： 最终sum值
1.3 应用场景 ： 数组求和/平均值/最大值/最小值
1.4 注意点：最好给一个初始值，避免空数组报错
*/
let arr1 = [20, 55, 80, 70, 92, 35];
//sum : 初始值，默认为数组第一个元素
//value : 数组得每一个元素，默认为数组第二个元素
//res1 :
let res1 = arr1.reduce((sum, value) => {
//这里必须要return，相当于把本次计算得结果赋值给下一次得sum : sum = sum + value;
return sum + value;
},0);
console.log(res1);
//下面这种写法与上面等价，ES6箭头函数如果只有一行代码则可以省略大括号，且省略return
console.log(arr1.reduce((sum, value) => sum + value),0);
//求最大值
let res2 = arr1.reduce((sum, value) => Math.max(sum, value),0);
console.log( res2 );
</script>
</body>
</html>
1.8-for-in与for-of区别
- MDN官网传送门：for-of迭代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/* for-in与for-of区别
1.功能不同
for-in是遍历数组的下标
for-of是遍历数组的元素
2.原型的属性
for-in会遍历原型的属性
for-of不会遍历原型的属性
3.数据类型
for-in可以遍历Object类型
for-of不可以遍历Object类型
* 解决方案： Object.keys(对象名)
总结：如果只想要属性值/元素，使用for-of效率更高
*/
//数组
let arr = ['a','b','c']//下标0 1 2
//对象
let obj = {name:'ikun',age:30}
//给原型添加成员
Array.prototype.age = 30
for(let key in obj){
console.log(key)
}
for (let item of Object.keys(obj) ) {
console.log(item)
}
</script>
</body>
</html>
