草庐IT

JavaScript `of` 关键字(for...of 循环)

coder 2024-07-22 原文

我刚刚发现,in Firefox SDK JavaScript (on MDN) ,使用了一个我从未见过的关键字:

var tabs = require('sdk/tabs');
for (let tab of tabs)
  console.log(tab.title);

of Mozilla 制作的关键字还是标准化的?

最佳答案

for...of 循环遍历属性值,是一个特性 added to the JavaScript specification in ECMAScript 2015 .

鉴于此问题的上下文是 Firefox 插件,问题不在于它何时或是否在其他浏览器中可用。问题是当这个 ECMAScript 2015 feature was added to Firefox以及使用它导致的向后兼容性的任何限制。

Firefox 13 中添加到 Firefox .因此,使用它会导致将您的附加组件限制为 Firefox 13+。鉴于截至 2014 年 10 月的当前版本是 Firefox 33.0,并且在 Firefox 13 和现在之间有多个 ESR 版本,使用 for...of循环可能不会显着减少能够使用您的附加组件的人数。您正在使用的某些其他功能可能会将您的附加组件限制为更新的版本。

使用 for...of
不像 Array.prototype.forEach() , for...of循环不仅限于数组,还会遍历其他类型的 iterable objects ,其中包括相当数量的不同类型的对象。

有时让人们感到困惑的一件事是 for...of迭代属性值,而不是属性键。根据您正在做的事情,这可能非常方便,可以使 for...of循环不合适。

示例:for..of迭代 NodeList

const listItems = document.querySelectorAll('li');

for (let item of listItems) {
    console.log('item text:', item.textContent); // "first", "second", "third", "fourth"
}
<ol>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
</ol>


普通对象通常不是 iterable (不能使用 for...of )

尝试使用 for...of在普通对象上会抛出错误。

const obj = { first: 3, second: 5, third: 7, fourth: "hello" };

// with Object.keys()

for (let value of obj) { //This is an error. obj is not iterable
    console.log('value:', value);
}


其他迭代 Object 属性值的方法

Array.prototype.forEach()

如果您正在寻找其他方法来执行类似任务,MDN shows examples使用Array.prototype.forEach()迭代 Arrays 的属性值和 Objects :

forEach直接覆盖从 Object.values() 获得的对象值:

const obj = { first: 3, second: 5, third: 7, fourth: "hello" };

// with Object.keys()

Object.values(obj).forEach(function (value) {
    console.log('value:', value); // logs "3", "5", "7", "hello"
});


forEach通过从 Object.keys() 获得的对象的键:

const obj = { first: 3, second: 5, third: 7, fourth: "hello" };

// with Object.keys()

Object.keys(obj).forEach(function (key) {
    //obj[key] is the property value
    console.log('key:', key);        // logs "first", "second", "third", "fourth"
    console.log('value:', obj[key]); // logs "3", "5", "7", "hello"
});


forEach数组的值:

const arr = [ 3, 5, 7 ];

arr.forEach(function (value, index) {
    console.log('value:', value);     // logs "3", "5", "7"
    console.log('index:', index);     // logs "0", "1", "2"
});


for..in

使用 for..in 的主要缺点循环是它遍历对象的 enumerable properties ,它将包括对象原型(prototype)上的属性。这可能会导致意外错误。因此,使用 Object.prototype.hasOwnProperty() 测试循环的键值是否是对象自己的值总是一个好主意。 , 或其他方法,除非您知道要遍历不是 Object 自己的属性的可枚举属性(您很少想要)。

虽然这不是绝对必要的,但最好使用 Object.prototype.hasOwnProperty() 的已知良好副本。 ,因为任何对象都可以定义自己的hasOwnProperty ,要么是有意的,要么是错误的。

const obj = { first: 3, second: 5, third: 7, fourth: "hello" };

// with for..in

for (let key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
        //obj[key] is the property value
        console.log('key:', key); // logs "first", "second", "third", "fourth"
        console.log('value:', obj[key]); // logs "3", "5", "7", "hello"
    }
}


浏览器兼容性:

如果您打算将您的插件移植到其他浏览器,或使用 for...of在网页中,您应该知道该功能何时添加到各种浏览器。可以在 Browser Compatibility table on MDN 中看到,主要问题是 Internet Explorer 不支持它。

