TypeScript入门教程 之 for ... of 与 for ... in

TypeScript入门教程 之 for ... of 与 for ... in

 

新手JavaScript开发人员经常遇到的错误是，for...in数组不会遍历数组项。相反，它迭代传入的对象的键。下面的示例对此进行了演示。在这里您会期望9,2,5得到但得到索引0,1,2：

var someArray = [9, 2, 5];
for (var item in someArray) {
    console.log(item); // 0,1,2
}

这是为什么for...of在TypeScript（和ES6）中存在的原因之一。以下内容遍历数组，正确地按预期注销了成员：

var someArray = [9, 2, 5];
for (var item of someArray) {
    console.log(item); // 9,2,5
}

同样，TypeScript可以使用for...of以下命令逐个字符地处理字符串：

var hello = "is it me you're looking for?";
for (var char of hello) {
    console.log(char); // is it me you're looking for?
}

 

生成JS的情况

对于ES6之前的目标，TypeScript将生成标准for (var i = 0; i < list.length; i++)的循环类型。例如，这是我们前面的示例生成的内容：

var someArray = [9, 2, 5];
for (var item of someArray) {
    console.log(item);
}

// becomes //

for (var _i = 0; _i < someArray.length; _i++) {
    var item = someArray[_i];
    console.log(item);
}

您会看到使用for...of可以使意图更清晰，还可以减少必须编写的代码量（以及需要提供的变量名）。

 

局限性

如果您未针对ES6或更高版本，则生成的代码将假定该属性length存在于对象上，并且可以通过数字对对象进行索引，例如obj[2]。因此，仅这些旧式JS引擎string及其上才支持它array。

如果TypeScript可以看到您没有使用数组或字符串，则将给您一个明确的错误“不是数组类型或字符串类型”；

let articleParagraphs = document.querySelectorAll("article > p");
// Error: Nodelist is not an array type or a string type
for (let paragraph of articleParagraphs) {
    paragraph.classList.add("read");
}

使用for...of的是仅适用于的东西，必须提前知道是一个数组或一个字符串。请注意，在将来的TypeScript版本中可能会删除此限制。

 

摘要

您将对数组的元素进行多次迭代，您会感到惊讶。下次您发现自己要这样做时，请尝试for...of一下。您可能会让下一个审核您的代码的人高兴。

 

翻译来源：https://gitee.com/yunwisdoms/typescript-book/blob/master/docs/for...of.md