如何提取JS Fetch返回对象字符串的键与值并存入对应数组

你完全不需要先把返回结果序列化再做字符串匹配，直接在原生JS环境用内置方法就能实现，步骤如下：

核心逻辑 #

Fetch请求返回的JSON数据调用.json()方法解析后，会得到标准的JS对象，直接用Object自带的静态方法就能分别提取键和值：

• Object.keys(目标对象)：返回对象所有可枚举键组成的数组，也就是你要的双引号包裹的字符串集合
• Object.values(目标对象)：返回对象所有可枚举属性值组成的数组，也就是你要的数字集合

代码示例 #

完整Fetch流程参考 #

// 发起请求
fetch('你的接口请求地址')
  .then(response => response.json()) // 直接将响应体解析为JS对象，无需手动序列化
  .then(data => {
    // 提取字符串键数组
    const strArray = Object.keys(data)
    // 提取数字值数组
    const numArray = Object.values(data)
    // 如果需要嵌套数组格式，直接组合即可
    const nestedArray = [strArray, numArray]

    console.log(strArray) // 输出: ["Nurture", "Regrowth", "Music", "Blades", "Blunt"]
    console.log(numArray) // 输出: [43, 31, 37, 12, 1]
    console.log(nestedArray) // 输出: [["Nurture", "Regrowth", "Music", "Blades", "Blunt"], [43, 31, 37, 12, 1]]
  })

如果你已经拿到序列化后的JSON字符串 #

不要用正则做字符串匹配（容易因为转义字符、内容特殊格式匹配出错），先转成JS对象再按上面的逻辑处理即可：

const jsonString = '{"Nurture":43,"Regrowth":31,"Music":37,"Blades":12,"Blunt":1}'
const parsedData = JSON.parse(jsonString)
const strArray = Object.keys(parsedData)
const numArray = Object.values(parsedData)

内容的提问来源于stack exchange，提问作者William Pylyser