js 常用遍历用法小结
直接开门见山吧，目前js中常用遍历有如下几种方法：
for、forEach、map、filter、find、findIndex、some、every、reduce
此文只对这些方法做用法的简要总结以加深理解记忆不深入分析。此博文也参考借鉴了几篇关于常用遍历方法的文章，在此表示感谢！
1、for
- for 循环是最基础的遍历方式，可以用来遍历数组和对象，可以使用 break 和 continue 终止或跳过循环
let arr = [1,2,3,4]
for(let i=0;i- 使用 break 和 continue 终止或跳过循环
for(let i=0;i1.1 for…of
- for…of 循环是在ES6中引入的，可以遍历可迭代对象（数组、集合、映射、字符串等）。其语法为：
for (element of iterable) {
// body of for...of
}
- for…of 循环不能用于遍历对象
1.1.1 使用 for…of 遍历数组
let arr = [1,2,3,4]
for (let item of arr){
console.log(item)
}
代码运行输出结果为 1,2,3,41.1.2 使用 for…of 遍历字符串
let str = '1234'
for (let item of str){
console.log(item)
}
代码运行输出结果为 1,2,3,4- for…of 中也可以用 break 和 continue 来终止或跳过循环
let arr = [1,2,3,4]
for (let item of arr){
if (item==3){
break
}
console.log(item)
}
代码运行输出结果为 1,2
let arr = [1,2,3,4]
for (let item of arr){
if (item==3){
continue
}
console.log(item)
}
代码运行输出结果为 1,2,41.2 for…in
- for-in ES5中是一种特殊的for循环，专门用来循环对象
- for in 也可以遍历数组，但不推荐
- for in 中也可以用 break和 continue
let obj = {name:'张三',age:30,gender:'男'}
for (let key in obj){
console.log('key:'+key+',value:'+obj[key])
}
代码运行输出结果为：
key:name,value:张三
key:age,value:30
key:gender,value:男- 拓展：使用 Object.keys() 来获取对象本身的可枚举属性，其返回值为数组，然后在通过遍历该属性数组获取属性对应的值
let obj = {name:'张三',age:30,gender:'男'}
let keyArr = Object.keys(obj)
keyArr.forEach(key =>{
console.log('key:'+key+',value:'+obj[key])
})
代码运行输出结果为:
key:name,value:张三
key:age,value:30
key:gender,value:男由此引出 forEach 遍历方法
2、forEach
forEach是ES6中引入的新特性，主要功能是遍历数组。
- forEach方法中的function回调支持3个参数，第1个是遍历的数组内容；第2个是对应的数组索引，第3个是数组本身。forEach不会遍历空位置的内容。如：[1, , 3]，只会遍历1和3。
let arr = [1,2,3,4];
let sum = 0;
arr.forEach(function(val,index,array){
array[index] == val; //结果为true
sum+=val;
});
console.log(sum);
代码运行输出结果为: 10用箭头ES6新增的箭头函数可写成为：
let arr = [1,2,3,4];
let sum = 0;
arr.forEach((val,index,array)=>{
array[index] == val;
sum+=val;
});
console.log(sum); // 10
// 回调方法参数可根据实际业务调整
let sum = 0;
arr.forEach((val)=>{
sum+=val;
});
console.log(sum); // 10
// 单个参数时括号可省略
let sum = 0;
arr.forEach(val=>{
sum+=val;
});
console.log(sum); // 10- forEach 中不可以用 break 和 continue 终止或跳过循环。可以用 return 跳过循环，终止循环只能抛出异常，用try-catch块捕获。
let arr = [1,2,3,4];
let sum = 0;
arr.forEach(val=>{
if (val==3){
return // 使用 return 跳过循环
}
sum+=val;
});
console.log(sum); //结果为 7
let sum = 0;
try{
arr.forEach(val=>{
if (val==3){
throw new Error('Error') // 抛出异常终止循环
}
sum+=val;
});
}catch(e){
}
console.log(sum); //结果为 3- 关于数组用forEach遍历能否改变本身？
- 当基本类型数组用单个参数遍历并改变其值时，并不会改变数组本身
- 当引用数组用单个参数遍历并改变其属性值时，会改变数组本身
- 当基本类型数组用多个参数遍历并改变其值时，也会改变数组本身
// 当基本类型数组用单个参数遍历并改变其值时，并不会改变数组本身
let arr = [1,2,3,4];
arr.forEach((val)=>{
val+=1;
});
console.log(JSON.stringify(arr)) // [1,2,3,4]
// 当引用数组用单个参数遍历并改变其属性值时，会改变数组本身
let arrObj = [{name:'张三',age:30},{name:'李四',age:32}];
arrObj.forEach((item)=>{
item.age+=1;
});
console.log(JSON.stringify(arrObj)) // [{"name":"张三","age":31},{"name":"李四","age":33}]
// 当基本类型数组用多个参数遍历并改变其值时，也会改变数组本身
let arr = [1,2,3,4]
arr.forEach((val,index,array)=>{
array[index] = val+1; // 此处 array 改成 arr 结果也是一样
});
console.log(JSON.stringify(arr)) // [2,3,4,5]3、map
map是ES6中引入的新特性，map即是 “映射”的意思 用法与 forEach 相似。map()和forEach()的区别在于：forEach()会修改原来的数组但没有返回值，而map()方法不会修改原数组，而是得到一个新的数组并返回。
let arr = [1,2,3,4]
let newArr = arr.map((val)=>{
return val*2
});
console.log(JSON.stringify(arr)) // [1,2,3,4]
console.log(JSON.stringify(newArr)) // [2,4,6,8]
// 使用箭头函数写法可更简便
let arr = [1,2,3,4]
let newArr = arr.map(val=>val*2)
console.log(JSON.stringify(arr)) // [1,2,3,4]
console.log(JSON.stringify(newArr)) // [2,4,6,8]-
map 遍历函数本身不能跳过本次循环或终止循环，除非用try-catch 抛出捕获异常。(下面的遍历方法同理)
const arr = [1,2,3,4]
const newArr = arr.map((val)=>{
if (val==3) return // 这里加不加 return 语句都一样的是返回 null
else return val*2
})
console.log(JSON.stringify(newArr)) // [2,4,null,8]4、filter
filter是ES6中引入的新特性，用于用于筛选过滤符合条件的元素，得到符合条件的新数组。
- filter不会改变原数组
- filter不会对空数组进行检测
let arr = [1,2,3,4,5]
let newArr = arr.filter(val=>val>2)
console.log(JSON.stringify(arr)) // [1,2,3,4,5]
console.log(JSON.stringify(newArr)) // [3,4,5]
// 空数组
let arr = []
let newArr = arr.filter(val=>val>2)
console.log(JSON.stringify(arr))
console.log(JSON.stringify(newArr))5、find
find是ES6中引入的新特性，用于查找数组中符合条件的第一个元素，如果没有符合条件的元素，则返回undefined。
- find不会改变原数组
- find只查找到第一个符合的就停止了，返回的是一个对象；而filter会查找全部符合条件的结果，返回的是一个数组
let arr = [1,2,3,4,5,3,4]
let num = arr.find(val=>val>2)
let num2 = arr.find(val=>val>5)
console.log(JSON.stringify(arr)) // [1,2,3,4,5,3,4]
console.log(num) // 3
console.log(num2==undefined) // true6、findIndex
findIndex是ES6中引入的新特性，用来查找数组中满足条件的第一项元素的下标。如果没有符合条件的元素，则返回-1。
- findIndex不会改变原数组
let arr = [1,2,3,4,5,3,4]
let num = arr.findIndex(val=>val>2)
let num2 = arr.findIndex(val=>val>5)
console.log(JSON.stringify(arr)) // [1,2,3,4,5,3,4]
console.log(num) // 2
console.log(num2) // -17、some
some 是ES6中引入的新特性，用于检测数组中的元素是否满足指定条件
- some 方法会依次执行数组的每个元素，如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
- some 不会对空数组进行检测，不会改变原始数组。
let arr = [1,2,3,4]
let count=0
let ret = arr.some((val)=>{
count+=1
return val==2
})
console.log(count) // 2
console.log(ret) // true8、every
every 是ES6中引入的新特性，用于检测数组所有元素是否都符合指定条件
- every 会依次执行数组的每个元素，如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。如果所有元素都满足条件，则返回 true。
- every 不会对空数组进行检测，不会改变原始数组。
let arr = [1,2,3,4]
let count=0
let ret = arr.every((val)=>{
count+=1
return val==2
})
console.log(count) // 1
console.log(ret) // false
let arr = [2,3,4,5]
let count=0
let ret = arr.every((val)=>{
count+=1
return val>1
})
console.log(count) // 4
console.log(ret) // true9、reduce
数组归并方法 reduce() 是ES6中引入的新特性，它接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。arr.reduce(callback,[initialValue])
callbackFn 包含四个参数：
- previousValue：必需，上一次调用 callbackFn 时的返回值。在第一次调用时，若指定了初始值 initialValue，其值则为 initialValue，否则为数组索引为 0 的元素 array[0]。
- currentValue：必需，数组中正在处理的元素。在第一次调用时，若指定了初始值 initialValue，其值则为数组索引为 0 的元素 array[0]，否则为 array[1]。
- currentIndex：可选，数组中正在处理的元素的索引。若指定了初始值 initialValue，则起始索引号为 0，否则从索引 1 起始。
- array：可选，用于遍历的数组。
initialValue 可选：作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue，则 currentValue 则将使用数组第一个元素；否则 previousValue 将使用数组第一个元素，而 currentValue 将使用数组第二个元素。
let arr = [1,2,3,4];
let val = arr.reduce(function (prev, curr,index) {
console.log(prev,curr,index)
return curr
})
console.log(val)
// 未指定初始值 代码运行输出结果为：
1 2 1
2 3 2
3 4 3
4未指定初始值时回调函数会被调用三次，每次调用的参数和返回值如下表：
| prev | curr | index | 返回值 | |
| 第一次调用 | 1 | 2 | 1 | 2 |
| 第二次调用 | 2 | 3 | 2 | 3 |
| 第三次调用 | 3 | 4 | 3 | 4 |
let arr = [1,2,3,4];
let val = arr.reduce(function (prev, curr,index) {
console.log(prev,curr,index)
return curr
},0)
console.log(val)
// 指定了初始值 0 代码运行输出结果为：
0 1 0
1 2 1
2 3 2
3 4 3
4指定了初始值时回调函数会被调用四次，每次调用的参数和返回值如下表：
| prev | curr | index | 返回值 | |
| 第一次调用 | 0 | 1 | 0 | 1 |
| 第二次调用 | 1 | 2 | 1 | 2 |
| 第三次调用 | 2 | 3 | 2 | 3 |
| 第四次调用 | 3 | 4 | 3 | 4 |
9.1 reduce 简单用法：求和，求阶乘等
let arr = [1,2,3,4];
let sum = arr.reduce((prev, curr)=> (prev+curr))
console.log(sum) // 10
let product = arr.reduce((prev, curr)=> (prev*curr))
console.log(sum) // 24
9.2 计算字符串相同字符出现的次数
const str = 'hello reduce'
const arr = Array.from(str)
let objCount = arr.reduce((prev, curr)=> {
if (curr in prev){
prev[curr] ++
}else{
prev[curr] = 1
}
return prev
},{})
console.log(JSON.stringify(objCount))
// {"h":1,"e":3,"l":2,"o":1," ":1,"r":1,"d":1,"u":1,"c":1}9.3 去重
const str = '12342345'
const arr = Array.from(str)
let newArr = arr.reduce((prev, curr)=> {
return prev.includes(curr) ? prev : prev.concat(curr)
},[])
console.log(JSON.stringify(newArr)) // ["1","2","3","4","5"]
// 去重 还可以用 Set数据结构和Array.from()，并且效率还高
const str = '12342345'
const arr = Array.from(new Set(str))
console.log(JSON.stringify(arr)) // ["1","2","3","4","5"]9.4 将二维数组转化为一维数组
const arr = [[1,2],[2,3],[4,5]]
const newArr = arr.reduce((prev,curr)=>(prev.concat(curr)),[])
console.log(JSON.stringify(newArr)) // [1,2,2,3,4,5]9.5 对象数组中的属性求和
const arr = [{subject:'Chinese',socre:98},{subject:'Math',socre:100},{subject:'English',socre:95}]
const sum = arr.reduce((prev,curr)=>(prev+curr.socre),0)
console.log(JSON.stringify(sum)) // 293