如何将数组中IMF字段从整数转为字符串以实现正常搜索？

核心问题原因 #

搜索时报错是因为整数类型没有match方法，手动将imf改为字符串后能正常搜索，但JSON.stringify(jsonData)会把整个数组转为JSON字符串，导致后续无法直接访问对象属性，出现未定义问题。下面提供两种解决方案：

方案一：批量转换IMF字段为字符串 #

可选择修改原数组，或生成新数组（不破坏原数据）：

1. 修改原数组（直接遍历更新） #

使用forEach遍历数组，将每个对象的imf字段转为字符串：

// 遍历数组，转换imf为字符串
jsonData.forEach(item => {
  // 仅当imf是数字时转换，避免重复操作
  if (typeof item.imf === 'number') {
    item.imf = item.imf.toString();
  }
});

2. 生成新数组（保留原数据） #

使用map创建新数组，复制原对象的所有字段并仅修改imf类型：

// 生成新数组，不修改原数据
const convertedData = jsonData.map(item => ({
  ...item, // 复制原对象的其他字段
  imf: typeof item.imf === 'number' ? item.imf.toString() : item.imf
}));

// 后续搜索使用convertedData即可
printData(convertedData);

方案二：不修改数据，优化搜索逻辑 #

无需转换字段类型，只需在搜索时将imf临时转为字符串再执行匹配：

// 不区分大小写搜索
function search(ev) {
  var key = ev.target.value;
  codesEl.innerText = null;
  
  printData(jsonData.filter(data => {
    var regex = new RegExp(key, "i");
    // 将数字类型的imf转为字符串后再匹配
    return data.imf.toString().match(regex) 
      || data.description.match(regex) 
      || data.group.match(regex) 
      || data.vendor.match(regex) 
      || data.vsn.match(regex);
  }));
}

完整可运行代码（已优化+中文注释） #

JavaScript 代码 #

var codesEl;
var jsonData = [
 {
            "imf": 6546,
            "description": "DEXTROSE-5%-INJ-250ML",
            "group": "C4PV",
            "vendor": "MEDLINE INDUSTRIES, INC. MSPV-NG",
            "vsn": "BHL2B0062QH"
        },
        {
            "imf": 6546,
            "description": "GLYCINE-1.5%-IRR-3000ML",
            "group": "A4PV",
            "vendor": "MEDLINE INDUSTRIES, INC. MSPV-NG",
            "vsn": "BHL2B7317"
        },
        {
            "imf": 6546,
            "description": "SET,GRAVITY,10 DROPS/ML",
            "group": "A4PV",
            "vendor": "MEDLINE INDUSTRIES, INC. MSPV-NG",
            "vsn": "IME42493EH"
        },
   {
            "imf": 465465,
            "description": "DEXTROSE-5%-INJ-250ML",
            "group": "C4PV",
            "vendor": "MEDLINE INDUSTRIES, INC. MSPV-NG",
            "vsn": "BHL2B0062QH"
        },
        {
            "imf": 1546,
            "description": "GLYCINE-1.5%-IRR-3000ML",
            "group": "A4PV",
            "vendor": "MEDLINE INDUSTRIES, INC. MSPV-NG",
            "vsn": "BHL2B7317"
        },
        {
            "imf": 2654,
            "description": "SET,GRAVITY,10 DROPS/ML",
            "group": "A4PV",
            "vendor": "MEDLINE INDUSTRIES, INC. MSPV-NG",
            "vsn": "IME42493EH"
        }
];

// 将数据打印到页面
function printData(Arr) {
  for(var i=0; i<Arr.length; i++) {
    codesEl.innerText += `\n IMF: ${Arr[i].imf} 描述: ${Arr[i].description} 分组: ${Arr[i].group} 供应商: ${Arr[i].vendor} 库存编号: ${Arr[i].vsn}`;
  }
}

// 不区分大小写搜索（优化版）
function search(ev) {
  var key = ev.target.value;
  codesEl.innerText = null;
  
  printData(jsonData.filter(data => {
    var regex = new RegExp(key, "i");
    // 临时转换imf为字符串，避免数字类型无match方法报错
    return data.imf.toString().match(regex) 
      || data.description.match(regex) 
      || data.group.match(regex) 
      || data.vendor.match(regex) 
      || data.vsn.match(regex);
  }));
}

window.onload = function() {
  codesEl = document.getElementById("codes");
  printData(jsonData);
}

HTML 代码 #

<input type="text" onkeyup="search(event)" placeholder="输入关键词搜索" />
<div>
  <span id="codes"></span>
</div>

内容的提问来源于stack exchange，提问作者Buddy Buie