——这篇文章主要介绍javascript中几大循环的区别
最原始的js循环
es5出现以前，我们要遍历一个数组时，是这样写的
let arr = [{a: 1}, {a: 2}, {a: 5}]
for (let i = 0; i < arr.length; i++) {
console.log(arr[index])
}
es5的循环
自从es5诞生以后，多了两个循环，forEach和for in，接下来分别介绍这两个循环
1. forEach
let arr = [{a: 1}, {a: 2}, {a: 5}]
arr.forEach((item, index, arr) => {
console.log(item, index, arr)
if (item.a === 2) {
console.log(‘中断’)
return
}
console.log(‘测试中断’)
})
forEach的写法比原始的for循环简单了很多，我们也不需要定义一个变量去做循环。使用forEach不能用 break和continue中断循环，使用return也只能终止本次循环，不能中断整个循环语句。
2. for in
用for in 来遍历对象
var obj = {a: 1, b: 5, c: 7}
for (let key in obj) {
console.log(`obj.${key} = ${obj[key]}`)
}
for in除了可以遍历对象，也可以用来遍历数组
let arr = [{a: 1}, {a: 2}, {a: 5}]
for (let i in arr) {
console.log(arr[i])
}
for in 写法比原始的for循环简单了写，也弥补了forEach的缺陷。但是for in 一般是用来遍历对象，不推荐用来遍历数组。
for in 遍历数组弊端
- for (let index in arr) 中index的类型不是number，而是string
let arr = [{a: 1}, {a: 2}, {a: 5}]
for (let index in arr) {
console.log(index + 1)
}
// 01
// 11
// 21
- 不仅数组本身的元素将被遍历到，自定义的属性也会被遍历到，甚至数组原型链上的属性也会被遍历到
var arr=new Array(1,2,3);
arr.name="hello";
Array.prototype.method=function(){
console.log("world");
}
for (var index in arr) {
console.log(index);
}
// 0
// 1
// 2
// name
// method
es6的循环
for of
es6中引入了一种新的循环方法，它就是for-of循环，它既比传统的for循环简洁，又弥补了forEach和for-in循环的弊端。
let arr = [{a: 1}, {a: 2}, {a: 5}]
for (let itemof arr) {
console.log(item)
}
写法上 for of 和 for in 很相似，但是for of 的功能更加丰富
1. 循环数组
let arr= [10, 40, 70];
for (let value of arr) {
console.log(value);
}
// 10
// 40
// 70
2. 循环字符串
let str= "this";
for (let value of str) {
console.log(value);
}
// t
// h
// i
// s
3. 循环一个map
let map= new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let [key, value] of map) {
console.log(key, value);
}
// a 1
// b 2
// c 3
for (let item of map) {
console.log(item);
}
// [a, 1]
// [b, 2]
// [c, 3]
4. 遍历一个对象
for of 不能像for in那样直接遍历一个对象，我们可以用Object.keys()方法去解决这个问题
let obj = {a: 12, b: 56, c: 89}
for (let key of Object.keys(obj)) {
console.log(`${key} = ${obj[key]}`)
}
// a = 12
// b = 56
// c = 89
5.遍历一个 Set
let set= new Set([1, 1, 2, 2, 3, 3]);
for (let value of set) {
console.log(value);
}
// 1
// 2
// 3
