Novos recursos do JavaScript ES6

Modular

No ES6, a modularidade se torna um recurso padrão do JavaScript. A modularidade ES6 fornece uma maneira mais elegante e sustentável de organizar e gerenciar código JavaScript, o que pode efetivamente evitar poluição de variáveis ​​globais e conflitos de nomenclatura. Aqui estão alguns dos principais recursos da modularidade ES6:

1. Exportar:export Você pode exportar uma variável, função ou classe para um módulo através de palavras-chave para uso em outros módulos.

Por exemplo, o código a seguir exporta um quadrado de função como um módulo:

// module.js
export function square(x) {
    
    
  return x * x;
}

2. Importar: Você pode importar uma variável, função ou classe de outros módulos através de importpalavras-chave e utilizá-la no módulo atual.

Por exemplo, o código a seguir importa a função square do módulo module.js e a utiliza:

// app.js
import {
    
     square } from './module.js';

console.log(square(5)); // 25

3. Exportação padrão: uma variável, função ou classe pode export defaultser exportada como um módulo por padrão por meio de sintaxe.

Por exemplo, o código a seguir exporta uma adição de função como um módulo por padrão:

// module.js
export default function add(x, y) {
    
    
  return x + y;
}

4. Importação padrão: Uma variável, função ou classe pode importser importada por padrão de outros módulos através de sintaxe e usada no módulo atual.

Por exemplo, o código a seguir importa a função add do módulo module.js por padrão e a utiliza:

// app.js
import add from './module.js';

console.log(add(2, 3)); // 5

Resumindo, a modularidade ES6 fornece uma maneira mais flexível e sustentável de organizar e gerenciar código JavaScript, o que pode efetivamente evitar a poluição de variáveis ​​globais e conflitos de nomenclatura.

Classe classe

ES6 introduziu classpalavras-chave para fornecer uma maneira mais concisa e orientada a objetos de definir e usar objetos. classPode ser considerada uma função especial em JavaScript, que pode definir uma classe e criar instâncias da classe. Aqui estão classalguns dos principais recursos do ES6:

1. Definição de classe: use classpalavras-chave para definir uma classe.

Por exemplo, o código a seguir define uma classe chamada Person:

class Person {
    
    
  constructor(name, age) {
    
    
    this.name = name;
    this.age = age;
  }

  sayHello() {
    
    
    console.log(`Hello, my name is ${
      
      this.name}, I'm ${
      
      this.age} years old.`);
  }
}

2. Construtor: Use o método construtor para definir o construtor de uma classe.

Por exemplo, o código a seguir define um construtor para a classe Person:

class Person {
    
    
  constructor(name, age) {
    
    
    this.name = name;
    this.age = age;
  }
}

3. Métodos de classe: Use métodos de classe para definir métodos de uma classe.

Por exemplo, o código a seguir define um método sayHello da classe Person:

class Person {
    
    
  constructor(name, age) {
    
    
    this.name = name;
    this.age = age;
  }

  sayHello() {
    
    
    console.log(`Hello, my name is ${
      
      this.name}, I'm ${
      
      this.age} years old.`);
  }
}

4. Herança de classe: use a palavra-chave extends para implementar a herança de classe.

Por exemplo, o código a seguir define uma classe Student, que herda da classe Person:

class Person {
    
    
  constructor(name, age) {
    
    
    this.name = name;
    this.age = age;
  }

  sayHello() {
    
    
    console.log(`Hello, my name is ${
      
      this.name}, I'm ${
      
      this.age} years old.`);
  }
}

class Student extends Person {
    
    
  constructor(name, age, grade) {
    
    
    super(name, age);
    this.grade = grade;
  }

  study() {
    
    
    console.log(`${
      
      this.name} is studying in grade ${
      
      this.grade}.`);
  }
}

5. palavra-chave super: use a palavra-chave super para chamar o construtor e os métodos da classe pai.

Por exemplo, o código a seguir chama o construtor da classe Person usando a palavra-chave super:

class Student extends Person {
    
    
  constructor(name, age, grade) {
    
    
    super(name, age);
    this.grade = grade;
  }
}

