for in和for of

for in

定义和用法

for in 语句用于循环对象的属性。当遍历数组时，for in遍历的是数组的索引（即下标）。

循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

JavaScript 支持不同类型的循环：

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
注意： 不要使用 for/in 语句来循环数组的索引，你可以使用 for 语句替代。

实例

const obj = {
  name: 'lvxiaobu',
  age: 22,
  sex: 'man'
}
const arr = [6, 32, 45, 59]
// for in遍历的是对象属性
for (let i in obj) {
  console.log(i) // name \n age \n sex
}
// for in遍历的是数组下标
for (let j in arr) {
  console.log(j) // 0 \n 1 \n 2 \n 3
}
// for in缺点会把原型上所有的可枚举属性都遍历了
Array.prototype.method = function () {
  console.log(this.length)
}
var myArray = [1,4,7]
myArray.name = '数组'
for (var index in myArray) {
  console.log(myArray[index]) // 1 \n 4 \n 7 \n 数组 \n ƒ (){ console.log(this.length) }
}

for in遍历数组的缺点：
1.index索引为字符串型数字，不能直接进行几何运算
2.遍历顺序有可能不是按照实际数组的内部顺序
3.使用for in会遍历数组所有的可枚举属性，包括原型。例如上述的原型方法method和name属性
所以for in更适合遍历对象，不要使用for in遍历数组

那么除了使用for循环，如何更简单的正确的遍历数组达到我们的期望呢（即不遍历method和name），ES6中的for of更胜一筹。for of遍历的只是数组内的元素，而不包括数组的原型属性method和索引name

for of

定义和用法

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

语法

for (variable of iterable) {
//statements
}

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

实例

迭代普通对象

for of不能遍历普通的对象，会报错。因为Object类型并没有提供 Iterator （迭代器）接口，只有提供了 Iterator 接口的数据类型才可以使用 for of 来循环遍历

const obj = {
  name: 'lvxiaobu',
  age: 22,
  sex: 'man'
}
const arr = [6, 32, 45, 59]
// for of不能遍历普通的对象
for (let i of obj) {
  console.log(i) // Uncaught TypeError: obj is not iterable
}

迭代Array

let iterable = [10, 20, 30];
for (let value of iterable) {
  value += 1;
  console.log(value); // 11 21 31
}

迭代String

let iterable = "boo";
for (let value of iterable) {
  console.log(value); // b o o
}

迭代 TypedArray

let iterable = new Uint8Array([0x00, 0xff]);
for (let value of iterable) {
  console.log(value); // 0 255
}

迭代Map

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let entry of iterable) {
  console.log(entry); // ["a", 1] ["b", 2] ["c", 3]
}
for (let [key, value] of iterable) {
  console.log(value); // 1 2 3
}

迭代 Set

let iterable = new Set([1, 1, 2, 2, 3, 3]);
for (let value of iterable) {
  console.log(value); // 1 2 3
}

迭代 arguments 对象

(function() {
  for (let argument of arguments) {
    console.log(argument); // 1 2 3
  }
})(1, 2, 3);