js和ts关于遍历的几个小总结

分类: IT文章 • 2023-11-04 18:50:24

下文记述了一下关于循环遍历的几种方法foreach ,for...in, for...of有什么区别。

首先我们来看看foreach的用法，如下代码为例：

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

View Code

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

接下来让我们看看for...in的用法，还是上代码如下：

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

View Code

通过执行的结果我们可以看出这种循环的写法获取到的是数组的下标值，其实这种写法还可以输出js代码里关于属性的设定。这种方法同样的不支持break方法，中途无法停止循环的运行。
js和ts关于遍历的几个小总结

第三种循环的写法就是for...of这中写法是typescript的一种写法，同样的上代码：

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

View Code

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