JS 当中的循环

数组循环

第一种: for ... of ...

 for (let val of arr) {
      if (val === 'b') break;
      console.log(val);
    }

 for (let pair of arr.entries()) {
      console.log(pair);
    }

 for (let [index, val] of arr.entries()) {
      console.log(index,val);
    }

有些数据结构是在现有数据结构的基础上，计算生成的。比如，ES6 的数组、Set、Map 都部署了以下三个方法，调用后都返回遍历器对象。

entries() 返回一个遍历器对象，用来遍历[键名, 键值]组成的数组。对于数组，键名就是索引值；对于 Set，键名与键值相同。Map 结构的 Iterator 接口，默认就是调用entries方法。 keys() 返回一个遍历器对象，用来遍历所有的键名。 values() 返回一个遍历器对象，用来遍历所有的键值。

 let arr = ['a', 'b', 'c'];

    for (let pair of arr.entries()) {
      console.log(pair);
    }

    for (let pair of arr.keys()) {
      console.log(pair);
    }

    for (let pair of arr.values()) {
      console.log(pair);
    }

特殊情况: 并不是所有类似数组的对象都具有 Iterator接口,一个简便的解决方法，就是使用Array.from方法将其转为数组。

let arrayLike = { length: 2, 0: 'a', 1: 'b' };

// 报错 TypeError: arrayLike[Symbol.iterator] is not a function
for (let x of arrayLike) {
  console.log(x);
}

// 正确
for (let x of Array.from(arrayLike)) {
  console.log(x);
}

正常的伪数组循环

let str = "hello";

for (let s of str) {
  console.log(s); // h e l l o
}
对于字符串来说，for...of循环还有一个特点，就是会正确识别 32 位 UTF-16 字符。

// DOM NodeList对象
let paras = document.querySelectorAll("p");

for (let p of paras) {
  p.classList.add("test");
}

// arguments对象
function printArgs() {
  for (let x of arguments) {
    console.log(x);
  }
}
printArgs('a', 'b');

第二种: forEach(无法中途跳出forEach循环，无法使用 break命令或return命令)

  arr.forEach(function (value, index, arrObj) {
      console.log(value, index, arrObj);
    });

第三种: for 循环

 for (var index = 0; index < arr.length; index++) {
  console.log(arr[index]);
}

对象循环

第一种: for ... in ... 循环

let obj = {
      name: 'chen',
      sex: 'male',
      age: 28,
      address: 'chengdou'
    }
    for (var key of Object.keys(obj)) {
      console.log(key + ': ' + obj[key]);
    }

第二种:使用 Generator 函数将对象重新包装一下, 利用 for of 自动迭代ginerator

function* entries(obj) {
  for (let key of Object.keys(obj)) {
    yield [key, obj[key]];
  }
}

for (let [key, value] of entries(obj)) {
  console.log(key, '->', value);
}

第三种: for... in...

for...in... 和for... of ... 在循环数组时候的区别

let arr = [3, 5, 7];
arr.foo = 'hello';

for (let i in arr) {
  console.log(i); // "0", "1", "2", "foo"
}

for (let i of arr) {
  console.log(i); //  "3", "5", "7"
}



// 一个是遍历得到可以, 一个得到value
var arr = ['a', 'b', 'c', 'd'];

for (let a in arr) {
  console.log(a); // 0 1 2 3
}

for (let a of arr) {
  console.log(a); // a b c d
}