Resumindo, ES6 classfornece uma maneira mais concisa e orientada a objetos de definir e usar objetos, o que pode simplificar bastante a escrita e manutenção de código JavaScript. Ao mesmo tempo, ES6 classtambém suporta recursos importantes de programação orientada a objetos, como herança e polimorfismo, tornando o código JavaScript mais flexível e escalável.

Símbolo

ES6 introduz um novo tipo de dados primitivo Symbol, que é um valor primitivo imutável que pode ser usado como um identificador exclusivo para as propriedades de um objeto. Cada Symbolvalor é único, eles não serão repetidos. SymbolÉ um tipo de dados semelhante a string, mas seu valor é único, imutável e não será convertido automaticamente para outros tipos.

Você pode usar Symbol()a função para criar um novo Symbolvalor, que pode aceitar uma sequência de descrição opcional como parâmetro para descrever a Symbolfinalidade do valor, mas essa sequência de descrição não Symbolafetará a exclusividade do valor.

Aqui estão Symbolalguns recursos de:

1. SymbolO valor pode ser usado como o nome do atributo do objeto. Como cada Symbolvalor é único, não haverá problemas de conflito de nomenclatura. Em literais de objeto, Symbolas propriedades podem ser definidas usando a sintaxe de colchetes.

const mySymbol = Symbol();
const obj = {
    
    
  [mySymbol]: 'value'
};

console.log(obj[mySymbol]); // 输出 'value'

2. SymbolOs valores não são convertidos automaticamente em strings e, portanto, não podem ser usados ​​como parte de nomes de propriedades de objetos, caso contrário, TypeErrorum erro será gerado.

const mySymbol = Symbol();
const obj = {
    
    };

// 正确做法：将 Symbol 作为属性名
obj[mySymbol] = 'value';

// 错误做法：将 Symbol 转换成字符串作为属性名
obj[mySymbol.toString()] = 'value'; // 抛出 TypeError 错误

3. Os valores integrados Symboltêm significados especiais, como Symbol.iterator, Symbol.hasInstanceetc., que são usados ​​para especificar o iterador padrão do objeto, instanceofcomportamento personalizado, etc.

const arr = [1, 2, 3];
const iter = arr[Symbol.iterator]();

console.log(iter.next()); // 输出 { value: 1, done: false }
console.log(iter.next()); // 输出 { value: 2, done: false }
console.log(iter.next()); // 输出 { value: 3, done: false }
console.log(iter.next()); // 输出 { value: undefined, done: true }

4. SymbolOs valores podem ser usados ​​como constantes para evitar conflitos de nomenclatura. Por exemplo, você pode usar um Symbolvalor como nome do evento para garantir que ele não entre em conflito com outros nomes de eventos.

const EVENT_A = Symbol('event_a');
const EVENT_B = Symbol('event_b');

// 发送事件 A
eventEmitter.emit(EVENT_A);

// 监听事件 B
eventEmitter.on(EVENT_B, () => {
    
    
  // do something
});

Resumindo, Symbolé um identificador exclusivo que pode ser usado como um nome de propriedade de objeto e pode ser usado para definir constantes, especificar iteradores padrão, etc. Seu surgimento torna a nomenclatura de nomes de propriedades de objetos em JavaScript mais flexível e rica.

função de seta

ES6 apresenta Arrow Functions como uma nova sintaxe de definição de função. As funções de seta têm alguma sintaxe e comportamento especiais em comparação com os métodos tradicionais de definição de função.

Os recursos são os seguintes:

1. Sintaxe concisa: As funções de seta =>são definidas usando setas ( ), omitindo functionpalavras-chave e colchetes no corpo da função. Se o corpo da função tiver apenas uma instrução, a palavra-chave return poderá ser omitida e o resultado da expressão será retornado implicitamente.

   // 传统函数定义
   function add(a, b) {
         
         
     return a + b;
   }
   
   // 箭头函数定义
   const add = (a, b) => a + b;
   

2. As funções de seta não possuem seus próprios this, arguments, superou new.target. Eles herdam os valores correspondentes do escopo externo. Isso significa que dentro da função de seta, thiso objeto de contexto apontado é o objeto de contexto quando a função é definida, não o objeto quando ela é chamada.

   const person = {
         
         
     name: 'John',
     sayHello: function () {
         
         
       setTimeout(() => {
         
         
         console.log(`Hello, ${
           
           this.name}!`);
       }, 1000);
     }
   };
   
   person.sayHello(); // 输出 "Hello, John!"
   

