js和ts的for、for…in、for…of循环

原创已于 2023-06-09 13:54:37 修改 · 1.2w 阅读

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端

于 2020-09-25 16:15:56 首次发布

140 篇文章

订阅专栏

本文对比了foreach、for...in及for...of三种数组循环方法的特点。foreach适用于仅需值的操作，但不支持break；for...in获取数组下标且支持break，还能遍历对象属性；for...of获取数组值，同样支持break。

//foreach和箭头表达式
let list: Array<number> = [1, 2, 3, 4, 5];
list.forEach(value=>
    console.log(value)
);

通过下图执行结果我们可以看出，foreach循环可以获取数组的值，循环得出的是数组的值。然而这种写法有个缺点那就是通过foreach的循环无法中途根据特定的条件停止循环的执行，也就是说这种写法不支持break.

//for...in
let list1: Array<number> = [1, 2, 3, 4];
for (var index in list1) { 
    console.log(index);
}

通过执行的结果我们可以看出这种循环的写法获取到的是数组的下标值，其实这种写法还可以输出js代码里关于属性的设定。这种方法支持break，可遍历对象原型链上的属性。

//for...of
let list1: Array<number> = [1, 2, 3, 4];
for (var index of list1) { 
    console.log(index);
}

通过下图的执行结果我们可以看出这种写法也是输出数组集合的值的，这种写法本身是支持break的，可以通过特定的条件中间停止循环。

内容非原创，此处仅做笔记，如有需要，可联系删除，来源：https://www.cnblogs.com/xiaoxiaochengxuyuan/p/6164413.html