React.js - правильный способ перебора объекта вместо Object.entries

Мне не нравится использовать Object.entries(object).map((key, i), потому что я узнал, что это экспериментальная технология ECMAScript 7, и я чувствую, что что-то может пойти не так на производстве. Есть ли альтернатива для обычного JavaScript?

У меня нет проблем со значениями имени, цены, описания, потому что я точно знаю, где они должны быть визуализированы, и я могу получить к ним доступ с помощью Population.key, но для характеристик мне нужно грамотно выделить объект и визуализировать как ключ, так и стоимость.

Я попытался использовать Object.keys(priceChars).map(function(key, i), но не понял, как отделить ключ от значения. Например, это была рендеринг "производительность 500", но мне нужно, чтобы слово производительности было в классе значков, а 500 - фактическое значение, которое будет отображаться.

Структура моего JSON

const Populate = {
  'name': "Product",
  'price': "1000",
  'description': "Product description",
  'characteristics': {
    'performance': '500',
    'pressure': '180',
    'engine': '4',
    'size': '860*730*1300',
    'weight': '420'
  }
}

И компонент

class PriceBlock extends Component {
  render() {
    const {priceName, priceDesc, priceVal, priceChars} = this.props;
    const characteristics = Object.entries(priceChars).map((key, i) => {
      return (
        <div className="price__icon-row" key={i}>
          <i className={'ico ico-' + key[0]}></i> <span>{key[1]}</span>
        </div>
      );
    });
    return (
      <div className="col-5 price__block">
        <div className="price__name">{priceName}</div>
        <div className="price__description">{priceDesc}</div>
        <div className="price__icons">
          {characteristics}
        </div>
        <div className={ managePriceClass(priceVal) }>{priceVal}</div>
      </div>
    );
  }
}

Ответы

Ответ 1

a = { 
  a: 1,
  b: 2,
  c: 3
}

Object.keys(a).map(function(keyName, keyIndex) {
  // use keyName to get current key name
  // and a[keyName] to get its value
})

Более новая версия, использующая функции деструктуризации и стрелок. Я бы использовал этот для нового кода:

a = { 
  a: 1,
  b: 2,
  c: 3
}

Object.entries(a).map(([key, value]) => {
    // Pretty straightforward - use key for the key and value for the value.
    // Just to clarify: unlike object destructuring, the parameter names don't matter here.
})