# for 遍历
for 遍历是最基础最简单的一种遍历数组的方式，在 js 中的数组其实并不是其它语言通常意义上的数组。它实际上只是一个带有 length 属性的对象，当我们使用 for 循环加上 index 去遍历数组时，本质上是使用 obj[属性名] 的方式去遍历的，数组里它的属性名默认是从 0 开始增长的
let arr = [1,2,3,44,5]; | |
for(let index = 0; index < arr.length;index++){ | |
console.log(arr[index]); | |
} |
当我我们使用 Object.keys() 方法去获取一个数组的值时，实际上它只会返回从 0 开始的属性名组成的新数组。
let arr = [1,2,3,4,5]; | |
arr['5'] = 6; | |
console.log(arr.length) // 6 | |
arr[7] = 20; | |
console.log(arr.length) // 8 | |
console.log(arr) // [ 1, 2, 3, 4, 5, 6, <1 empty item>, 20 ] | |
let keys = Object.keys(arr); | |
console.log(keys); // ['0', '1', '2', '3', '4', '5', '7'] |
当我们使用 [] 去获取对象属性的值时，实际上 [] 上的内容都会被强制转换成字符串的形式。也就是说 [ 7 ] 等价于 [ '7' ]。
# for in 遍历
使用 for in 适合用于遍历一个对象，但它效率极低。因为它不仅会遍历对象里的属性，而且还会延着原型链一直遍历所有原型的属性。但是由于原型上属性一般都是不可枚举的，所以通常不会被它枚举出来。但是若你给原型对象配置了一个可以枚举的属性，它就会将它枚举出来。遍历对象的属性都是随机的，根据引擎的不同其输出的顺序也不同
let obj = { | |
name:'zhangsan', | |
age:18 | |
} | |
for(const key in obj){ | |
console.log(key); | |
} // name age | |
// 给原型对象添加一个可枚举属性 | |
Object.prototype.sex = 'male'; | |
for(const key in obj){ | |
console.log(key); | |
} //name age sex 它将 sex 也遍历出来了 |
# for of
for of 用于遍历一个带有迭代器的对象。而通常内置的对象都会有一个迭代器供其使用。而我们自定的对象除非我们给它手动添加迭代器，否则是无法使用 for of 遍历的。
for…of 是 ES6 新增的遍历方式，允许遍历一个含有 iterator 接口的数据结构（数组、对象等）并且返回各项的值，和 ES3 中的 for…in 的区别如下
- for…of 遍历获取的是对象的键值，for…in 获取的是对象的键名；
- for… in 会遍历对象的整个原型链，性能非常差不推荐使用，而 for … of 只遍历当前对象不会遍历原型链；
- 对于数组的遍历，for…in 会返回数组中所有可枚举的属性 (包括原型链上可枚举的属性)，for…of 只返回数组的下标对应的属性值；
** 总结：**for...in 循环主要是为了遍历对象而生，不适用于遍历数组；for...of 循环可以用来遍历数组、类数组对象，字符串、Set、Map 以及 Generator 对象。
# forEach
forEach 是数组内置的一个遍历方法，它的是个高效的数组内置的遍历方法。 forEach 不会直接改变调用它的对象，但是那个对象可能会被 callback 函数改变
