如何在ECMAScript 5（旧版JS）中实现映射操作处理字符串数组生成目标结构

前置说明 #

你提到已经提前提取了普通颜色值数组，我们假设该数组为commonColorList，数组索引与PANTONE色号索引一一对应，无对应普通颜色的位置请预先留空，代码中会自动替换为默认值"no color"。

完整实现代码 #

// 原始数据
var nameStrArr = ["{PANTONE Yellow C}  {PANTONE 364 C} {PANTONE 137 U} magenta black {PANTONE Reflex Blue C} cyan"];
var percentageStrArr = ["0.546829 6.88961 1.03087 0.135706 10.2713 1.98788 0.508267 17.6122"];
var surfaceStrArr = ["1033.87 13025.6 1948.99 256.568 19419 3758.33 960.938 33297.9"];
// 你提前提取好的普通颜色数组，此处为匹配你需求的示例值
var commonColorList = ["yellow", undefined, "magenta", "black", undefined, "blue", "cyan", undefined];

// 1. 拆分三类原始字符串为对应数组
// 提取所有符合格式的PANTONE色号
var pantoneList = nameStrArr[0].match(/\{PANTONE[^{}]+\}/g) || [];
// 拆分百分比、表面积数组，统一转为数值类型，不需要可删除map转换逻辑
var percentageList = percentageStrArr[0].split(/\s+/).map(function(item) {
  return parseFloat(item);
});
var surfaceList = surfaceStrArr[0].split(/\s+/).map(function(item) {
  return parseFloat(item);
});

// 2. 按索引配对生成结果
var result = [];
// 取几个数组的最小长度避免索引越界
var len = Math.min(pantoneList.length, percentageList.length, surfaceList.length, commonColorList.length);
for (var i = 0; i < len; i++) {
  // 如需数组格式的元素，替换为对应数组结构即可
  var colorItem = {
    pantone: pantoneList[i],
    color: commonColorList[i] || "no color",
    percentage: percentageList[i],
    surface: surfaceList[i]
  };
  result.push(colorItem);
}

console.log(result);

兼容说明 #

• 所有语法均为ES5标准，支持IE9及以上浏览器，以及所有支持ES5的旧版JS运行环境
• 未使用箭头函数、解构赋值、flatMap等ES6+特性
• 可根据实际需求调整输出元素的结构（对象/数组格式）

内容的提问来源于stack exchange，提问作者João Marcos