ES6 объекта Literal Unferment: упростите операции объекта JavaScript

] литеральные характеристики улучшенного объекта, представленные ES6, значительно упрощают обработку объектов в JavaScript, в основном отраженные в сокращенных именах атрибутов, сокращенных именах методов и вычисленных имен атрибутов.

Сокращенные имена атрибутов делают определения атрибутов более краткие; Сокращенные имена методов упрощают синтаксис определения метода; В то время как рассчитанные имена атрибутов разрешают динамическое создание имен атрибутов на основе значений переменных.

улучшенные объектные литералы могут использоваться в сочетании с другими функциями ES6, такими как функции стрел, шаблонные литералы и деконструированные задания для написания более кратких и простых для чтения.

Следует отметить, что улучшенные литералы объектов не совместимы со всеми более старыми браузерами, но вы можете использовать переводчик, такой как Babel для преобразования кода ES6 в код ES5 для решения проблем совместимости.

В этой статье исследуются возможности литералов объектов JavaScript, особенно улучшения, принесенные недавними обновлениями ECMASCRIPT. Создание объектов JavaScript с использованием буквальных обозначений очень мощное. Новые функции, представленные в ES2015 (ES6), делают обработку объектов более удобной во всех современных браузерах (кроме IE) и Node.js. На некоторых языках, если класс должен быть объявлен до создания объекта, он увеличивает стоимость времени разработки и мощности обработки. А в JavaScript объекты могут быть созданы динамически легко. Например:

// ES5 兼容代码
var myObject = {
  prop1: 'hello',
  prop2: 'world',
  output: function() {
    console.log(this.prop1   ' '   this.prop2);
  }
};

myObject.output(); // hello world

во многих случаях используются одноразовые объекты, такие как настройки конфигурации, определения модулей, параметры метода, возвратные значения функции и т. Д. ES2015 (ES6) добавляет диапазон функций для улучшения литералов объектов.

инициализировать объект из variable

атрибуты объектов обычно создаются переменными с тем же именем. Например:

// ES5 代码
var a = 1, b = 2, c = 3;
var obj = {
  a: a,
  b: b,
  c: c
};

// obj.a = 1, obj.b = 2, obj.c = 3

не требуется повторения в ES6!

// ES6 代码
const a = 1, b = 2, c = 3;
const obj = { a, b, c };

// obj.a = 1, obj.b = 2, obj.c = 3

это полезно при возвращении объектов с использованием показателя модуля (эффективно пространства имен для кода, чтобы избежать конфликтов именования). Например:

// ES6 代码
const lib = (() => {
  function sum(a, b) { return a   b; }
  function mult(a, b) { return a * b; }
  return { sum, mult };
})();

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

, возможно, вы видели аналогичные использования в модуле ES6:

// lib.js
function sum(a, b) { return a   b; }
function mult(a, b) { return a * b; }
export { sum, mult };

определение метода объекта Abbreviation

Методы объекта в ES5 требуют объявлений функций. Например:

// ES5 代码
var lib = {
  sum: function(a, b) { return a   b; },
  mult: function(a, b) { return a * b; }
};

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

больше не требуется в ES6, можно использовать следующий синтаксис аббревиатуры:

// ES6 代码
const lib = {
  sum(a, b) { return a   b; },
  mult(a, b) { return a * b; }
};

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

Функция стрелки ES6 => синтаксис не может использоваться здесь, потому что метод требует имени. То есть, если вы назовите каждый метод напрямую (аналогично ES5), вы можете использовать функцию стрелки. Например:

// ES6 代码
const lib = {
  sum: (a, b) => a   b,
  mult: (a, b) => a * b
};

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

динамический ключ атрибута

в ES5 переменные не могут использоваться в качестве имен ключей, хотя его можно добавить после создания объекта . Например:

// ES5 代码
var key1 = 'one';
var obj = { two: 2, three: 3 };
obj[key1] = 1;

// obj.one = 1, obj.two = 2, obj.three = 3

ES6 может динамически назначать ключи объектов, размещая выражения в Square Crackets ] . Например:

// ES6 代码
const key1 = 'one';
const obj = { [key1]: 1, two: 2, three: 3 };

// obj.one = 1, obj.two = 2, obj.three = 3

Любое выражение может использоваться для создания ключа. Например:

// ES6 代码
const i = 1;
const obj = { ['i'   i]: i };
console.log(obj.i1); // 1

динамические ключи могут использоваться для методов и свойств. Например:

// ES6 代码
const i = 2;
const obj = { ['mult'   i]: x => x * i };
console.log(obj.mult2(5)); // 10

] будь то динамические свойства и методы, являются еще одним вопросом. Код может быть трудно читать, лучше создать объект завод или класс.

(Следующее содержание будет кратко суммировано из -за ограничений пространства, и основные точки будут сохранены)

deconstruction (получить переменные из свойств объекта)

Deconstruction ES6 упрощает процесс извлечения значений атрибутов из объектов в переменные.

Параметры функции по умолчанию

ES6 Параметры по умолчанию и деконструкция объединяются, чтобы упростить обработку параметров функции, особенно при обработке необязательных параметров.

es2018 (es9) rest/artrubute

ES2018 оператор REST/FROST распространяется на объекты, что позволяет получить большую гибкость в обработке свойств объекта.

summary: Es6 Enhanced Leaturals Object не изменяют основной путь JavaScript, но сохраняет усилия по написанию кода и делает код более ясным и более кратким.

(Некоторое содержание часто задаваемых вопросов было опущено из -за ограничений пространства. При необходимости вы можете задать вопросы по конкретным вопросам.)