javascript - 在javascript中嵌套对象数组

Question

我想在不改变原始数组的情况下将嵌套的对象数组简化为字符串数组，但是对象数组的国家/地区的值会发生变化。我将如何纠正，所以我将在 newCountries 中获得新的对象数组，并且对象数组的旧值不会被修改。即国家

const countries = {
  "country": [{
      "name": "India",
      "cities": [{
          "name": "Mumbai",
        },
        {
          "name": "Delhi",
        }
      ]
    },
    {
      "name": "Australia",
      "cities": [{
          "name": "Sydney",
        },
        {
          "name": "Melbourne",
        }
      ]
    }
  ]
}

// I have tried following code
var newCountries = Object.assign({}, countries);
newCountries.country.map(val => {
  if (val.cities) {
    var city = val.cities.map(city => {
      return city.name
    });
    val.cities = [];
    val.cities = city;
  }
  return val;
})

console.log('new object\n', newCountries)
console.log('old object\n', countries)

<b>output</b>
<pre>
{
  "country": [
   {
     "name": "India",
     "cities": [
       "Mumbai",
       "Delhi"
     ]
   },
   { 
     "name": "Australia",
     "cities": [
       "Sydney",
       "Melbourne"
     ]
   }
 ]
}
</pre>

标签： javascript

Answer 1

好吧，这是一项微不足道的任务。只需遍历每个国家，并通过将对象映射到“name”键的值，将一组新的城市名称分配给现有的。

你也可以试试这个，假设name是对象中唯一的键。

country.cities = country.cities.reduce((arr, city) => arr.concat(Object.values(city)), [])

您甚至可以使用以下方法进一步简化Array.prototype.flatMap：

country.cities = country.cities.flatMap(city => Object.values(city))

注意： flatMap在现代浏览器中是一个实验性功能。

• Chrome – 版本 69 (2018-09-04)
• 边缘 -没有
• Firefox – 版本 62 (2019-09-03)
• Internet Explorer –否
• Opera – 版本 56 (2018-09-25 → Chromium 69)
• Safari – 版本 12 (2018-09-17)

const countries = {
  "country": [{
    "name": "India",
    "cities": [{
      "name": "Mumbai",
    }, {
      "name": "Delhi",
    }]
  }, {
    "name": "Australia",
    "cities": [{
      "name": "Sydney",
    }, {
      "name": "Melbourne",
    }]
  }]
}

// Loop over each country
countries.country.forEach(country => {
  // Replace `{ name : "CITY_NAME" }` with just `"CITY_NAME"`
  country.cities = country.cities.map(city => city.name)
})

console.log(countries);

.as-console-wrapper { top: 0; max-height: 100% !important; }