var tabs = require('sdk/tabs'); for (let tab of tabs) console.log(tab.title);
关键字是由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循环可能不会显着减少能够使用你的人数添加在.您正在使用的某些其他功能可能会将您的加载项限制为更新版本.
用于…的
与Array.prototype.forEach()不同,for循环不仅限于Arrays,而是迭代其他类型的iterable objects,其中包括相当多的不同类型的对象.
有时会让人感到困惑的一件事是,对于属性值的迭代,而不是属性键.根据你正在做的事情,这可能非常方便,使得循环的for …不合适.
示例: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(不能用于……)
试图在普通对象上使用…会引发错误.
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); }
如果您正在寻找执行类似任务的其他方法,请使用Array.prototype.forEach()来迭代Arrays和Objects的属性值:
forEach直接在Object.values()获得的Object值上:
const obj = { first: 3,fourth: "hello" }; // with Object.keys() Object.values(obj).forEach(function (value) { console.log('value:',value); // logs "3","5","7","hello" });
forEach over Object从Object.keys()获得的键:
const obj = { first: 3,fourth: "hello" }; // with Object.keys() Object.keys(obj).forEach(function (key) { //obj[key] is the property value console.log('key:',key); // logs "first","fourth" console.log('value:',obj[key]); // logs "3","hello" });
forEach over Array的值:
const arr = [ 3,5,7 ]; arr.forEach(function (value,index) { console.log('value:',value); // logs "3","7" console.log('index:',index); // logs "0","1","2" });
使用for..in循环的主要缺点是它遍历Object的enumerable properties,它将包含Object原型的属性.这可能会导致意外错误.因此,使用Object.prototype.hasOwnProperty()
或其他方法测试循环的键值是Object自己的键值总是一个好主意,除非您知道要迭代不是Object自己的属性的可枚举属性(您很少想要).
虽然它并非绝对必要,但使用Object.prototype.hasOwnProperty()的已知良好副本是个好主意,因为任何Object都可以有意或无意地定义自己的hasOwnProperty.
const obj = { first: 3,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","fourth" console.log('value:',"hello" } }
浏览器兼容性
如果您打算将加载项移植到其他浏览器,或者用于…的网页,那么您应该知道该功能何时添加到各种浏览器中.从Browser Compatibility table on MDN可以看出,主要问题是Internet Explorer不支持它.
这是截至2018-03-11的compatibility table from MDN:
> Chrome 29-37:for … for循环功能可在首选项后面使用.在chrome:// flags中,激活“启用实验JavaScript”条目.>在Firefox 51之前,使用带有const关键字的for … of循环结构抛出了一个SyntaxError(“missing = in const declaration”).