JavaScript中forEach for in for of

今天使用for in 发现问题：

For(let index in array)

index 并不是Number 而是String 所以check 要check ‘2’
所以准备抽空研究下 forEach for of for in区别

先说结论

forEach用于数组
for in用于对象
for of语句用于可迭代对象（包括Array，Map，Set，String，TypedArray，arguments 对象等等）但不能用于原生对象。

1 forEach()

1.1 forEach 行为

const arr = ['a', 'b', 'c'];
arr.forEach(function(element) {
    console.log(element);
});
array.forEach(callback(currentValue, index, array){
    //do something
}, this)
array.forEach(callback[, thisArg])

currentValue:数组当前项的值
Index:数组当前项的索引
Array:数组对象本身

forEach() 方法对数组的每个元素执行一次提供的回调函数。

forEach 方法按升序为数组中含有效值的每一项执行一次callback 函数，那些已删除（使用delete方法等情况）或者未初始化的项将被跳过（但不包括那些值为 undefined 的项）（例如在稀疏数组上）。

遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变，则传递给 callback 的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到。如果已访问的元素在迭代时被删除了(例如使用 shift()) ，之后的元素将被跳过。

1.2 注意

没有办法（break return等）中止或者跳出 forEach 循环，除了抛出一个异常。
对象不能使用这个函数
不要再用forEach去check 数组中是否含有某个值了。

您正在测试一个数组里的元素是否符合某条件，且需要返回一个布尔值。
那么可使用 Array.every 或 Array.some。如果可用，新方法 find() 或者findIndex() 也可被用于真值测试的提早终止。如：

var objArr = [{id:1, name:'jiankian'}, {id:23, name:'anan'}, {id:188, name:'superme'}, {id:233, name:'jobs'}, {id:288, name:'bill', age:89}, {id:333}] ;
var ret2 = objArr.find((v) => {
    return v.id == 233;
});

2 for .. in

2.1 for in 行为

for (variable in object) {...}

variable 在每次迭代时，将不同的属性名分配给变量。
object 被迭代枚举其属性的对象

for…in语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性，语句都会被执行。

2.2 注意

注意 for in 是用于对象
1 因为JavaScript中数组比较特殊，所以也可以使用for in。想想对象的属性不应该是Number类型，
所以用for in 去遍历数组得到index 是string也就可以理解了，该背锅。
2 如果你在数组中定义了一个defect 属性，那for in也会将defect遍历到。
归根结底这些都是for in被用于数组上才弄出来的问题。

samplecode：

let testArray = ['test1', 'test2', 'test3'];
for(let index in testArray){
    console.log(typeof(index));
    console.log(index+":"+testArray[index]);
}

testArray.defect = "this is for in defect"


for(let index in testArray){
    console.log(index+":"+testArray[index]);
}

输出：

string
0:test1
string
1:test2

0:test1
1:test2
defect:this is for in defect

3 for of

3.1 行为

for (variable of iterable) {
    //statements
}

variable：在每次迭代中，将不同属性的值分配给变量。
iterable ：被迭代枚举其属性的对象。

for…of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

测试code：

let testArray = ['test1', 'test2'];
let teststring = "hello";
let testObject = {
    test1:"hello",
    test2:"world",
};
let  testMap = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let value of testArray){
    console.log(value);
}

for (let value of teststring){
    console.log(value);
    if(value === 'l')
        break;
}

for (let value of testMap){
    console.log(value);
}

输出

test1
test2
h
e
l
[ 'a', 1 ]
[ 'b', 2 ]
[ 'c', 3 ]

3.2 注意

1 for-of 并不适用于处理原有的原生对象
2 for of 可以使用break, continue 和 return

4 参考链接

https://www.cnblogs.com/xueshanshan/p/8487438.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for…of