3. As funções de seta não podem ser usadas como construtores e newos objetos não podem ser instanciados usando palavras-chave. As funções de seta não possuem prototypepropriedades, portanto, newinstâncias de objetos não podem ser criadas usando palavras-chave.

   const Person = (name) => {
         
         
     this.name = name; // 错误：箭头函数不能用作构造函数
   };
   
   const john = new Person('John'); // 错误：无法使用new关键字实例化对象
   

4. Se a função de seta tiver apenas um parâmetro, você poderá omitir os parênteses do parâmetro; se não houver parâmetros ou vários parâmetros, será necessário usar parênteses.

   // 一个参数
   const greet = name => console.log(`Hello, ${
           
           name}!`);
   
   // 没有参数
   const sayHello = () => console.log('Hello!');
   
   // 多个参数
   const add = (a, b) => a + b;
   

As funções de seta simplificam a definição de funções em muitos cenários e são especialmente úteis no tratamento de funções de retorno de chamada, no tratamento de vinculação de contexto e na simplificação do aninhamento de funções. No entanto, existem diferenças entre as funções de seta e as funções tradicionais que precisam ser observadas, principalmente no thisseu comportamento ao lidar com o contexto.

Atribuição de desestruturação

A atribuição de desestruturação do ES6 é uma sintaxe conveniente para extrair valores de um array ou objeto e atribuí-los a variáveis. Ele nos permite escrever código de forma concisa e extrair rapidamente os valores necessários de estruturas de dados complexas.

A atribuição de desestruturação pode ser aplicada a matrizes e objetos.Os dois casos são explicados em detalhes abaixo:

1. Atribuição de desestruturação de array:

   A atribuição de desestruturação de array nos permite extrair valores de um array de acordo com um padrão específico e atribuí-los a variáveis. A correspondência de padrões é baseada na posição da matriz.

   const [a, b, ...rest] = [1, 2, 3, 4, 5];
   console.log(a); // 1
   console.log(b); // 2
   console.log(rest); // [3, 4, 5]
   

   No exemplo acima, usamos atribuição de desestruturação de array para [1, 2, 3, 4, 5]atribuir os valores do array às variáveis ​​e a, respectivamente . e recebe o primeiro e o segundo elementos do array respectivamente, enquanto recebe os elementos restantes como um novo array.brestabrest

2. Desestruturação e atribuição de objetos:

   A atribuição de desestruturação de objetos nos permite extrair valores de atributos do objeto e atribuí-los a variáveis, combinando por nome de atributo.

   const person = {
         
         
     name: 'Alice',
     age: 25,
     address: {
         
         
       city: 'New York',
       country: 'USA'
     }
   };
   
   const {
         
          name, age, address: {
         
          city, country } } = person;
   console.log(name); // 'Alice'
   console.log(age); // 25
   console.log(city); // 'New York'
   console.log(country); // 'USA'
   

   No exemplo acima , usamos atribuição de desestruturação de objeto personpara extrair as propriedades name, e do objeto e atribuí-las às variáveis ​​correspondentes.ageaddress.cityaddress.country

   Observe que dois pontos :podem ser usados ​​para especificar aliases para desestruturar propriedades atribuídas. No exemplo acima, person.addressatribuímos o valor de a uma variável addresse desconstruímos addressainda mais citye a partir dela country.

A desestruturação da atribuição também suporta valores padrão, estruturas aninhadas, ignorando certos elementos e outras funções, que podem ser usadas de forma flexível de acordo com necessidades específicas. Pode melhorar a legibilidade do código e a eficiência de gravação ao lidar com estruturas de dados complexas.

parâmetros de descanso

ES6 introduz o conceito de parâmetros restantes (parâmetros restantes), o que nos permite representar um número indefinido de parâmetros como um array. Nas declarações de função, os parâmetros restantes são representados por três pontos (...) seguidos por um nome de parâmetro. Isso facilita o manuseio de parâmetros extras passados ​​para a função.

A seguir está uma explicação detalhada de algumas características e uso dos parâmetros de descanso:

