JavaScript 代码优化：减少嵌套、重构逻辑、提高可读性

JavaScript 代码优化：减少嵌套、重构逻辑、提高可读性

本文将以一段 JavaScript 代码为例，展示如何通过优化来提高代码的可读性和性能。

原始代码：

if(refreshType&&(refreshType=='addLevel'||refreshType=='cut')&&pasteLastObj){
  if(griddata[i].parentId === pasteLastObj.parentId || griddata[i].parentId == pasteLastObj.id){
    if(griddata[i].reqType == 'title' && ((griddata[i].isChanged && griddata[i].isChanged == "Y")||refreshType=='cut')){
      if(griddata[i].reqLevel == level||refreshType=='cut') {
        griddata[i].treeSort = num1 == 1&&refreshType!='cut'?pasteLastObj.treeSort+1:griddata[i].treeSort+1;
        griddata[i].isChanged = 'Y';
      } else {
        griddata[i].treeSort=_sortId+1;
        griddata[i].isChanged = 'Y';
      }
    }
    _sortId++;
  }
}

优化建议：

1. 减少嵌套层数，可以使用早返回的方式，减少嵌套层数，提高代码可读性和性能。
2. 根据逻辑关系进行代码重构，可以将逻辑关系相近的代码放在一起，提高代码可读性。
3. 减少重复代码，可以将重复的代码提取出来，封装成一个函数，提高代码复用性。
4. 使用更加语义化的命名方式，可以提高代码可读性和可维护性。

优化后的代码：

if (!refreshType || (refreshType != 'addLevel' && refreshType != 'cut') || !pasteLastObj) {
  return;
}

for (let i = 0; i < griddata.length; i++) {
  const data = griddata[i];
  const sameParent = data.parentId === pasteLastObj.parentId || data.parentId === pasteLastObj.id;

  if (!sameParent) {
    continue;
  }

  const isTitle = data.reqType === 'title';
  const isChanged = data.isChanged === 'Y';
  const sameLevel = data.reqLevel === level;

  if (isTitle && (isChanged || refreshType === 'cut')) {
    if (sameLevel || refreshType === 'cut') {
      data.treeSort = num1 === 1 && refreshType !== 'cut' ? pasteLastObj.treeSort + 1 : data.treeSort + 1;
      data.isChanged = 'Y';
    } else {
      data.treeSort = _sortId + 1;
      data.isChanged = 'Y';
    }
  }

  _sortId++;
}

优化说明：

1. 将代码中的嵌套条件判断改为早返回的方式，减少了代码的嵌套层数，提高了代码的可读性。
2. 将逻辑关系相近的代码放在一起，并使用语义化的命名方式，提高了代码的可读性和可维护性。
3. 使用循环遍历 griddata 数组，并使用 continue 语句跳过不符合条件的数据，进一步提高了代码的可读性。
4. 使用 const 声明常量，提高了代码的可读性和可维护性。

通过上述优化，代码的可读性和性能都得到了提升。建议在编写代码时，积极采用这些优化方法，提高代码的质量和效率。