JavaScript的常用遍历方法整理
js当中遍历方法有许多，在这记录一下常用的几个遍历方法
width: 600px; margin: 2rem
1、普通for循环
自行指定循环次数。
const arr = ['Vue', 'React', 'Angular'];
for (let i = 0; i < arr.length; i++) {
console.log(i, arr[i]);
}
// 打印
// 0 "Vue"
// 1 "React"
// 2 "Angular"
复制2、for…in循环
用于遍历对象的属性(数组的索引值也算属性)。
const obj = {name1: 'Vue', name2: 'React', name3: 'Angular'};
for(item in obj) {
console.log(item, obj[item])
}
// 打印
// name1 Vue
// name2 React
// name3 Angular
复制但有一个缺点：如果手动向数组添加成员时，索引值会出现问题： 虽然数组的length不变，但用for…in遍历数组会遍历到那些新定义的属性。
const arr = ['Vue', 'React', 'Angular'];
for(item in arr) {
if(item === '1') {
arr.splice(item, 0, 'Java')
}
console.log(item, arr[item]);
}
console.log(arr)
// 打印
// 0 Vue
// 1 Java
// 2 React
// (4) ["Vue", "Java", "React", "Angular"]
复制3、for…of循环(ES6)
for…of循环修复了for…in存在的问题，他只遍历属于对象本身的属性值。 且这个对象必须是iterable可被迭代的。如Array, Map, Set。
const arr = ['Vue', 'React', 'Angular'];
let map = new Map();
map.set('name1', 'Vue');
map.set('name2', 'React');
map.set('name3', 'Angular');
let set = new Set();
set.add('Vue');
set.add('React');
set.add('Angular');
for(item of arr) {
console.log(item)
}
for(item of map) {
console.log(item)
}
for(item of set) {
console.log(item)
}
// 打印
// Vue
// React
// Angular
// (2) ["name1", "Vue"]
// (2) ["name2", "React"]
// (2) ["name3", "Angular"]
// Vue
// React
// Angular
复制4、forEach循环
循环数组中每一个元素并采取操作，没有返回值，可以不用知道数组长度（也是现在比较常用的遍历方法）。
const arr = ['Vue', 'React', 'Angular'];
let map = new Map();
map.set('name1', 'Vue');
map.set('name2', 'React');
map.set('name3', 'Angular');
let set = new Set();
set.add('Vue');
set.add('React');
set.add('Angular');
arr.forEach((key, value, item) => {
console.log(key, value, item)
})
map.forEach((key, value, item) => {
console.log(key, value, item)
})
set.forEach((key, value, item) => {
console.log(key, value, item)
})
// 打印
// Vue 0 (3) ["Vue", "React", "Angular"]
// React 1 (3) ["Vue", "React", "Angular"]
// Angular 2 (3) ["Vue", "React", "Angular"]
// Vue name1 Map(3) {"name1" => "Vue", "name2" => "React", "name3" => "Angular"}
// React name2 Map(3) {"name1" => "Vue", "name2" => "React", "name3" => "Angular"}
// Angular name3 Map(3) {"name1" => "Vue", "name2" => "React", "name3" => "Angular"}
// Vue Vue Set(3) {"Vue", "React", "Angular"}
// React React Set(3) {"Vue", "React", "Angular"}
// Angular Angular Set(3) {"Vue", "React", "Angular"}
复制这里需要提醒一下，forEach方法不能使用continue和break，使用return语句的作用只能跳出当前循环，并不能跳出整个循环。如果想跳出循环只能throw一个异常。例如：
const arr = ['Vue', 'React', 'Angular'];
try {
arr.forEach((item) => {
console.log(item);
if (item === 'React') {
throw new Error
}
})
} catch {
console.log('跳出循环')
}
// 打印
// Vue
// React
// 跳出循环
复制接下来是js中Array对象方法
5、map函数
通过指定函数处理数组的每个元素，并返回处理后的数组(不改变原数组)。
const arr = ['Vue', 'React', 'Angular'];
const newArr = arr.map(item => {
return 'new' + item
})
console.log(newArr)
// 打印
// (3) ["newVue", "newReact", "newAngular"]
复制6、filter函数
检测数值元素，并返回符合条件所有元素的数组。
const arr = ['Vue', 'React', 'Angular'];
const newArr = arr.filter(item => {
return item.length > 3
})
console.log(newArr)
// 打印
// (2) ["React", "Angular"]
复制还有两个判断符合条件的函数
7、some函数
检测数组元素中是否有元素符合指定条件，返回Boolean值。
const arr = ['Vue', 'React', 'Angular'];
const result = arr.some(item => {
return item.length > 3
})
console.log(result)
// 打印
// true
复制8、every函数
检测数值元素的每个元素是否都符合条件，返回Boolean值。
const arr = ['Vue', 'React', 'Angular'];
const result = arr.every(item => {
return item.length > 3
})
console.log(result)
// 打印
// false
复制本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
