如何使用ES6 spread operator遍历非数组JSON结构并获取指定英雄名称？

当然可以用ES6的扩展运算符（...）啦！不过因为你的JSON是嵌套结构（包含result和heroes层级），直接对顶层对象用扩展运算符肯定达不到遍历内部条目的效果——扩展运算符对对象来说只会展开它的直接属性，没法自动深入到嵌套的层级中。

先明确你的JSON结构（模拟） #

根据你的描述，你的JSON大概是类似这样的嵌套结构：

{
  "result": {
    "heroes": [
      {"name": "Anti-Mage", "otherProp": "xxx"},
      // 剩下114个英雄条目
    ]
  }
}

如何使用扩展运算符？ #

扩展运算符可以作用在可迭代对象（比如数组）或普通对象上，但你需要先穿透嵌套层级，定位到目标的heroes数组：

• 如果你想把heroes数组的元素复制到新数组里，可以这样用：

  const jsonData = /* 你的JSON数据 */;
  const allHeroes = [...jsonData.result.heroes]; // 复制整个英雄数组
  

• 如果你想结合解构赋值（和扩展运算符配套的常用写法）拆分数组，比如取出第一个英雄和剩下的所有英雄：

  const { result: { heroes } } = jsonData;
  const [firstHero, ...remainingHeroes] = heroes;
  // firstHero就是第一个条目（Anti-Mage），remainingHeroes是剩下的114个
  

输出首个条目（Anti-Mage）的名称 #

其实不需要复杂操作，定位到数组第一个元素直接访问即可，结合扩展运算符的解构写法会更优雅：

// 方式1：直接通过索引访问
console.log(jsonData.result.heroes[0].name);

// 方式2：用解构+扩展运算符
const { result: { heroes: [firstHero] } } = jsonData;
console.log(firstHero.name);

总结一下：扩展运算符完全适用于你的场景，但它本身不具备“自动遍历嵌套结构”的能力，你需要先手动访问到heroes这个数组层级，之后就能正常使用扩展运算符做各种操作啦。

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