小窥TypeScript: for of 循环

首先来看看老的js用forEach()写一段代码：

var arr1 = [1, 2, 3, 4, 5];
arr1.id = "5 number";
arr1.forEach(function (value) { return console.log(value); });

用ts来简化一下：

var arr1 = [1, 2, 3, 4, 5];
arr1.id = "5 number";
arr1.forEach(value => console.log(value));

ps：第二行代码会报错，ts不允许添加属性，编译器会报错：Property 'id' does not exist on type 'number[]'.

运行后，会发现forEach()是无法打断循环的，比如我们常用的break，也不能打印属性值。

接着我们用js写一段for in循环。

var arr1 = [1, 2, 3, 4, 5];
arr1.id = "5 number";
for (var n in arr1) {
    console.log(arr1[n]);
}

这时我们可以看到运行后，会打印出来数组的内容及属性，哪怕我们并不想打印出属性。

最后我们来看ts里的for of循环：

var arr1 = [1, 2, 3, 4, 5];
arr1.id = "5 number";
for (var n of arr1) {
    console.log(n);
}

这时控制台会输出：

1
2
3
4
5

用js的语句来完成上面ts的代码：

var arr1 = [1, 2, 3, 4, 5];
arr1.id = "5 number";
for (var _i = 0, arr1_1 = arr1; _i < arr1_1.length; _i++) {
    var n = arr1_1[_i];
    console.log(n);
}

改变一下代码，通过条件来打断循环：

var arr1 = [1, 2, 3, 4, 5];
arr1.id = "5 number";
for (var n of arr1) {
    if (n > 3) break;
    console.log(n);
}

你会发现控制台仅仅打印到了3就停止了。

附上同等需求的js的代码：

var arr1 = [1, 2, 3, 4, 5];
arr1.id = "5 number";
for (var _i = 0, arr1_1 = arr1; _i < arr1_1.length; _i++) {
    var n = arr1_1[_i];
    if (n > 3)
        break;
    console.log(n);
}

其实for of还能直接打印字符串：

for (var n of "abcdefghijk") {
    console.log(n);
}

附上同等需求的js代码：

for (var _i = 0, _a = "abcdefghijk"; _i < _a.length; _i++) {
    var n = _a[_i];
    console.log(n);
}