如何将含ES6特性的JS代码迁移至仅支持ES5的旧系统？

现有一段JavaScript ES6代码，在现代浏览器中可生成包含10个元素的正确数组结果，但需在仅支持ES5的旧系统中运行。尝试使用Babel转换、Object.freeze及设置Document属性均未成功，代码大量使用ES5不支持的const/let、箭头函数、扩展运算符等特性，以下是可行的手动迁移方案。

关键ES6特性的ES5替换方案 #

• const/let替换为var：ES5不支持块级作用域，将所有const（无重新赋值的变量）和let替换为var，确保变量声明在作用域顶部，避免声明提升导致的问题
• 箭头函数替换为普通函数：将箭头函数表达式（如item => item.startDate）替换为标准函数表达式，保留原逻辑
• 扩展运算符...替换为concat()：数组合并操作使用Array.prototype.concat()替代扩展运算符，实现相同的数组拼接效果
• Set去重替换为手动遍历去重：ES5无Set对象，通过遍历数组+对象存储已出现元素的方式实现数组去重
• Array.prototype.includes()替换为indexOf()判断：用array.indexOf(target) !== -1替代array.includes(target)，判断元素是否存在于数组中
• Array.prototype.find()替换为手动循环查找：ES5无find方法，通过for循环遍历数组，找到符合条件的元素后立即返回

完整迁移后的ES5代码 #

var occupationJson = {
  "Occupation": [{
      "value": "Engineer",
      "startDate": "2016-01-01",
      "endDate": "2016-01-31"
    },
    {
      "value": "Manager",
      "startDate": "2016-02-01",
      "endDate": "2016-02-28"
    },
    {
      "value": "Director",
      "startDate": "2016-03-05",
      "endDate": "2016-03-25"
    },
    {
      "value": "CEO",
      "startDate": "2016-04-04",
      "endDate": "2016-04-30"
    },
    {
      "value": "Board Member",
      "startDate": "2016-05-02",
      "endDate": "2099-05-31"
    }
  ]
};

var tenureJson = {
  "Tenure": [{
      "value": "Full Time",
      "startDate": "2016-01-01",
      "endDate": "2016-01-31"
    },
    {
      "value": "Part Time",
      "startDate": "2016-02-04",
      "endDate": "2016-02-28"
    },
    {
      "value": "Casual",
      "startDate": "2016-04-01",
      "endDate": "2016-04-25"
    },
    {
      "value": "Full Time",
      "startDate": "2016-05-01",
      "endDate": "2016-07-01"
    }
  ]
};

var dates = [];

// 遍历Occupation和Tenure数组获取起止日期
occupationJson.Occupation.forEach(function(item) {
  dates.push(item.startDate);
  dates.push(item.endDate);
});

tenureJson.Tenure.forEach(function(item) {
  dates.push(item.startDate);
  dates.push(item.endDate);
});

// 日期升序排序
dates.sort(function(a, b) {
  return new Date(a) - new Date(b);
});

var occupationStartDateArray = occupationJson.Occupation.map(function(item) {
  return item.startDate;
});
var occupationEndDateArray = occupationJson.Occupation.map(function(item) {
  return item.endDate;
});

var tenureStartDateArray = tenureJson.Tenure.map(function(item) {
  return item.startDate;
});
var tenureEndDateArray = tenureJson.Tenure.map(function(item) {
  return item.endDate;
});

// 合并起始日期数组并排序
var allStartDateArray = occupationStartDateArray.concat(tenureStartDateArray).sort();

// 合并结束日期数组并排序
var allEndDateArray = occupationEndDateArray.concat(tenureEndDateArray).sort();

var allDatesArray = allStartDateArray.concat(allEndDateArray);
var sortedAllDatesArray = allDatesArray.sort();
// 手动实现数组去重替代Set
var uniqueDatesArray = [];
var dateMap = {};
for (var j = 0; j < sortedAllDatesArray.length; j++) {
  var date = sortedAllDatesArray[j];
  if (!dateMap[date]) {
    dateMap[date] = true;
    uniqueDatesArray.push(date);
  }
}
console.log(uniqueDatesArray);
var shortestDate = uniqueDatesArray[0];


