太长不看版本
- 遍历对象属性，用for...in取key(和 Object.keys() 效果一样)
- 需要用break. continue，用for， for...of
- 需要自己设置遍历的起点，用for
- 需要跳过数组中的未定义元素，用forEach
- 摸不清这个变量具体是Array，String，Set还是Map，用for...of
- 对性能要求极高，数组极大，用for
break与continue
for...of是基于ierator的，iterator包含一个return方法，可以提前终止遍历, forEach只是在内部用for循环逐一调用回调函数, 不支持提前退出。
let arr = ["a", "b", "c"];
for(let item of arr){
console.log(item);
if(item === "b")break;
}
// a b
arr.foreach(item => {
console.log(item);
if(item === "b")break; // Uncaught SyntaxError: Illegal break statement
})
for循环可以设置起始起点
for...of和forEach不支持，无脑从头到尾走完
for...in 和 for...of
for...in 语句以任意顺序迭代对象的可枚举属性。
for...of 语句遍历可迭代对象定义要迭代的数据。
let arr = [1,2,3];
arr.foo = "hello";
for(let item in arr){
console.log(item);
}
// 0 1 2 'foo'
let arr = [1,2,3];
for(let item of arr){
console.log(item);
}
// 1 2 3
for...in是ES6之前的，主要适用于遍历对象的key, 但其实我用到的更多的方法是Object.keys(obj);
for...of是ES6新加的，基于iterator, 其内部会获取数据上部署的[Symbol.iterator], 调用其上面的next方法来实现遍历。一切部署了iterable接口的数据都可以用for...of来遍历。原生部署的数据类型有：Array，String，Set，Map（注意Object没有原生部署Iterator, ）
为什么对象不部署iterable 是因为对象的哪个属性先遍历，哪个属性后遍历是不确定的，需要开发者手动指定。遍历器是一种线性处理，对于任何非线性的数据结构，部署遍历器接口，就等于部署一种线性转换。不过，严格地说，对象部署遍历器接口并不是很必要，因为这时对象实际上被当作 Map 结构使用，ES5 没有 Map 结构，而 ES6 原生提供了。
let arr = ["a", "b", "c"];
const iterator = arr[Symbol.iterator]();
iterator.next(); // {value: "a", done: false}
iterator.next(); // {value: "b", done: false}
iterator.next(); // {value: "b", done: true}
iterator.next(); // {value: undefined, done: true}
如果自己实现一个，也很简单：
interface Iterable{
[Symbol.iterator]: Iterator;
}
Interface Iterator{
next(value?: any) : IterationResult,
}
Interafce IterationResult{
done: boolean;
value: any
}
// 自己实现一个Iterator
Array.prototype[Symbol.iterator] = function(){
let index = 1;
return {
next: () => {
return {
value: this[index++],
done: index >= this.length
}
}
}
}
const Arr = [1,2,3];
newArr[Symbol.iterator]().next(); // { value: 2, done: false}
循环体内改变数组元素
这样会直接改掉原数组，不管哪种循环方式都一样，非常不建议在循环体内改变数组本身！
let arr = ["a", "b", "c"];
for(let item of arr){
console.log(item);
arr[1] = "PPP";
}
console.log(arr);
// a PPP c
// [a PPP c]
arr.forEach(item => {
console.log(item);
arr[1] = "AAA"
})
console.log(arr);
// a AAA c
// [a AAA c]
for(let i=0; i<arr.length; i++){
console.log(arr[i]);
arr[1] = "BBB"
}
console.log(arr);
// a BBB c
// [a BBB c]
稀疏数组
forEach会跳过未初始化的元素, 而for, for...of不会(除非自己控制)
// 稀疏矩阵
const sparseArr = [1, , 3];
sparseArr.forEach((item, index) => {
console.log(item, index);
})
// 1 0
// 3 2
forEach支持绑定回调函数的this
我用的很少，也没有遇到哪里需要用
参考
https://www.bookstack.cn/read/es6-3rd/spilt.7.docs-iterator.md
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#using_foreach_on_sparse_arrays