1. gramática:

   function functionName(...rest) {
         
         
     // 函数体
   }
   

   Na declaração da função, use ...resto formulário para definir os parâmetros restantes. resté uma matriz contendo todos os parâmetros adicionais passados ​​quando a função é chamada.

2. Tratamento de parâmetros redundantes:
   quando vários parâmetros são passados ​​quando uma função é chamada e apenas alguns parâmetros são definidos na declaração da função, os parâmetros redundantes serão capturados nos parâmetros restantes.

   function sum(...rest) {
         
         
     let total = 0;
     for (let num of rest) {
         
         
       total += num;
     }
     return total;
   }
   
   console.log(sum(1, 2, 3, 4, 5)); // 15
   

   No exemplo acima, sumhá apenas um parâmetro rest na lista de parâmetros da função rest, mas podemos passar qualquer número de parâmetros para suma função e restcalcular a soma iterando sobre o array no corpo da função.

3. O parâmetro rest é usado em combinação com outros parâmetros:
   Em uma declaração de função, o parâmetro rest pode coexistir com outros parâmetros, mas o parâmetro rest deve ser o último parâmetro.

   function foo(a, b, ...rest) {
         
         
     console.log(a); // 1
     console.log(b); // 2
     console.log(rest); // [3, 4, 5]
   }
   
   foo(1, 2, 3, 4, 5);
   

   No exemplo acima, ae bsão parâmetros comuns, restmas parâmetros restantes, que recebem parâmetros adicionais passados ​​para a função.

4. Aplicação de parâmetros de descanso:

   • Colete os parâmetros restantes: quando não tivermos certeza de quantos parâmetros serão passados ​​​​quando a função for chamada, podemos usar o parâmetro restante para coletar os parâmetros restantes para processamento no corpo da função.
   • Objeto de argumentos alternativos: os parâmetros restantes no ES6 são mais intuitivos e fáceis de usar. Em contraste, argumentso objeto é um objeto semelhante a um array, e o parâmetro restante é um array real, e vários métodos do array podem ser usados.
   • Flexibilidade de parâmetros de função: Ao usar parâmetros restantes, podemos declarar funções que recebem qualquer número de parâmetros sem especificar antecipadamente um número fixo de parâmetros.

Resumo: Os parâmetros restantes do ES6 nos fornecem uma maneira de lidar com um número indefinido de parâmetros, coletá-los em um array e operá-los no corpo da função. Torna a declaração de função mais flexível, tornando o tratamento de parâmetros redundantes mais conveniente e legível.

Definir/Mapa

ES6 introduz duas novas estruturas de dados, Sete , que fornecem uma maneira mais conveniente e eficiente de lidar com coletas de dados e pares de valores-chave.Map

1. Definir:

   • Conjunto é uma coleção de dados não ordenada e não repetitiva.
   • Os valores de seus membros são únicos e não serão repetidos.
   • Qualquer tipo de valor pode ser armazenado, incluindo valores primitivos e valores de referência.
   • Os elementos de um conjunto não são indexados e não podem ser acessados ​​por índice.
   • Os principais cenários de aplicação são para desduplicação e determinação da existência de um elemento.

   const set = new Set();
   set.add(1);
   set.add(2);
   set.add(3);
   set.add(2); // 添加重复元素，但不会生效
   
   console.log(set.size); // 3
   console.log(set.has(2)); // true
   
   set.delete(3);
   console.log(set.size); // 2
   
   set.clear();
   console.log(set.size); // 0
   

