ES6 Aprimoramento literal do objeto: simplificar operações de objeto Javascript

As características literais de objeto aprimoradas introduzidas pelo ES6 simplificam significativamente o processamento de objetos no JavaScript, refletido principalmente nos nomes de atributos abreviados, nomes de métodos abreviados e nomes de atributos computados.

nomes de atributos abreviados tornam as definições de atributo mais concisas; Os nomes de métodos abreviados simplificam a sintaxe da definição do método; Enquanto os nomes de atributos calculados permitem a criação dinâmica de nomes de atributos com base em valores variáveis.

Os literais de objeto aprimorados podem ser usados ​​em conjunto com outros recursos ES6, como funções de seta, literais de modelo e tarefas desconstruídas para escrever mais conciso e fácil de ler.

deve -se notar que os literais de objeto aprimorados não são compatíveis com todos os navegadores mais antigos, mas você pode usar um tradutor como Babel para converter o código ES6 em código ES5 para resolver problemas de compatibilidade.

Este artigo explora as possibilidades dos literais de objeto JavaScript, especialmente as melhorias trazidas pelas atualizações recentes do ECMAScript. Criar objetos JavaScript usando a notação literal é muito poderosa. Novos recursos introduzidos no ES2015 (ES6) tornam o processamento de objetos mais conveniente em todos os navegadores modernos (exceto IE) e Node.JS. Em alguns idiomas, se uma classe deve ser declarada antes que um objeto seja criado, aumenta o custo do tempo de desenvolvimento e o poder de processamento. E no JavaScript, os objetos podem ser criados dinamicamente. Por exemplo:

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

myObject.output(); // hello world

Em muitos casos, objetos únicos são usados, como configurações de configuração, definições de módulo, parâmetros de método, valores de retorno da função etc. ES2015 (ES6) adiciona uma gama de recursos para aprimorar os literais de objetos.

inicialize objeto de variável

Os atributos dos objetos geralmente são criados por variáveis ​​com o mesmo nome. Por exemplo:

// 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

Nenhuma repetição é necessária no ES6!

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

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

Isso é útil ao retornar objetos usando o padrão de módulo revelador (e efetivamente namespaces para código para evitar conflitos de nomeação). Por exemplo:

// 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

você pode ter visto usos semelhantes no módulo ES6:

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

Método do objeto Definição abreviation

métodos de objeto no ES5 requerem declarações de função. Por exemplo:

// 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

não é mais necessário no ES6, a seguinte sintaxe da abreviatura pode ser usada:

// 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

A função ES6 Arrow => A sintaxe não pode ser usada aqui porque o método requer um nome. Ou seja, se você nomear cada método diretamente (semelhante ao ES5), poderá usar a função de seta. Por exemplo:

// 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

key de atributo dinâmico

No ES5, as variáveis ​​não podem ser usadas como nomes de chave, embora possam ser adicionados após a criação do objeto . Por exemplo:

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

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

ES6 pode atribuir dinamicamente as teclas de objeto colocando expressões em [ colchetes quadrados . Por exemplo:

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

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

Qualquer expressão pode ser usada para criar uma chave. Por exemplo:

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

As teclas dinâmicas podem ser usadas para métodos e propriedades. Por exemplo:

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

se as propriedades e métodos dinâmicos devem ser criados é outra pergunta. O código pode ser difícil de ler, é melhor criar uma fábrica ou classe de objetos.

(o conteúdo a seguir será resumido brevemente devido a limitações do espaço, e os pontos principais serão retidos)

desconstrução (obtenha variáveis ​​das propriedades do objeto)

ES6 A desconstrução simplifica o processo de extração de valores de atributo de objetos para variáveis.

parâmetros de função padrão

ES6 Parâmetros padrão e desconstrução combinam -se para simplificar o processamento de parâmetros da função, especialmente ao processar parâmetros opcionais.

es2018 (es9) atributo REST/SPASP

O operador REST/SPREP da ES2018 se estende aos objetos, permitindo mais flexibilidade no manuseio de propriedades do objeto.

resumo: ES6 Literais de objeto aprimorados não alteram a maneira principal de JavaScript funciona, mas economiza o esforço para escrever código e torna o código mais claro e mais conciso.

(algum conteúdo das perguntas frequentes foi omitido devido a limitações do espaço. Se necessário, você pode fazer perguntas para perguntas específicas.)