深入了解JS中的for...of循环

PHP中文网 JavaScript

本文摘自PHP中文网，作者青灯夜游，侵删。

本篇文章带大家深入了解一下JavaScript中的for...of循环。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

for...of语句创建的循环可以遍历对象。在ES6中引入的for...of可以替代另外两种循环语句for...in和forEach()，而且这个新的循环语句支持新的迭代协议。for...of允许你遍历可迭代的数据结构，比如数组、字符串、映射、集合等。

语法

1

2

3

for (variable of iterable) {

    statement

}

  • variable：每个迭代的属性值被分配给variable

  • iterable：一个具有可枚举属性并且可以迭代的对象

我们使用一些示例来阐述。

Arrays

array是简单的列表，看上去像object。数组原型有多种方法，允许在其上执行操作，比如遍历。下面的示例使用for...of来对一个array进行遍历操作：

1

2

3

4

5

6

7

8

9

10

const iterable = ['mini', 'mani', 'mo'];

 

for (const value of iterable) {

    console.log(value);

}

 

// Output:

// => mini

// => mani

// => mo

其结果就是打印出iterable数组中的每一个值。

Map

Map对象持有key-value对。对象和原始值可以当作一个key或value。Map对象根据插入的方式遍历元素。换句话说，for...of在每次迭代中返回一个kay-value对的数组。

1

2

3

4

5

6

7

8

9

const iterable = new Map([['one', 1], ['two', 2]]);

 

for (const [key, value] of iterable) {

    console.log(`Key: ${key} and Value: ${value}`);

}

 

// Output:

// => Key: one and Value: 1

// => Key: two and Value: 2

Set

Set对象允许你存储任何类型的唯一值，这些值可以是原始值或对象。Set对象只是值的集合。Set元素的迭代是基于插入顺序，每个值只能发生一次。如果你创建一个具有相同元素不止一次的Set，那么它仍然被认为是单个元素。

1

2

3

4

5

6

7

8

9

const iterable = new Set([1, 1, 2, 2, 1]);

 

for (const value of iterable) {

    console.log(value);

}

 

// Output:

// => 1

// => 2

尽管我们创建的Set有多个1和2，但遍历输出的只有1和2。

String

字符串用于以文本形式存储数据。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

const iterable = 'javascript';

 

for (const value of iterable) {

    console.log(value);

}

 

// Output:

// => "j"

// => "a"

// => "v"

// => "a"

// => "s"

// => "c"

// => "r"

// => "i"

// => "p"

// => "t"

在这里，对字符串执行迭代，并打印出每个索引上(index)的字符。

Arguments Object

把一个参数对象看作是一个类似数组的对象，与传递给函数的参数相对应。这是一个用例：

1

2

3

4

5

6

7

8

9

10

11

12

function args() {

    for (const arg of arguments) {

        console.log(arg);

    }

}

 

args('a', 'b', 'c');

 

// Output:

// => a

// => b

// => c

你可能在想，到底发生了什么？正如我前面说过的，当调用函数时，参数会接收传入args()函数的任何参数。因此，如果我们将20个参数传递给args()函数，我们将输出20个参数。

在上面的示例基础上做一些调整，比如给args()函数，传入一个对象、数组和函数：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

function fn(){

return 'functions';

}

 

args('a', 'w3cplus', 'c',{'name': 'airen'},['a',1,3],fn());

 

// Output:

// => "a"

// => "w3cplus"

// => "c"

// => Object {

// =>     "name": "airen"

// => }

// => Array [

// =>    "a",

// =>    1,

// =>    3

// => ]

// => "functions"

Generators

生成器是一个函数，它可以退出函数，稍后重新进入函数。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

function* generator(){

    yield 1;

    yield 2;

    yield 3;

};

 

for (const g of generator()) {

    console.log(g);

}

 

// Output:

// => 1

// => 2

// => 3

function* 定义一个生成器函数，该函数返回生成器对象。更多关于生成器相关的信息，可以点击这里。

关闭迭代器

JavaScript中提供了四种已知的终止循环的方法：break、continue、return和throw。来看一个示例：

1

2

3

4

5

6

7

8

9

const iterable = ['mini', 'mani', 'mo'];

 

for (const value of iterable) {

console.log(value);

break;

}

 

// Output:

// => mini

在这个例子中，我们使用break关键词来终止一个循环，并且只打印出一个mini。

普通对象不可迭代

for...of循环只能和迭代一起工作。但普通对象是不可迭代的。让我们看看：

1

2

3

4

5

const obj = { fname: 'foo', lname: 'bar' };

 

for (const value of obj) { // TypeError: obj[Symbol.iterator] is not a function

    console.log(value);

}

在这里，我们定义了一个普通对象obj，当我们尝试for...of给obj进行操作时，会报错：TypeError: obj[Symbol.iterator] is not a function。

我们可以把一个类似数组的对象转找成一个数组。对象将具有length属性，它的元素可以被索引。来看一个示例：

1

2

3

4

5

6

7

8

9

const obj = { length: 3, 0: 'foo', 1: 'bar', 2: 'baz' };

const array = Array.from(obj);

for (const value of array) {

    console.log(value);

}

// Output:

// => foo

// => bar

// => baz

Array.from()方法从类似数组（Array-lik）或迭代对象中创建了一个新的数组实例。

for...of vs. for...in

for...in在循环中将遍历对象中所有可枚举属性。

1

2

3

4

5

6

7

8

9

10

11

12

Array.prototype.newArr = () => {};

Array.prototype.anotherNewArr = () => {};

const array = ['foo', 'bar', 'baz'];

for (const value in array) {

    console.log(value);

}

// Outcome:

// => 0

// => 1

// => 2

// => newArr

// => anotherNewArr

for...in不仅可以枚举数组里声明的值，它还可以从构造函数的原型中寻找继承的非枚举属性，比如上例中的newArr和anotherNewArr，并将它们打印出来。

for...of可以对数组和对象等做更具体的操作，但并不表示包括所有对象。

注意：任何具有Symbol.iterator属性的元素都是可迭代的。

1

2

3

4

5

6

7

8

9

Array.prototype.newArr = function() {};

const array = ['foo', 'bar', 'baz'];

for (const value of array) {

    console.log(value);

}

// Outcome:

// => foo

// => bar

// => baz

for...of不考虑构造函数原型的不可枚举属性。它只需要查找可枚举属性并将其打印出来。

总结

理解for...of循环在开发过程中的用法，可以节省很多时间。希望本文能帮助您理解和编写JavaScript开发中的更好的循环结构。从而让你编码更快乐！

相关免费学习推荐：js视频教程

以上就是深入了解JS中的for...of循环的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

javascript数组如何求和

详解javascript中的作用域和作用域链

除了 async 速度翻 10 倍，javascript 还带来了什么？

javascript最初是为了实现什么

javascript如何定义方法

javascript如何使用trim方法

html5和原生app如何进行交互？

javascript如何转换时间

javascript如何改变控件的显示位置

data-*与js的交互

更多相关阅读请进入《javascript》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...