2. Mapa:

   • Mapa é uma coleção de pares chave-valor, semelhante a um objeto.
   • Suas chaves e valores podem ser qualquer tipo de dados, incluindo valores primitivos e valores de referência.
   • Os pares de valores-chave no Mapa são ordenados.
   • Você pode usar a chave para obter o valor correspondente.

   const map = new Map();
   const key1 = 'key1';
   const key2 = {
         
          name: 'John' };
   
   map.set(key1, 'value1');
   map.set(key2, 'value2');
   
   console.log(map.size); // 2
   console.log(map.get(key1)); // 'value1'
   
   map.delete(key2);
   console.log(map.size); // 1
   
   console.log(map.has(key2)); // false
   
   map.clear();
   console.log(map.size); // 0
   

   O Map também fornece métodos iteradores (Iterator), como keys(), values()e entries(), que podem ser usados ​​para percorrer as chaves, valores e pares de valores-chave do Map.

   const map = new Map();
   map.set('a', 1);
   map.set('b', 2);
   map.set('c', 3);
   
   for (let key of map.keys()) {
         
         
     console.log(key); // 'a', 'b', 'c'
   }
   
   for (let value of map.values()) {
         
         
     console.log(value); // 1, 2, 3
   }
   
   for (let [key, value] of map.entries()) {
         
         
     console.log(key, value); // 'a' 1, 'b' 2, 'c' 3
   }
   

   O mapa também pode aceitar um array como parâmetro para inicializar.

   const array = [['a', 1], ['b', 2], ['c', 3]];
   const map = new Map(array);
   
   console.log(map.get('a')); // 1
   

Set e Map fornecem métodos eficientes de processamento de dados e são adequados para cenários onde coleções e pares de valores-chave precisam ser gerenciados. Eles são projetados e utilizados de forma a tornar a operação mais intuitiva e eficiente, além de permitir melhor desempenho e escalabilidade. ## deixar/const

sequência de modelo

ES6 introduz strings de modelo (Template Strings), que fornece uma maneira mais conveniente e flexível de processar strings.

