JavaScript` of`关键字(for … of loops)

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

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);
}

迭代Object属性值的其他方法

Array.prototype.forEach()

如果您正在寻找执行类似任务的其他方法,请使用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

使用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”).

JavaScript` of`关键字(for … of loops)

解决方法

相关文章