百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>JS教程> 深入理解JS中的for...of轮回
分享文章到:

深入理解JS中的for...of轮回

发布时间:10/01 来源:未知 浏览: 关键词:
本篇文章带大家深入理解一下JavaScript中的for...of轮回。有必然的参照 价值,有需要的伴侣可以参照 一下,但愿对你有所帮忙。

for...of语句创立的轮回可以遍历对象。在ES6中引入的for...of可以替换别的两种轮回语句for...in和forEach(),并且这个新的轮回语句支撑新的迭代和谈。for...of同意你遍历可迭代的数据构造,比方数组、字符串、映射、汇合等。

语法

for (variable of iterable) {
    statement
}
  • variable:每个迭代的属性值被分配给variable

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

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

Arrays

array是简便的列表,看上去像object。数组原型有多种办法,同意在其上施行操纵,比方遍历。下面的示例使用for...of来对一个array停止遍历操纵:

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

for (const value of iterable) {
    console.log(value);
}

// Output:
// => mini
// => mani
// => mo

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

Map

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

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,那么它依然被认为是单个元素。

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

for (const value of iterable) {
    console.log(value);
}

// Output:
// => 1
// => 2

尽管我们创立的Set有多个12,但遍历输出的只要12

String

字符串用于以文本情势储备数据。

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

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

function args() {
    for (const arg of arguments) {
        console.log(arg);
    }
}

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

// Output:
// => a
// => b
// => c

你大概在想,到底发生了什么?正如我前面说过的,当调取函数时,参数会接收传入args()函数的任何参数。因此,假如我们将20个参数传递给args()函数,我们将输出20个参数。

在上面的示例根基上做一些调整,比方给args()函数,传入一个对象、数组和函数:

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

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

function* generator(){ 
    yield 1; 
    yield 2; 
    yield 3; 
};

for (const g of generator()) { 
    console.log(g); 
}

// Output:
// => 1
// => 2
// => 3

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

关闭迭代器

JavaScript中供给了四种已知的终止轮回的办法:breakcontinuereturnthrow。来看一个示例:

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

for (const value of iterable) {
console.log(value);
break;
}

// Output:
// => mini

在这个例子中,我们使用break关键词来终止一个轮回,并且只打印出一个mini

一般对象不成迭代

for...of轮回只能和迭代一起工作。但一般对象是不成迭代的。让我们看看:

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

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

在这里,我们定义了一个一般对象obj,当我们尝试for...ofobj停止操纵时,会报错:TypeError: obj[Symbol.iterator] is not a function

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

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在轮回中将遍历对象中所有可枚举属性。

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不仅可以枚举数组里声明的值,它还可以从结构函数的原型中寻觅继承的非枚举属性,比方上例中的newArranotherNewArr,并将它们打印出来。

for...of可以对数组和对象等做更详细的操纵,但并不表示包罗所有对象。

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

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轮回的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

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

扫码支持
扫码打赏,你说多少就多少

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

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板