# for...of

`for...of`语句`TypedArray`arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

## 语法

```for (variable of iterable) {
//statements
}
```
`variable`

`iterable`

## 示例

### 迭代`Array`

```let iterable = [10, 20, 30];

for (let value of iterable) {
value += 1;
console.log(value);
}
// 11
// 21
// 31
```

```let iterable = [10, 20, 30];

for (const value of iterable) {
console.log(value);
}
// 10
// 20
// 30```

### 迭代`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```

### 迭代 DOM 集合

```//注意：这只能在实现了NodeList.prototype[Symbol.iterator]的平台上运行
let articleParagraphs = document.querySelectorAll("article > p");

for (let paragraph of articleParagraphs) {
}
```

### 关闭迭代器

```function* foo(){
yield 1;
yield 2;
yield 3;
};

for (let o of foo()) {
console.log(o);
break; // closes iterator, triggers return
}
```

### 迭代生成器

```function* fibonacci() { // 一个生成器函数
let [prev, curr] = [0, 1];
for (;;) { // while (true) {
[prev, curr] = [curr, prev + curr];
yield curr;
}
}

for (let n of fibonacci()) {
console.log(n);
// 当n大于1000时跳出循环
if (n >= 1000)
break;
}```

#### 不要重用生成器

```var gen = (function *(){
yield 1;
yield 2;
yield 3;
})();
for (let o of gen) {
console.log(o);
break;//关闭生成器
}

//生成器不应该重用，以下没有意义！
for (let o of gen) {
console.log(o);
}

```

### 迭代其他可迭代对象

```var iterable = {
[Symbol.iterator]() {
return {
i: 0,
next() {
if (this.i < 3) {
return { value: this.i++, done: false };
}
return { value: undefined, done: true };
}
};
}
};

for (var value of iterable) {
console.log(value);
}
// 0
// 1
// 2```

### `for...of`与`for...in`的区别

`for...in` 语句以任意顺序迭代对象的可枚举属性

`for...of` 语句遍历可迭代对象定义要迭代的数据。

```Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};

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

for (let i in iterable) {
console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i in iterable) {
if (iterable.hasOwnProperty(i)) {
console.log(i); // logs 0, 1, 2, "foo"
}
}

for (let i of iterable) {
console.log(i); // logs 3, 5, 7
}```
```Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};

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

```for (let i in iterable) {
console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}
```

```for (let i in iterable) {
if (iterable.hasOwnProperty(i)) {
console.log(i); // logs 0, 1, 2, "foo"
}
}
```

```for (let i of iterable) {
console.log(i); // logs 3, 5, 7
}
```

## 规范

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
for...of statement
Standard Initial definition.
ECMAScript Latest Draft (ECMA-262)
for...of statement
Draft

## 浏览器兼容

Update compatibility data on GitHub
Desktop Mobile Server Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Chrome Full support 38 Edge Full support 12 Firefox Full support 13 Notes Full support 13 Notes Notes Prior to Firefox 51, using the `for...of` loop construct with the `const` keyword threw a `SyntaxError` ("missing = in const declaration"). IE No support No Opera Full support 25 Safari Full support 8 WebView Android Full support 38 Chrome Android Full support 38 Firefox Android Full support 14 Notes Full support 14 Notes Notes Prior to Firefox 51, using the `for...of` loop construct with the `const` keyword threw a `SyntaxError` ("missing = in const declaration"). Opera Android Full support 25 Safari iOS Full support 8 Samsung Internet Android Full support Yes nodejs Full support Yes Chrome Full support 63 Edge Full support 12 Firefox Full support 57 IE No support No Opera Full support 50 Safari ? WebView Android Full support 63 Chrome Android Full support 63 Firefox Android Full support 57 Opera Android Full support 46 Safari iOS ? Samsung Internet Android Full support 8.0 nodejs ? Chrome Full support 51 Edge Full support 14 Firefox Full support 53 IE No support No Opera Full support Yes Safari Full support Yes WebView Android Full support Yes Chrome Android Full support 51 Firefox Android Full support 53 Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes nodejs Full support Yes

### Legend

Full support
Full support
No support
No support
Compatibility unknown
Compatibility unknown
See implementation notes.
See implementation notes.