首先来看看老的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);
}