文章目录

• for
• 优化for (效率最高)
• forEach(增强for循环)
• for...in... (效率最低)
• for...of...(ES6)
• map(ES6)
• filter(ES6)
• some(ES6)
• erevy (ES6)
• find(ES6)
• findIndex（ES6）

for

var arr = [1,2,3,4,5]
for(var i = 1;i < arr.length;i++){console.log(arr[i])
}

优化for (效率最高)

使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果比较明显

var arr = [1,2,3,4,5]
for(i = 0,len = arr.length;i < len;i++){console.log(arr[i])
}

forEach(增强for循环)

• forEach循环的次数由数组元素的个数控制，元素是几个就会遍历几次
• 第一个参数表示数组元素，第二个参数表示元素的索引，第三个参数表示数组本身。
• forEach循环中不支持修改索引，回调中使用return不会报错,但是return无效
• forEach不能使用break跳出循环，但是可以结合try…catch实现跳出循环

//1、基本遍历
var arr = [1,2,3,4,5]
arr.forEach((item,index,arr)=>{console.log(item)console.log(arr)
})
//2、使用第三个参数来实现数组去重
let arr = [1,2,3,2,2,4,5,6]
let arr2 = []
arr.forEach((item,index,arr)=>{//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置arr.indexOf(item) === index ? arr2.push(item) : null;
});
console.log(arr2);
//3、循环数组元素是基本数据类型，不会改变原数组的数据
var arr = [1,2,3,4,5]
arr.forEach((item) => {item = 10
})
console.log(arr)
//[1,2,3,4,5]
//4、循环数组元素是对象，会改变原数组对象属性的值
var arr = [{a:1,b:1},{c:2,d:2}
]
arr.forEach((item) => {item.a = 100
})
//如果数组中的对象没有该属性就会自动添加上属性
console.log(arr) //[{a: 100, b: 1},{c: 2, d: 2, a: 100}]
//如果对象的属性还是一个对象，这个时候要注意只有数组中所有元素（对象）都有这个属性才可以更改属性对象的属性
var arr = [{c:3,d:{name:"wy"}},{a:1,b:2}
]
arr.forEach((item) => {item.d.name = "ddd"
})
console.log(arr) //Uncaught TypeError: Cannot set properties of undefined (setting 'name') 出错
//可以修改的格式
var arr = [{c:2,d:{name:'hhh'}},{c:3,d:{}}
]
arr.forEach((item) => {item.d.name = "wy"
})
console.log(arr) // [{c:2,d:{name:'wy'}},{c:3,d:{name:'wy'}}]
//5、循环数组元素依旧是数组，可以对数组中的元素进行改变
var arr = [[1,2],[3,4]];
arr.forEach((item)=>{item[0] = 100;
})
console.log(arr);//[[100, 2],[100,4]]
//6、使用try...catch...跳出循环
try{let arr = [1,2,3,5,6,7];arr.forEach((item)=>{//跳出条件if(item === 3){throw new Error("LoopTerminates")}console.log(item);	})
}catch(e){if(e.message !== "LoopTerminates") throw e;
}

for…in… (效率最低)

for…in…循环效率最低，输出的key是数组索引，如果遍历的是对象，输出的则是对象的属性名

var arr = ['开','开','心','心'];
for(let key in arr){console.log(key)
}
//0 1 2 3var objArr = {a:11,b:22,c:33
}
for(let key in objArr){console.log(key)
}
//a b c

for…of…(ES6)

for of 遍历的是value ,for of 不能循环对象，
虽然性能要好于 for…in…，但仍然比不上普通的 for 循环

var arr = ['开','开','心','心'];
for(let value of arr){console.log(value)
}

map(ES6)

• 遍历每一个元素并且返回对应的元素（可以返回处理后的元素）
• 返回创建的新数组和原来旧数组的长度是一样的，使用比较广泛，但性能还不如 forEach
• 不能使用break和continue跳出整个循环或当前循环的，会报错，但是结合try…catch可以实现跳出循环

//1、
var arr = [1, 2, 3, 4, 5, 6]
var newArr = arr.map(function (item, idnex) {return item * item
})
console.log(arr)      // [1, 2, 3, 4, 5, 6]
console.log(newArr)   // [1, 4, 9, 16, 25, 36]
//2、会改变原数组中对象的属性值
var arr = [{a: 1, b: 2},{a: 3, b: 4}]
let newArr = arr.map((item)=>{item.b = 100return item
})
console.log('arr',arr) // [{a: 1, b: 100},{a: 11, b: 100}]
console.log('newArr ',newArr ) // [{a: 1, b: 100},{a: 3, b: 100}]
//3、使用try...catch
try {var arr = [1, 2, 3, 4];arr.map((item) => {//跳出条件if (item === 3) {throw new Error("LoopTerminates");}console.log(item);return item});
} catch (e) {if (e.message !== "LoopTerminates") throw e;
};

filter(ES6)

遍历数组，过滤出符合条件的元素并返回一个新数组，没有符合条件的元素则返回空数组

var arr = [{id:1,sex:false,user:'A'},{id:2,sex:true,user:'B'},{id:3,sex:true,user:'C'},
]
var newArr = arr.filter((item,index) => {return item.sex;
})
console.log(newArr)
//[{id: 2, sex: true, user: 'B'},{id: 3, sex: true, user: 'C'}]

some(ES6)

遍历数组，只要有一个元素满足条件 就返回 true，否则返回 false

var arr = [{id:1,sex:false,user:'A'},{id:2,sex:true,user:'B'},{id:3,sex:true,user:'C'},
]
var flag = arr.some((item)=>{return item.sex;
})
console.log(flag) //true

erevy (ES6)

遍历数组，每一个元素都满足条件 则返回 true，否则返回 false

var arr = [{id:1,sex:false,user:'A'},{id:2,sex:true,user:'B'},{id:3,sex:true,user:'C'},
]
var flag = arr.every((item)=>{return item.sex;
})
console.log(flag) //false

find(ES6)

遍历数组，返回符合条件的第一个元素，如果没有符合条件的元素则返回undefined

var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]var num = arr.find(function (item, index) {return item === 3
})
console.log(num)   //  3

findIndex（ES6）

遍历数组，返回符合条件的第一个元素的索引，如果没有符合条件的元素则返回 -1

var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]var num = arr.findIndex(function (item) {return item === 3
})
console.log(num)   //  4

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！