循环遍历是编程中常见的操作之一，它可以帮助我们遍历数组、对象以及其他数据结构，从而实现各种复杂的操作。在 TypeScript 中，循环遍历也是非常常见的操作。本文将介绍 TypeScript 中的循环遍历技巧，希望能够帮助读者更好地理解和应用这些技巧。
for 循环
for 循环是最基本的循环结构，它可以遍历数组、字符串等数据结构，语法如下：
--- ---- - - -- - - ----------- ---- - -------------------- -
这里我们使用了一个变量 i 来表示当前遍历到的元素的下标，然后通过 arr[i] 来获取该元素的值。需要注意的是，i 的初始值为 0，而不是 1，因为数组的下标从 0 开始。
for...of 循环
for...of 循环是 ES6 引入的新特性，它可以遍历数组、字符串、Set、Map 等数据结构，语法如下：
--- ---- ---- -- ---- - ------------------ -
这里我们使用了一个变量 item 来表示当前遍历到的元素的值，而不是下标。需要注意的是，item 的类型会根据 arr 的类型自动推导出来，因此可以省略类型声明。
for...in 循环
for...in 循环可以遍历对象的属性，语法如下：
--- ---- --- -- ---- - ---------------- ---------- -
这里我们使用了一个变量 key 来表示当前遍历到的属性名，而 obj[key] 则表示该属性的值。需要注意的是，for...in 循环不仅会遍历对象自身的属性，还会遍历对象原型链上的属性，因此需要使用 hasOwnProperty 方法来判断一个属性是否是对象自身的属性。
forEach 方法
forEach 方法是数组原型上的方法，它可以遍历数组，并对每个元素执行一个回调函数，语法如下：
------------------ ------ -- - ----------------- ------- ---
这里我们使用了一个箭头函数来表示回调函数，它接受两个参数，分别是当前遍历到的元素和元素的下标。需要注意的是，forEach 方法不能使用 break 或 return 来中断循环。
map 方法
map 方法也是数组原型上的方法，它可以遍历数组，并对每个元素执行一个回调函数，然后将所有回调函数的返回值组成一个新的数组返回，语法如下：
----- ------ - -------------- ------ -- - ------ ---- - -- ---
这里我们使用了一个箭头函数来表示回调函数，它接受两个参数，分别是当前遍历到的元素和元素的下标。需要注意的是，map 方法不会改变原数组，而是返回一个新的数组。
filter 方法
filter 方法也是数组原型上的方法，它可以遍历数组，并对每个元素执行一个回调函数，然后将回调函数返回值为 true 的元素组成一个新的数组返回，语法如下：
----- ------ - ----------------- ------ -- - ------ ---- - -- ---
这里我们使用了一个箭头函数来表示回调函数，它接受两个参数，分别是当前遍历到的元素和元素的下标。需要注意的是，filter 方法不会改变原数组，而是返回一个新的数组。
reduce 方法
reduce 方法也是数组原型上的方法，它可以遍历数组，并对每个元素执行一个回调函数，然后将所有回调函数的返回值累加起来，最终返回一个累加的结果，语法如下：
----- --- - ----------------- ----- -- - ------ ---- - ----- -- ---
这里我们使用了一个箭头函数来表示回调函数，它接受两个参数，分别是累加器和当前遍历到的元素。需要注意的是，reduce 方法可以接受一个初始值作为第二个参数，如果不传初始值，则默认使用数组的第一个元素作为初始值。
总结
通过本文的介绍，我们了解了 TypeScript 中的循环遍历技巧，包括 for 循环、for...of 循环、for...in 循环、forEach 方法、map 方法、filter 方法和 reduce 方法。这些技巧可以帮助我们更方便地遍历数组、对象等数据结构，从而实现各种复杂的操作。需要注意的是，不同的遍历方式适用于不同的数据结构，因此需要根据具体情况选择合适的遍历方式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65150a0c95b1f8cacdd6fd60