var result = {
  "data": []
};

// 初始化新的起始日期
var newStartDate = shortestDate;

// 遍历唯一日期数组，生成时间区间
for (var i = 1; i < uniqueDatesArray.length; i++) {
  var nextShortestDate = uniqueDatesArray[i];
  var newEndDate = "";
  // 判断当前日期是否为起始日期且晚于当前区间起始
  if (allStartDateArray.indexOf(nextShortestDate) !== -1 && nextShortestDate > newStartDate) {
    // 计算区间结束日期（当前起始日期前一天）
    var endDate = new Date(nextShortestDate);
    endDate.setDate(endDate.getDate() - 1);
    newEndDate = endDate.toISOString().substring(0, 10);

    console.log("New start date: " + newStartDate);
    console.log("New end date: " + newEndDate);
    if (newEndDate) {
      // 手动查找对应Occupation
      var occupation = null;
      for (var k = 0; k < occupationJson.Occupation.length; k++) {
        var occItem = occupationJson.Occupation[k];
        if (newStartDate >= occItem.startDate && newEndDate <= occItem.endDate) {
          occupation = occItem;
          break;
        }
      }

      // 手动查找对应Tenure
      var tenure = null;
      for (var l = 0; l < tenureJson.Tenure.length; l++) {
        var tenItem = tenureJson.Tenure[l];
        if (newStartDate >= tenItem.startDate && newEndDate <= tenItem.endDate) {
          tenure = tenItem;
          break;
        }
      }

      var dataItem = {
        "startDate": newStartDate,
        "endDate": newEndDate,
        "Occupation": occupation ? occupation.value : "",
        "Tenure": tenure ? tenure.value : ""
      };

      // 过滤空数据
      if (!(dataItem.Occupation === "" && dataItem.Tenure === "")) {
        result.data.push(dataItem);
      }

    }

    // 更新下一个区间的起始日期
    var startDate = new Date(newEndDate);
    startDate.setDate(startDate.getDate() + 1);
    newStartDate = startDate.toISOString().substring(0, 10);
  } else if (nextShortestDate > newStartDate) {
    // 直接将当前日期设为区间结束日期
    newEndDate = nextShortestDate;

    console.log("New start date: " + newStartDate);
    console.log("New end date: " + newEndDate);
    if (newEndDate) {
      // 手动查找对应Occupation
      var occupation = null;
      for (var m = 0; m < occupationJson.Occupation.length; m++) {
        var occItem = occupationJson.Occupation[m];
        if (newStartDate >= occItem.startDate && newEndDate <= occItem.endDate) {
          occupation = occItem;
          break;
        }
      }

      // 手动查找对应Tenure
      var tenure = null;
      for (var n = 0; n < tenureJson.Tenure.length; n++) {
        var tenItem = tenureJson.Tenure[n];
        if (newStartDate >= tenItem.startDate && newEndDate <= tenItem.endDate) {
          tenure = tenItem;
          break;
        }
      }

      var dataItem = {
        "startDate": newStartDate,
        "endDate": newEndDate,
        "Occupation": occupation ? occupation.value : "",
        "Tenure": tenure ? tenure.value : ""
      };

      // 过滤空数据
      if (!(dataItem.Occupation === "" && dataItem.Tenure === "")) {
        result.data.push(dataItem);
      }
    }

    // 更新下一个区间的起始日期
    var startDate = new Date(newEndDate);
    startDate.setDate(startDate.getDate() + 1);
    newStartDate = startDate.toISOString().substring(0, 10);
  }

}

console.log(result);

验证说明 #

迁移后的代码完全保留原ES6代码的业务逻辑，在仅支持ES5的环境中运行可生成包含10个元素的目标数组，与原代码输出结果完全一致。

内容的提问来源于stack exchange，提问作者Lakshay Verma