这是compatibility table from MDN截至 2018 年 3 月 11 日:


  • Chrome 29–37:for...of循环功能在首选项后面可用。在 chrome://flags 中,激活条目“启用实验性 JavaScript”。
  • 在 Firefox 51 之前,使用 for...of带有 const 的循环构造关键字引发了 SyntaxError(“在 const 声明中缺少 =”)。
  • 关于JavaScript `of` 关键字(for...of 循环),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26525695/

    有关JavaScript `of` 关键字(for...of 循环)的更多相关文章

    1. ruby - 树顶语法无限循环 - 2

      我脑子里浮现出一些关于一种新编程语言的想法,所以我想我会尝试实现它。一位friend建议我尝试使用Treetop(Rubygem)来创建一个解析器。Treetop的文档很少,我以前从未做过这种事情。我的解析器表现得好像有一个无限循环,但没有堆栈跟踪;事实证明很难追踪到。有人可以指出入门级解析/AST指南的方向吗?我真的需要一些列出规则、常见用法等的东西来使用像Treetop这样的工具。我的语法分析器在GitHub上,以防有人希望帮助我改进它。class{initialize=lambda(name){receiver.name=name}greet=lambda{IO.puts("He

    2. ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2

      我有多个ActiveRecord子类Item的实例数组,我需要根据最早的事件循环打印。在这种情况下,我需要打印付款和维护日期,如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询,用于查找maintenance和payment项目(非排他性查询),并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代

    3. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

      我想向我的Controller传递一个参数,它是一个简单的复选框,但我不知道如何在模型的form_for中引入它,这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框,但我该怎么做,模型中没有一个对象,而是一个要检查的对象,以便在Controller中创建一个ifelse,如果没有检查,请帮助我,非常感谢,谢谢

    4. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

      我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样?我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用,需要1秒才能返回,我有100,000多个页面要访问,所以我试图运行多个线程来解决这个问题。有更好的方法吗?classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

    5. ruby-on-rails - Rails 中的 NoMethodError::MailersController#preview undefined method `activation_token=' for nil:NilClass - 2

      似乎无法为此找到有效的答案。我正在阅读Rails教程的第10章第10.1.2节,但似乎无法使邮件程序预览正常工作。我发现处理错误的所有答案都与教程的不同部分相关,我假设我犯的错误正盯着我的脸。我已经完成并将教程中的代码复制/粘贴到相关文件中,但到目前为止,我还看不出我输入的内容与教程中的内容有什么区别。到目前为止,建议是在函数定义中添加或删除参数user,但这并没有解决问题。触发错误的url是http://localhost:3000/rails/mailers/user_mailer/account_activation.http://localhost:3000/rails/mai

    6. ruby-on-rails - 如何重命名或移动 Rails 的 README_FOR_APP - 2

      当我在我的Rails应用程序根目录中运行rakedoc:app时,API文档是使用/doc/README_FOR_APP作为主页生成的。我想向该文件添加.rdoc扩展名,以便它在GitHub上正确呈现。更好的是,我想将它移动到应用程序根目录(/README.rdoc)。有没有办法通过修改包含的rake/rdoctask任务在我的Rakefile中执行此操作?是否有某个地方可以查找可以修改的主页文件的名称?还是我必须编写一个新的Rake任务?额外的问题:Rails应用程序的两个单独文件/README和/doc/README_FOR_APP背后的逻辑是什么?为什么不只有一个?

    7. ruby - inverse_of 是否适用于 has_many? - 2

      当我使用has_one时,它​​工作得很好,但在has_many上却不行。在这里您可以看到object_id不同,因为它运行了另一个SQL来再次获取它。ruby-1.9.2-p290:001>e=Employee.create(name:'rafael',active:false)ruby-1.9.2-p290:002>b=Badge.create(number:1,employee:e)ruby-1.9.2-p290:003>a=Address.create(street:"123MarketSt",city:"SanDiego",employee:e)ruby-1.9.2-p290

    8. ruby-on-rails - 复数 for fields_for has_many 关联未显示在 View 中 - 2

      目前,Itembelongs_toCompany和has_manyItemVariants。我正在尝试使用嵌套的fields_for通过Item表单添加ItemVariant字段,但是使用:item_variants不显示该表单。只有当我使用单数时才会显示。我检查了我的关联,它们似乎是正确的,这可能与嵌套在公司下的项目有关,还是我遗漏了其他东西?提前致谢。注意:下面的代码片段中省略了不相关的代码。编辑:不知道这是否相关,但我正在使用CanCan进行身份验证。routes.rbresources:companiesdoresources:itemsenditem.rbclassItemi

    9. ruby-on-rails - 事件记录 : Select max of limit - 2

      我正在尝试将以下SQL查询转换为ActiveRecord,它正在融化我的大脑。deletefromtablewhereid有什么想法吗?我想做的是限制表中的行数。所以,我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看,您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

    10. ruby - Ruby 的 AST 中的 'send' 关键字是什么意思? - 2

      我正在尝试学习Ruby词法分析器和解析器(whitequarkparser)以了解更多有关从Ruby脚本进一步生成机器代码的过程。在解析以下Ruby代码字符串时。defadd(a,b)returna+bendputsadd1,2它导致以下S表达式符号。s(:begin,s(:def,:add,s(:args,s(:arg,:a),s(:arg,:b)),s(:return,s(:send,s(:lvar,:a),:+,s(:lvar,:b)))),s(:send,nil,:puts,s(:send,nil,:add,s(:int,1),s(:int,3))))任何人都可以向我解释生成的

    随机推荐