Поддержка Babel для Object.entries

Я смотрю на предложение этапа 3 для Object.values ​​/ Object.entries и я бы очень хотел использовать его в моем текущем проекте JavaScript.

Однако я не могу понять, есть ли какой-нибудь пресет Babel, который его поддерживает. Поскольку репозиторий GitHub, указанный выше, говорит, что это предложение этапа 3, я предположил, что он будет частью babel-preset-stage-3, но, похоже, нет.

Есть ли какой-нибудь пресет (или даже плагин?) Babel, который позволяет мне использовать Object.entries сегодня?


javascript babeljs ecmascript-next
person damd    schedule 29.01.2016    source источник
comment
babeljs.io/docs/usage/polyfill, github.com/zloirock/core-js#ecmascript-7-proposals   -  person Felix Kling    schedule 29.01.2016
comment
@FelixKling: Спасибо, но боюсь, я действительно не знаю, что делать с информацией, которую вы связали!   -  person damd    schedule 29.01.2016
comment
Полифилл Babel просто использует core-js, но я не уверен, какие функции. Если вы просто хотите поддерживать Object.entries, просто загрузите для этого полифилл core-js.   -  person Felix Kling    schedule 29.01.2016
comment
@FelixKling: Я наконец понял, как им пользоваться! Пожалуйста, добавьте свой комментарий в качестве ответа, и я с радостью его приму! :)   -  person damd    schedule 29.01.2016

Ответы (4)


arrow_upward
33
arrow_downward

Использование babel, установка

  1. babel-preset-env
  2. babel-plugin-transform-runtime

обеспечивает поддержку _1 _ / _ 2_, а также других функций * ES20 **.

В соответствии с рекомендациями модулей настройте .babelrc следующим образом:

{
  "plugins": ["transform-runtime"],
  "presets": ["env"]
}
person psv    schedule 29.04.2016
comment
Я не вижу упоминания о поддержке Object.entries в babeljs.io/docs/plugins/preset-es2017. Была ли поддержка перенесена на другую предустановку? github.com/bettiolo/babel-preset-es2017/issues/37 Кажется, это подтверждает, что эта функция не предусмотрена предустановкой. - person Gili; 04.01.2017
comment
Я нацелился на браузер. В этом контексте вам необходимо использовать babeljs.io/docs/usage/polyfill. Не могли бы вы обновить ответ, чтобы указать, что пользователи должны делать для узла и браузера? - person Gili; 05.01.2017
comment
babel-polyfill на данный момент поддерживает Object.entries, при таргетинге на браузер вам просто нужно включить import "babel-polyfill"; в точку входа в ваше приложение (корневой index.js) - person Niveditha Karmegam; 13.06.2018
comment
babel-preset-es2017 теперь устарел, используйте вместо этого babel-preset-env - person Nati Lara-Diaz; 05.07.2019

arrow_upward
14
arrow_downward

Я установил core-js, а затем просто вызвал это в верхней части файла:

require('core-js/fn/object/entries');

Это сделало Object.entries доступным. Кредиты для @FelixKling.

Обновить

В core-js @ 3 путь импорта изменился:

require('core-js/features/object/entries');
person damd    schedule 13.02.2016

arrow_upward
6
arrow_downward

Обновление:

Как отмечено в комментариях, вы можете повысить производительность, используя функцию map вместо reduce.

Обратите внимание, что код чувствителен к регистру (object != Object).

// Object.values

var objectToValuesPolyfill = function(object) {
    return Object
             .keys(object)
             .map(
                  function(key) {
                    return object[key];
                  }
              );
}

Object.values = Object.values || objectToValuesPolyfill;

// Object.entries

var objectToEntriesPolyfill = function(object) {
    return Object
             .keys(object)
             .map(
                  function(key) {
                    return [key, object[key]];
                  }
              );
}

Object.entries = Object.entries || objectToEntriesPolyfill;

Использование:

// es6

Object.values = Object.values || (x => Object.keys(x).map(k => x[k]));
Object.entries = Object.entries || (x => Object.keys(x).map(k => [k, x[k]]));

// es5

Object.values = Object.values || function(x){ 
    return Object.keys(x).map(function(k){ 
        return x[k];
    })
};

Object.entries = Object.values || function(x){ 
    return Object.keys(x).map(function(k){ 
        return [k, x[k]];
    })
};


const a = {
  key: "value",
  bool: true,
  num: 123
}

console.log(
  Object.values(a)
)

console.log(
  Object.entries(a)
)

person Randy    schedule 26.05.2016
comment
Фактически вы можете использовать здесь map вместо reduce, что немного проще: .map(key => object[key]) (где object - ваш x). Кроме того, я предполагаю, что вы стремитесь к производительности, а не к удобочитаемости, задавая переменные однобуквенные имена, но поскольку это образовательный ответ, я бы предложил использовать логические имена и добавить комментарий об их сокращении для повышения производительности. - person ArneHugo; 17.03.2017

arrow_upward
0
arrow_downward

Еще одно альтернативное решение, которое я нашел в конце 2020 года, работает для IE11.

npm install --save-dev babel-plugin-transform-es2017-object-entries

а затем добавьте в package.json

"babel": {
    "plugins": [
        "transform-es2017-object-entries"
    ]
}
person elfan    schedule 24.12.2020