一个代码扫描规则引发的思考

事情的起因

最近需求开发完成后,在利用Sonar扫描代码的时候,在异味代码中居然发现了一条奇怪的规则。如下图:

起因就是我在代码中用了一个for循环类似这样for (let i = 0; i < rules.length; i++) {}然后代码扫描就提示了。

其实上面这条代码规则就是TypeScript tslint中的 "prefer-for-of" 规则。它旨在提醒开发者在迭代数组或可迭代对象时使用'for-of'循环而不是传统的'for'循环。那为什么推荐使用for-of而不是传统的for循环呢?下面我们详细讲解一下

for-of与for循环的区别

在日常开发中,遍历数组的时候我们很容易就想到ES6的forEach语法,但是如果我们需要提前中断循环,我们就需要for循环或者for-of循环了.但是for循环与for-of循环有什么区别呢?我们从下面几个维度去探讨一下:

语法复杂度

  • for 循环:语法较为繁琐,需手动管理计数器、循环条件和计数器更新。
  • for...of 循环:语法简洁,无需手动管理索引,直接迭代可迭代对象。
js 复制代码
const arr = [1, 2, 3];
// for-of
for (let item of arr) {
    console.log(item);
}

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

可迭代对象支持

  • for 循环:一般用于数组的迭代,不过经过适当调整也能用于其他可索引的数据结构。要是迭代非数组对象,就需要手动处理索引。
  • for...of 循环:可以直接对任何可迭代对象进行迭代,像数组、字符串、Set、Map、NodeList 等。
js 复制代码
// for-of
const str = 'hello';
for (const char of str) {
    console.log(char);
}

const set = new Set([1, 2, 3]);
for (const value of set) {
    console.log(value);
}

// for
const obj = {0: 'a', 1: 'b', 2: 'c', length: 3};
for (let i = 0; i < obj.length; i++) {
    console.log(obj[i]);
}

索引访问

  • for 循环:能轻松访问当前元素的索引,在需要索引进行操作时非常有用,比如修改数组元素。
  • for...of 循环 :默认情况下只能获取元素的值,无法直接访问索引。若要获取索引,需要借助 entries() 方法。
ini 复制代码
// for-of
const arr = [1, 2, 3];
for (const [index, value] of arr.entries()) {
    console.log(`索引: ${index}, 值: ${value}`);
}

// for
const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
    arr[i] = arr[i] * 2;
}
console.log(arr); 

稀疏数组处理

  • for 循环:会遍历数组的所有索引,包括那些没有赋值的索引,也就是会遍历稀疏数组的所有空位。
  • for...of 循环:只会遍历数组中实际存在的值,会跳过稀疏数组的空位。
js 复制代码
// for-of循环
const arr = [1, , 3];
for (const value of arr) {
    console.log(value); 
}

// for循环
const arr = [1, , 3];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]); 
}

循环控制

  • for 循环:可通过修改计数器的值来灵活控制循环的执行,比如跳过某些元素或者重复执行某些操作。
  • for...of 循环 :不能直接控制循环的索引,只能过 breakcontinue 语句来控制循环的执行流程。
js 复制代码
//for-of
const arr = [1, 2, 3, 4, 5];
for (const value of arr) {
    if (value === 3) {
        continue; 
    }
    console.log(value);
}

// for循环
const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
    if (arr[i] === 3) {
        i++; 
    }
    console.log(arr[i]);
}

总结一下,为什么要用for-of替代for循环

1.代码简洁性

  • for 循环:需要手动设置初始化变量、循环条件以及更新变量,代码结构相对复杂。例如遍历数组时,需要额外定义索引变量并管理其变化。
  • for...of 循环:无需手动管理索引,直接从可迭代对象中获取值,代码更简洁直观。

2.安全性

  • for 循环:手动管理索引容易出现错误,如索引越界、更新索引时出错等,可能导致意外的结果或程序崩溃。
  • for...of 循环:自动处理迭代过程,不会出现索引越界的问题,减少了因索引管理不当导致的错误。

3.可迭代对象支持范围广

  • for 循环:主要适用于数组等具有明确索引的数据结构,对于其他可迭代对象(如字符串、Set、Map 等)的处理需要额外的操作。
  • for...of 循环:可以直接用于各种可迭代对象,无需考虑对象的具体类型和索引结构,提高了代码的通用性和复用性。

4.处理稀疏数组更合理

  • for 循环:会遍历数组的所有索引,包括稀疏数组中未赋值的空位,可能导致不必要的处理。
相关推荐
胡gh2 小时前
页面卡成PPT?重排重绘惹的祸!依旧性能优化
前端·javascript·面试
胡gh2 小时前
简单又复杂,难道只能说一个有箭头一个没箭头?这种问题该怎么回答?
javascript·后端·面试
言兴2 小时前
# 深度解析 ECharts:从零到一构建企业级数据可视化看板
前端·javascript·面试
山有木兮木有枝_2 小时前
TailWind CSS
前端·css·postcss
烛阴3 小时前
TypeScript 的“读心术”:让类型在代码中“流动”起来
前端·javascript·typescript
杨荧3 小时前
基于Python的农作物病虫害防治网站 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python
Moment4 小时前
毕业一年了,分享一下我的四个开源项目!😊😊😊
前端·后端·开源
程序视点5 小时前
Escrcpy 3.0投屏控制软件使用教程:无线/有线连接+虚拟显示功能详解
前端·后端
silent_missile5 小时前
element-plus穿梭框transfer的调整
前端·javascript·vue.js
专注VB编程开发20年5 小时前
OpenXml、NPOI、EPPlus、Spire.Office组件对EXCEL ole对象附件的支持
前端·.net·excel·spire.office·npoi·openxml·spire.excel