javascript循环

——这篇文章主要介绍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