Uma string de modelo é uma string cercada por crases (`) e oferece suporte aos seguintes recursos:

1. Interpolação de strings:
   use ${}sintaxe para inserir variáveis ​​ou expressões em strings de modelo.

   const name = 'John';
   const age = 30;
   
   const message = `My name is ${
           
           name} and I'm ${
           
           age} years old.`;
   console.log(message); // "My name is John and I'm 30 years old."
   

   Internamente ${}pode ser qualquer expressão JavaScript, incluindo variáveis, chamadas de função, operadores, etc.

2. Strings multilinhas:
   as strings de modelo podem abranger várias linhas sem usar caracteres de escape ou operadores de concatenação.

   const multiline = `
     This is
     a multiline
     string.
   `;
   
   console.log(multiline);
   /*
     "This is
     a multiline
     string."
   */
   

   As strings multilinhas preservam o recuo e as novas linhas nas strings do modelo, tornando o código mais legível.

3. Strings de modelo aninhadas:
   outras strings de modelo podem ser aninhadas em strings de modelo para construir strings mais complexas.

   const name = 'John';
   const message = `Welcome to our website, ${
           
           name}!
   
   Today's special offer:
   Buy 1 get 1 free!
   Offer valid until ${
           
           new Date().toLocaleDateString()}.`;
   
   console.log(message);
   /*
     "Welcome to our website, John!
   
     Today's special offer:
     Buy 1 get 1 free!
     Offer valid until 5/11/2023."
   */
   

   No exemplo acima, ${name}aninhado na string do modelo externo, ${new Date().toLocaleDateString()}aninhado na string do modelo interno.

4. Strings brutas:
   prefixar uma string de modelo String.rawcria uma string bruta que não escapa de barras invertidas.

   const path = String.raw`C:\Users\John\Documents\file.txt`;
   console.log(path); // "C:\Users\John\Documents\file.txt"
   

   No exemplo acima, a barra invertida permanece inalterada na string original e não é escapada como um caractere especial.

As strings de modelo fornecem uma maneira mais intuitiva e conveniente de trabalhar com strings, especialmente quando você precisa inserir variáveis ​​ou criar texto complexo. Seu uso pode melhorar a legibilidade e a manutenção do código e reduzir as tediosas operações de concatenação e escape de strings.

operador de propagação

O operador spread (Operador Spread) no ES6 são três pontos consecutivos (...) usados ​​para espalhar objetos iteráveis ​​(como arrays, strings ou objetos semelhantes a array).

O operador spread tem os seguintes usos e recursos principais:

1. Expansão de array:
   O operador spread pode expandir um array em vários elementos independentes.

   const arr = [1, 2, 3];
   console.log(...arr); // 1 2 3
   

   Isso facilita a passagem de elementos de um array para uma função ou a mesclagem de vários arrays.

2. Expansão de string:
   O operador spread pode expandir uma string em caracteres individuais.

   const str = 'hello';
   console.log(...str); // "h" "e" "l" "l" "o"
   

   Isso é útil para operações que exigem processamento de strings caractere por caractere.

3. Expansão de objeto:
   o operador spread pode expandir um objeto em vários pares de valores-chave.

   const obj = {
         
          x: 1, y: 2 };
   console.log({
         
          ...obj }); // { x: 1, y: 2 }
   

   Isso pode ser usado para copiar objetos, mesclar objetos ou criar novos objetos.

4. Passagem de parâmetros ao chamar uma função:
   O operador spread pode passar elementos de um array ou objeto semelhante a um array como parâmetros da função.

   function sum(x, y, z) {
         
         
     return x + y + z;
   }
   
   const numbers = [1, 2, 3];
   console.log(sum(...numbers)); // 6
   

   Isso evita apply()o incômodo de usar ou desestruturar parâmetros manualmente.

5. Cópias superficiais de arrays e objetos:
   O operador spread pode ser usado para criar cópias superficiais de arrays e objetos.

   const arr = [1, 2, 3];
   const arrCopy = [...arr];
   
   const obj = {
         
          x: 1, y: 2 };
   const objCopy = {
         
          ...obj };
   

   Isso cria cópias dos arrays e objetos originais em vez de fazer referência aos mesmos dados.

O operador spread fornece uma maneira concisa e flexível de trabalhar com arrays, strings e objetos, tornando o código mais legível e de fácil manutenção. É muito útil em cenários como chamada de função, fusão de arrays e cópia de objetos, e pode simplificar bastante o código para operações relacionadas.

Iterador/Gerador

ES6 introduz os conceitos de iterador e gerador, que são usados ​​para processar objetos iteráveis ​​e funções que geram objetos iteráveis.

1. Iterador:
   Um iterador é um objeto que fornece uma maneira de acessar sequencialmente uma coleção de dados. Possui um next()método que retorna um objeto contendo valuepropriedades doneem cada chamada.

   • value: indica o valor atualmente retornado pelo iterador.
   • done: Indica se o iterador percorreu todos os elementos. Se sim, truesignifica que o iterador terminou, caso contrário false.

   Os iteradores podem ser implementados manualmente ou você pode usar os iteradores integrados fornecidos pelo ES6 para objetos iteráveis ​​(como arrays, strings, conjuntos, mapas, etc.).

   const arr = [1, 2, 3];
   const iterator = arr[Symbol.iterator]();
   
   console.log(iterator.next()); // { value: 1, done: false }
   console.log(iterator.next()); // { value: 2, done: false }
   console.log(iterator.next()); // { value: 3, done: false }
   console.log(iterator.next()); // { value: undefined, done: true }
   

2. Iterável:
   Um iterável é um objeto com um iterador, uma coleção de dados que pode ser iterada (percorrida). Objetos iteráveis ​​devem ter um Symbol.iteratormétodo nomeado que retorne um objeto iterador.

   Objetos iteráveis ​​integrados incluem arrays, strings, Sets, Maps, etc.

   const arr = [1, 2, 3];
   const str = 'hello';
   const set = new Set([1, 2, 3]);
   const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
   
   console.log(arr[Symbol.iterator]); // [Function: values]
   console.log(str[Symbol.iterator]); // [Function: [Symbol.iterator]]
   console.log(set[Symbol.iterator]); // [Function: values]
   console.log(map[Symbol.iterator]); // [Function: entries]
   

3. Gerador:
   Um gerador é uma função especial definida por meio de function*palavras-chave e usa yieldinstruções no corpo da função para pausar a execução da função e retornar um objeto iterador.

   A função geradora pode gerar valores gradativamente por meio de um iterador. Cada vez que o método da função geradora for chamado next(), a próxima instrução será executada yielde um objeto contendo atributos valuee doneserá retornado.

   function* generator() {
         
         
     yield 1;
     yield 2;
     yield 3;
   }
   
   const iterator = generator();
   
   console.log(iterator.next()); // { value: 1, done: false }
   console.log(iterator.next()); // { value: 2, done: false }
   console.log(iterator.next()); // { value: 3, done: false }
   console.log(iterator.next()); // { value: undefined, done: true }