TypeScript 中的循环遍历技巧

循环遍历是编程中常见的操作之一，它可以帮助我们遍历数组、对象以及其他数据结构，从而实现各种复杂的操作。在 TypeScript 中，循环遍历也是非常常见的操作。本文将介绍 TypeScript 中的循环遍历技巧，希望能够帮助读者更好地理解和应用这些技巧。

for 循环

for 循环是最基本的循环结构，它可以遍历数组、字符串等数据结构，语法如下：

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

这里我们使用了一个变量 i 来表示当前遍历到的元素的下标，然后通过 arr[i] 来获取该元素的值。需要注意的是，i 的初始值为 0，而不是 1，因为数组的下标从 0 开始。

for...of 循环

for...of 循环是 ES6 引入的新特性，它可以遍历数组、字符串、Set、Map 等数据结构，语法如下：

for (let item of arr) {
  console.log(item);
}

这里我们使用了一个变量 item 来表示当前遍历到的元素的值，而不是下标。需要注意的是，item 的类型会根据 arr 的类型自动推导出来，因此可以省略类型声明。

for...in 循环

for...in 循环可以遍历对象的属性，语法如下：

for (let key in obj) {
  console.log(key, obj[key]);
}

这里我们使用了一个变量 key 来表示当前遍历到的属性名，而 obj[key] 则表示该属性的值。需要注意的是，for...in 循环不仅会遍历对象自身的属性，还会遍历对象原型链上的属性，因此需要使用 hasOwnProperty 方法来判断一个属性是否是对象自身的属性。

forEach 方法

forEach 方法是数组原型上的方法，它可以遍历数组，并对每个元素执行一个回调函数，语法如下：

arr.forEach((item, index) => {
  console.log(item, index);
});

这里我们使用了一个箭头函数来表示回调函数，它接受两个参数，分别是当前遍历到的元素和元素的下标。需要注意的是，forEach 方法不能使用 break 或 return 来中断循环。

map 方法

map 方法也是数组原型上的方法，它可以遍历数组，并对每个元素执行一个回调函数，然后将所有回调函数的返回值组成一个新的数组返回，语法如下：

const newArr = arr.map((item, index) => {
  return item * 2;
});

这里我们使用了一个箭头函数来表示回调函数，它接受两个参数，分别是当前遍历到的元素和元素的下标。需要注意的是，map 方法不会改变原数组，而是返回一个新的数组。

filter 方法

filter 方法也是数组原型上的方法，它可以遍历数组，并对每个元素执行一个回调函数，然后将回调函数返回值为 true 的元素组成一个新的数组返回，语法如下：

const newArr = arr.filter((item, index) => {
  return item > 0;
});

这里我们使用了一个箭头函数来表示回调函数，它接受两个参数，分别是当前遍历到的元素和元素的下标。需要注意的是，filter 方法不会改变原数组，而是返回一个新的数组。

reduce 方法

reduce 方法也是数组原型上的方法，它可以遍历数组，并对每个元素执行一个回调函数，然后将所有回调函数的返回值累加起来，最终返回一个累加的结果，语法如下：

const sum = arr.reduce((prev, curr) => {
  return prev + curr;
}, 0);

这里我们使用了一个箭头函数来表示回调函数，它接受两个参数，分别是累加器和当前遍历到的元素。需要注意的是，reduce 方法可以接受一个初始值作为第二个参数，如果不传初始值，则默认使用数组的第一个元素作为初始值。

总结

通过本文的介绍，我们了解了 TypeScript 中的循环遍历技巧，包括 for 循环、for...of 循环、for...in 循环、forEach 方法、map 方法、filter 方法和 reduce 方法。这些技巧可以帮助我们更方便地遍历数组、对象等数据结构，从而实现各种复杂的操作。需要注意的是，不同的遍历方式适用于不同的数据结构，因此需要根据具体情况选择合适的遍历方式。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65150a0c95b1f8cacdd6fd60