Resumo de todos os novos recursos do JavaScript ECMAScript 6

Já se passaram oito anos desde que o ECMAScript lançou oficialmente o ES6 em 2015. Desde 2015, uma nova versão será lançada em junho de cada ano, com o ano da época como o número da versão.

Muitos novos recursos apareceram nessas diversas versões. Para facilitar a memória, organizei todos os novos recursos neste artigo.

ps: Algumas informações dizem que todas as versões posteriores ao ES2015 são chamadas coletivamente de ES6, e algumas dizem que ES6 significa ES2015, ES7 significa ES2016 e assim por diante, o que não será discutido aqui.

ES2015 (ES6)

ES2015 é a versão com maiores mudanças Basicamente todo o conteúdo anterior ao ES2015 foi expandido, conforme mostrado na figura a seguir:

let, palavras-chave const e escopo em nível de bloco

Antes do ES6, havia apenas uma maneira de declarar variáveis, que era usar a palavra-chave var . No ES2015, let e const foram adicionadas para declarar variáveis ​​e constantes

. segue:

// Variável de declaração let v = 100
v = 200
// Declara constante const V = 200
// Modifica constantes // V = ​​300 // Relata erros

ou constantes declaradas usando let e const têm escopo em nível de bloco

O código de exemplo é o seguinte:

{
  var v = 100
}
{
  seja val = 200
}
console.log(v)
console.log(val) // Erro val não definido

É importante notar que variáveis ​​declaradas usando let ou const não possuem características de promoção de variável e existe uma zona morta temporária.

A extensão da função

permite que funções usem valores padrão no ES2015. O código de exemplo é o seguinte:

// Antes do es2015 function foo(v) {.
  v = v ?
  retornar v
}
//es2015
barra de funções (v = 100) {
  retornar v
}

Vale ressaltar que se houver vários parâmetros, os parâmetros padrão deverão ser usados ​​de trás para frente .

Funções de seta são adicionadas no ES2015, que são uma forma abreviada de funções . O código de exemplo é o seguinte:

function foo(v) {.
  retornar v``
}
// A função de seta é escrita const foo = (v) => {
  retornar v
}
// abreviatura 1
const foo = v => { // Apenas um parâmetro pode omitir os parênteses return v
}
// abreviatura 2
const foo = v => v // Você pode omitir return e chaves quando houver apenas return na instrução.

É importante notar que this da função de seta é determinado com base no contexto de execução e this é vinculado internamente. .

Ao usar funções de seta, não há nenhum objeto de argumentos internos, mas os parâmetros restantes são usados.

O código de exemplo é o seguinte:

const foo = (...args) => {.
  // console.log(argumentos) // ReferenceError: argumentos não estão definidos
  console.log(args) //args é um array}
foo(1, 2, 3, 4) // [1, 2, 3, 4]

O atributo name adicionado à função no ES2015 aponta para o nome da função.

O código de exemplo é o seguinte:

function foo(v) {
  retornar v
}
barra constante = v => v
console.log(foo.nome) //foo
console.log(bar.name) //Extensão do

valor

A expansão do valor no ES2015 adiciona principalmente alguns métodos aos objetos Math e Number , bem como métodos de representação binários e octais.

No ES2015, 0b ou 0B é usado para representar binário e 0o ou 0O é usado para representar octal.

O código de exemplo é o seguinte:

console.log(0b111111111 === 511) // true
console.log(0o777 === 511) //

Os atributos e métodos estendidos por true para Number são os seguintes:

O método para extensão Math é o seguinte:

extensão de string

ES2015 introduz strings de modelo, definidas usando marcas de crase (`). A string do modelo manterá o formato e variáveis ​​podem ser usadas.

O código de exemplo é o seguinte:

// Use ` para definir a string do modelo let str = `a bowl of week`.
// A string do modelo pode manter o formato let str2 = `A bowl ofweeks`
// A string do modelo pode usar a variável const myName = 'A bowl of week'
let str3 = `author: ${myName}` // Use ${} para encapsular

ES2015 também estende alguns métodos para instâncias String e String, como segue:

A extensão do

array fornece um operador de expansão no ES2015, ou seja..., usado em um array para expandir o array. e separe-o com vírgulas,

exemplo de código como segue:

const arr = [1, 2, 3, 4, 5, 6]

Copie

o array console.log(Math.max.call(null, ...arr)) // Use cada item do array como parâmetro.

fornece uma série de métodos, que serão introduzidos um por um:

Array.from() : Crie um objeto semelhante a um array ou um objeto iterável como um novo array . O código de exemplo é o seguinte:

function foo() {.
  return Array.from(arguments) // Converte argumentos em array}

console.log(foo(1, 2, 3, 4, 5, 6)) // [ 1, 2, 3, 4, 5, 6 ]

Array.of() : Crie um novo array com um número variável de argumentos Exemplo , o código de amostra é o seguinte:

Array.of(1) // [1]
Array.of(true, 1, 'A bowl of week') // [true, 1, 'A bowl of week']

Array.prototype.copyWithin(), copia superficialmente parte do array para outro local no mesmo array e retorná-lo não altera o comprimento da matriz original.

O código de exemplo é o seguinte:

const arr = [1, 2, 3, 4]

// Comece no índice 2 e copie o conteúdo para o índice 0 no final arr.copyWithin(0, 2) // [ 3, 4, 3, 4 ]

Array.prototype.find() , de acordo com a função de retorno de chamada fornecida, encontre o primeiro elemento correspondente e retorne indefinido se não for encontrado . O código de exemplo é o seguinte:

const arr = [1, 2, 3, 4]
arr.find(item => item === 2) // 2 (indicando o elemento),

Array.prototype.findIndex() , de acordo com a função de retorno de chamada fornecida, encontre o índice do primeiro elemento correspondente, retorne se não for encontrado - 1 , o código de exemplo é o seguinte:

const arr = [1, 2, 3, 4]
arr.findIndex(item => item === 2) // 1 (indica o índice)

Array.prototype.fill() , preenche o array com o valor fornecido . O código de exemplo é o seguinte:

const arr = [1, 2. , 3, 4 ]
//Preenche o índice 1-3 com o valor fornecido
arr.fill('uma tigela de semanas', 1, 3) // [ 1, 'uma tigela de semanas', 'uma tigela de semanas', 4 ]

Array.prototype.keys() , retorna um objeto iterável cujo conteúdo é a chave do array , o código de exemplo é o seguinte:

const arr = [1, true, 'A bowl of week']
teclas const = arr.keys()
for (const i de chaves) {
  console.log(i) // Resultados da travessia 0 1 2
}

Array.prototype.values() , retorna um objeto iterável cujo conteúdo é o valor do array .

O código de exemplo é o seguinte:

const arr = [1, true, 'A bowl of Zhou'].
valores const = arr.values()
for (const i de valores) {
  console.log(i) // Resultado da travessia 1 true Uma tigela de semanas}

Array.prototype.entries() , retorna um objeto iterável cujo conteúdo é um array O índice 0 é o elemento do array original e 1 é o elemento. do array original O valor da posição,

o código de exemplo é o seguinte:

const arr = [1, true, 'A bowl of week']

iterador const = arr.entries()
console.log(Array.from(iterator)) // [ [ 0, 1 ], [ 1, true ], [ 2, 'A bowl of week' ] ]

A extensão do objeto

no ES2015 permite o nome do atributo do objeto e valor do atributo para ser consistente Você pode simplesmente escrever o nome do atributo.

O código de exemplo é o seguinte:

const myName = 'A bowl of week'.
idade constante = 18
const pessoa = {meuNome, idade}
console.log(person) // { myName: 'A bowl of Zhou', age: 18 }

Além disso, ao definir um objeto, você pode usar [] expressões agrupadas como nomes de atributos.

const meuNome = 'Uma semana de tigela'
idade constante = 18
const pessoa = {
  o meu nome,
  ['a' + 'g' + 'e']: idade,
}
console.log(person) // { myName: 'One Bowl Zhou', age: 18 }

Object.is() : usado para comparar se dois valores são iguais, usado para resolver NaN ≠= NaN, +0 === - 0 problema,

o código de exemplo é o seguinte:

console.log(NaN === NaN) // false
console.log(+0 === -0) // verdadeiro

console.log(Object.is(NaN, NaN)) // verdadeiro
console.log(Object.is(+0, -0)) // false

Object.assign() : Copia os valores de todas as propriedades enumeráveis ​​de um ou mais objetos de origem para o objeto de destino e retorna o objeto de destino,

exemplo O código é o seguinte:

const person = Object.assign({}, { name: 'One Bowl Zhou' }, { age: 18 })
console.log(person) // {name: 'One Bowl Zhou', age: 18 }

• Object.getPrototypeOf() : Obtenha o objeto protótipo ;
• Object.setPrototypeOf() : Defina o objeto protótipo .

As classes

apresentam o conceito de classes no ES2015 e as classes estão disponíveis no nível da sintaxe. O código de exemplo é o seguinte:

class Person {.
  construtor(idade) {
    //Atributo this.myName = 'Uma tigela de semanas'
    esta.idade = idade
  }
  //Método estático static print() {
    console.log()
  }
  //Acessor obtém meuNome() {
    console.log('getter')
    retornar 'uma tigela de semanas'
  }
  definir meuNome(v) {
    console.log('setter' + v)
  }
  setNome(v) {
    este.meuNome = v
  }
}
const pessoa = nova Pessoa(18)
person.setName('ywanzhou') // Aciona o acessador setter console.log(person.myName) // Aciona o acessador getter

Modularity

propôs a especificação de modularização ESModel no ES2015, que é a primeira especificação de modularização de nível oficial, neste. especificação, podemos usar export para exportar módulos e import para introduzir módulos.

O código de exemplo é o seguinte:

import a from 'm' // Importe a exportação padrão no módulo m e nomeie-a como a.
import a, { b } from 'm' // Importa a exportação padrão no módulo m e importa separadamente o membro b
import * as A from 'm' // Importa todos os membros no módulo import 'm' // Executa m module export const b = 1 // Exporta separadamente export default b // Exportação padrão export { b } // Exporta sob demanda export { b as bb } // Renomeie e exporte export { b } from 'm' // Importa o membro b no módulo m e exporta

atribuição de desestruturação.

ES2015 adicionou uma nova sintaxe para atribuição de desestruturação, que nos permite usar certos padrões em. arrays. Ou extraia o valor especificado do objeto.

O código de exemplo é o seguinte:

// Desestruturação da atribuição do array let [name, age, hobby = 'coding' /* Valor padrão da atribuição da estrutura */] = ['A Bowl de Zhou', 18]
//Troque os valores das duas variáveis ​​deixe a = 1
seja b = 2
;[a, ​​​​b] = [b, a]
console.log(a,b) // 2 1

// Atribuição de estrutura de objeto let { name: ObjName /* Atribuição de desestruturação rename*/, sex } = { name: 'A bowl of week', sex: 1 }

// Desestruturação da atribuição de parâmetros de função function bar({ name, age }) {
  retornar nome + idade
}
bar({ name: 'A bowl of week', age: 18 }) // Uma tigela de semanas 18

Símbolo Símbolo

é um novo tipo de dados no ES2015. Ele é criado através Symbol() e pode passar uma string como um. parâmetro Usado para descrever o Símbolo;

valores

dos símbolos criados por meio do método Symbol() são todos exclusivos.

 * Sintaxe * Símbolo([descrição])
 * * description -> é uma informação de descrição opcional */
//Cria um valor do tipo Symbol const mySymbol = Symbol()
console.log(meuSímbolo) // Símbolo()

const meuNome = Símbolo('Uma tigela de semanas')
console.log(typeof myName) // símbolo O

símbolo também possui uma série de propriedades e métodos que não serão apresentados aqui.

Promise

Promise é uma solução assíncrona fornecida no ES2015, que resolve o problema do inferno de retorno de chamada.

Um objeto de promessa pode ser criado através Promise() . Cada objeto Promise possui os seguintes estados:

• pendente: estado inicial, nem estado de sucesso nem de falha.
• resolvido: significa que a operação foi concluída com sucesso.
• rejeitado: significa que a operação falhou.

Existem apenas dois tipos de troca de estado, a saber:

• pendente → resolvido
• pendente → resolvido

. Uma vez que o estado muda, ele não mudará novamente.

Existe um método then na instância Promise , que nos permite encadear chamadas na instância Promise Each. then o método também possui uma instância Promise que será retornada,

conforme mostrado na figura abaixo:

O código de exemplo é o seguinte:

new Promise((resolve, rejeitar) => {
    console.log('Eu sou o log da primeira promessa')
    resolver()
})
    .então(() => {
        console.log('Eu sou o log primeiro então')
    })
    .então(() => {
        console.log('Eu sou o log do segundo então, mas tenho uma exceção')
        lançar novo erro('Erro')
    })
    .então(() => {
        console.log('Sou o log do primeiro callback do terceiro então, mas não vou executá-lo porque ocorreu uma exceção acima de mim')
    }, () => {
        console.log('Eu sou o log do segundo retorno de chamada no terceiro então, eu executei')
    })
    .então(() => {
        console.log('Eu sou o log do quarto então posso executar normalmente')
    })

/* O resultado da execução é o seguinte: Eu sou o log da primeira Promise
Eu sou o log no primeiro então

Eu

sou o log do segundo retorno de chamada no terceiro então eu sou o log no quarto então.

os métodos do Promise são os seguintes:

• Promise.prototype.then() : Requer no máximo dois parâmetros: a função de retorno de chamada de sucesso e falha do Promise;
• Promise.all()
• Promise.prototype.catch() : igual ao segundo parâmetro do método then ;
• Promise.all() : empacota várias instâncias em uma nova instância, retorna a matriz de resultados após todas as alterações de status da instância (altera todas as alterações e depois retorna)
• Promise.race() : empacota várias instâncias em uma nova instância, retorna o status de todas as instâncias Prioriza o resultado alterado (altere primeiro e retorne primeiro)
• Promise.resolve() : Converta o objeto em um objeto Promise (equivalente a new Promise(resolve => resolve()) )
• Promise.reject() : Converta o objeto para um estado de rejected Objeto de promessa (equivalente a new Promise((resolve, reject) => reject()) )

Iterador

Iterador é um iterador. É uma interface que fornece um mecanismo de acesso unificado para várias estruturas de dados. estrutura implanta a interface de iteração, ela pode ser percorrida de forma unificada.

A estrutura de dados que implementa a interface iterável geralmente se implementa ou herda o atributo Symbol.iterator e é um objeto iterável. A própria propriedade Symbol.iterator é uma função, que é a função de geração de iterador padrão da estrutura de dados atual.

Um objeto que contém o método next() pode ser chamado de objeto iterável. O objeto next() retornará um objeto contendo dois valores,

conforme mostrado abaixo:

• value : qualquer valor JavaScript retornado pelo iterador. Pode ser omitido quando done for true .
• done : um valor booleano quando for false , significa que a iteração não foi interrompida. Quando for true , ele interrompe o iterador imediatamente e o valor de value pode ser omitido.

A interface do iterador fornecida nativamente por JavaScript é mostrada na figura abaixo:

Agora implementamos um iterador para obj, o código é o seguinte:

const obj = {
    [Símbolo.iterador] () {
        retornar {
            próximo () {
                console.log('Iterador executado');
                retornar {
                    valor: '',
                    done: true // Sinaliza se acabou, true significa que acabou}
            }
        }
    }
}

Adicionamos um print no método next() Para verificar se o iterador foi executado, o resultado final da execução é que

o iterador foi executado.

Gerador

é uma solução de programação assíncrona fornecida no ES2015. a palavra-chave function Use um asterisco * entre o nome da função e o nome da função e use a palavra-chave yield dentro da função para definir estados diferentes.

O código de exemplo é o seguinte:

function* testGenerator() {
  // rendimento define um rendimento estadual 'uma tigela de semanas'
  produz 'esnovos recursos'
  return 'generator' // Termina o gerador, mesmo que haja uma palavra-chave yield posteriormente, ela será inválida}
const g = testGenerator() // Retorna o objeto Generator e move o estado através do método next() g.next()
/* { valor: 'Uma tigela de Zhou', pronto: false } */

g.próximo()
/* { valor: 'es novos recursos', concluído: false } */

g.próximo()
/* { value: 'generator', done: true } */

Proxy e Reeffect

Os objetos proxy são usados ​​para criar um objeto proxy para implementar a interceptação e customização de operações básicas. Existem 13 operações básicas, conforme mostrado na tabela a seguir:

Vue3 é escrito com base em Proxy . O código a seguir mostra o uso de objetos Proxy :

<!DOCTYPE html>.
<html lang="pt">
<cabeça>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="largura=largura do dispositivo, escala inicial=1,0" />
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" />
  <title>Atualizar dom automaticamente através do set</title>
</head>

<corpo>
  <p class="card" style="largura: 300px; margem: 100px automático">
    <p class="corpo-cartão">
      <h1 id="nome"></h1>
      <button id="btn" class="btn btn-primary">Modificar</button>
    </p>
  </p>
  <roteiro>
    // Obtém o nó DOM const name = document.getElementById('name')
    const btn = document.getElementById('btn')
    //Defina uma função que modifique o valor const updateDOM = (el, value) => {
      el.innerHTML = valor
    }
    const pessoa = novo Proxy({
      nome: 'Uma tigela de mingau',
    }, {
      set(alvo, propKey, valor) {
        //Se o valor dentro mudar, chama nosso updateDOM
        updateDOM(nome, valor)
        alvo[propKey] = valor
        retornar verdadeiro
      },
    })
    nome.innerHTML = pessoa.nome
    // Clique no botão para acionar a operação de modificação btn.addEventListener('click', () => {
      person.name === 'Uma Tigela de Zhou'?
        (person.name = 'Uma tigela de mingau'):
        (person.name = 'One Bowl Zhou')
    })
  </script>
</body>
</html>

O código acima usa o método set para vinculação de dados. Se o objeto for alterado, nosso DOM será atualizado automaticamente.

Reflect é um objeto fornecido handlers ECMAScript2015. Ele fornece alguns métodos estáticos para interceptar operações JavaScript.

Reflect não é um construtor, o que significa que não pode ser instanciado.

Cada operação de interceptação no objeto Proxy (por exemplo: get , delete , etc.) chama internamente o método Reflect de acordo. Os métodos estáticos que ele fornece são consistentes com os nomes dos métodos nos handlers no Proxy,

como segue:

Set, Map, WeakSet, WeakMap

Set , Map , WeakSet e WeakMap são vários novos objetos no ES2015:

mais

• Set WeakSet eles são conjuntos. A diferença entre os dois é que Set pode armazenar qualquer tipo de dados, enquanto WeakSet só pode armazenar referências a objetos, e são referências fracas.

Definir objetos no desenvolvimento real é implementar a desduplicação de dados. O código de exemplo é o seguinte:

const arr = [1, 2, 2, 3, 4, 3, 5].
conjunto const = novo conjunto (arr)
// O objeto set pode ser usado... para expandir todos os itens console.log([...set]) // [ 1, 2, 3, 4, 5 ]

• Map e WeakMap são semelhantes a objetos e são armazenados em a forma dos pares chave-valor Sim, a diferença entre os dois é que os pares chave-valor do Map podem ser arbitrários, enquanto as chaves do WeakMap devem ser referências a objetos e os valores podem ser de qualquer tipo.

ES2016 (ES7)

ES2016 lança relativamente poucos recursos novos, principalmente dois novos recursos, conforme mostrado na figura abaixo:

O operador expoente

ES2016 possui um novo expoente ** , também chamado de operador de potência, que tem a mesma função que Math.pow().

O código de exemplo é o seguinte:

console.log(2 ** 10 === Math.pow). (2, 10)) // true

O método Array.prototype.includes()

adiciona o método includes() ao protótipo do array no ES2016. Este método é usado para determinar se um array contém um valor especificado e retorna um valor booleano

. o código de exemplo é o seguinte:

const arr = [1, 2, 3, 4, 5, NaN]
console.log(arr.indexOf(NaN)) // -1
console.log(arr.includes(NaN)) // true

É importante notar que NaN e NaN , +0 e -0 são iguais ao usar includes() .

ES2017(ES8)

açúcar de sintaxe async/await

Promise resolva o problema do inferno de retorno de chamada, se houver muitas chamadas em cadeia, a legibilidade ainda piorará. O novo açúcar de sintaxe async/await no ES2017 resolve esse problema.

A promessa é escrita da seguinte forma:

;(function () {
  promessa de função (v) {
    retornar nova Promessa((resolver, rejeitar) => {
      resolver (v)
    })
  }
  const p = promessa (1)
  p.então(res => {
    promessa de devolução(res)
  }).então(res => {
    console.log(res)
  })
})()

Se a próxima Promise depender da anterior, esta cadeia de chamadas será muito longa. Agora vamos reescrevê-la usando açúcar sintático async/await:

;(async function () {.
  promessa de função (v) {
    retornar nova Promessa((resolver, rejeitar) => {
      resolver (v)
    })
  }
  const r1 = aguarda promessa (1)
  const r2 = aguarda promessa (r1)
  const res = aguarda promessa (r2)
  console.log(res)
})()

Como você pode ver, podemos usar açúcar sintático async/await para reescrever Promise em um método de escrita simples.

O objeto Atomics

ES2017 adiciona um novo objeto Atomics. Este objeto fornece uma série de métodos estáticos para operar objetos SharedArrayBuffer e ArrayBuffer. Este objeto não pode ser instanciado usando a new palavra-

chave

. estendido para Object no ES2017, como segue:

• Object.values() : Retorna uma matriz de todos os valores de propriedades enumeráveis ​​de um determinado objeto em si;
• Object.entries() : Retorna uma matriz de todos os valores de propriedades enumeráveis ​​de um determinado objeto; objeto em si. Uma matriz de pares de valores-chave para propriedades enumeradas;
• Object.getOwnPropertyDescriptors() : Retorna os descritores de propriedades de todas as propriedades próprias de um determinado objeto.

A expansão da função

no ES2017 nos permite adicionar uma vírgula no final da lista de parâmetros da função. Este pequeno recurso é muito útil, porque apenas uma linha de código precisa ser alterada ao atualizar a vírgula final. duas linhas de código precisam ser alteradas.

O código de exemplo é o seguinte:

function fun(
  aaaaa,
  bbbbb,
  ccccc,
) {}

Se houver uma vírgula no final, você só precisa adicionar uma linha no final; se não existir, você precisa adicionar a vírgula no final e depois adicionar uma linha. Isso altera duas linhas no gerenciamento de versões, não uma.

A expansão de string

adiciona dois novos métodos de instância para strings no ES2017, que são:

:

;

• padStart()
• padEnd() : preenche espaços no final da string;

= 'Uma tigela de Zhou'
console.log(str.padStart(10)) /* Uma tigela de Zhou*/
console.log(str.padEnd(10)) /* Yiwan Zhou*/

ES2018(ES9)

A iteração assíncrona

tem uma nova instrução for await...of no ES2018, que pode ser usada para percorrer objetos iteráveis ​​assíncronos.

O código de exemplo é o seguinte:

var asyncIterable = {.
  [Symbol.asyncIterator]() {
    retornar {
      eu: 0,
      próximo() {
        se (este.i <3) {
          retornar Promise.resolve({valor: this.i++, concluído: false })
        }

        retornar Promise.resolve({feito: verdadeiro})
      },
    }
  },
}
;(função assíncrona () {
  para aguardar (número de asyncIterable) {
    console.log(num)
  }
})()

//0
//1
// 2

Extensões de expressões regulares

No ES2018, as seguintes extensões são feitas para expressões regulares:

Nomeação de grupos de expressões regulares:

Antes do ES2018, não podíamos nomear os grupos em expressões regulares. Este recurso foi introduzido no ES2018. referência,

o código de exemplo é o seguinte:

const RE_DATE = /(?<year>d{4})-(?<month>d{2})-(?<day>d {2})/

const matchObj = RE_DATE.exec('2022-02-22')
const ano = matchObj.groups.year // 2022
const mês = matchObj.groups.month // 02
const day = matchObj.groups.day //

Modificador de 22 s/modo dotALl: ​​O novo modificador s permite o . Corresponde a qualquer caractere único, e o atributo **** indica se a modificação " s " deve ser usada junto no símbolo da expressão regular. .

Asserções reversas: existiam apenas asserções diretas antes do ES2018, enquanto asserções reversas e asserções negativas reversas foram adicionadas no ES2018.

Operador de propagação de objeto

Um novo operador de propagação de array foi adicionado no ES2015, este recurso foi adicionado ao objeto. O código de exemplo é o seguinte:

const n = {name: 'One Bowl of Zhou' }.
const a = {idade: 18}
const pessoa = { ...n, ...a }
// Mesclar objeto console.log(person) // { name: 'A Bowl of Zhou', age: 18 }

Promise.prototype.finally()

finally() retornará um objeto Promise quando o estado da promessa. alterações, seja se for rejected ou fulfilled , finally() será executado.

O código de exemplo é o seguinte:

fetch(url)
  .então(res => {
    console.log(res)
  })
  .catch(erro => {
    console.log(erro)
  })
  .finalmente(() => {
    console.log('fim')
  })

ES2019(ES10)

A otimização

otimizou os dois conteúdos a seguir no ES2019:

try

• Function.prototype.toString()
• catch try...catch catch na instrução não permite parâmetros.

{
  console.log('Uma tigela de semanas')
} pegar {
  console.error('Uma tigela de semanas')
}

trimStart()/trimLeft() e trimEnd()/trimRight()

• String.prototype.trimStart : usado para remover espaços no lado esquerdo da string
• String.prototype.trimLeft : é um alias de trimStart
• String.prototype.trimEnd : usado Remove os espaços no lado direito da string;
• String.prototype.trimRight : trimEnd

uma extensão do array de alias

. Dois métodos de array são estendidos no ES2019, a saber:

• Array.prototype.flat() : Este. O método seguirá um especificável percorrer profundamente recursivamente a matriz e mesclar todos os elementos com os elementos da submatriz percorrida em uma nova matriz e retorná-la, simplesmente falando, é para obter o nivelamento da matriz;

const arr = [0, 1, 2, [3, 4]]
console.log(arr.flat()) // [ 0, 1, 2, 3, 4 ]

• Array.prototype.flatMap() : Este método mapeia e nivela o array e retorna um novo array (apenas um nível de array pode ser expandido).

Object.fromEntries()

ES2019

.

Object.fromEntries() a operação reversa do método Object.entries() .

= {
  nome: 'Uma Tigela de Zhou',
  idade: '18',
}
const e = Object.entries(pessoa)

const p = Object.fromEntries(e)
console.log(p) // { name: 'A bowl of week', age: '18' }

Symbol.prototype.descrption

description é uma propriedade somente leitura que retorna a string de descrição opcional ao criar o objeto Symbol .

ES2020(ES11)

A modularização

adiciona importação dinâmica no ES2020, o que significa que o módulo será carregado quando precisarmos dele. Isso pode reduzir a sobrecarga e o tempo de carregamento da página:

import('/modules/my-module.js'). então(módulo => {
  // Faça algo com o módulo.
})

A importação dinâmica usa import() , que retorna uma promessa.

No ES2020, um meta também é adicionado ao import , que expõe um objeto de atributos de metadados específicos do contexto ao módulo JavaScript.

tipo de dados BigInt

BigInt resolve o problema de que o número máximo permitido em JavaScript é 2**53-1 .

const theBiggestInt = 9007199254740991n;
const tambémHuge = BigInt(9007199254740991);
// ↪ 9007199254740991n
const enormeString = BigInt("9007199254740991");
// ↪ 9007199254740991n
const enormeHex = BigInt("0x1ffffffffffff");
// ↪ 9007199254740991n
const enormeBin = BigInt("0b1111111111111111111111111111111111111111111111111");
// ↪ 9007199254740991n

globalThis objeto

introduzido

GlobalThis globalThis , que é a introdução de objetos globais. O objeto global no Node é Global e o ambiente do navegador é Window ;

var getGlobal=função(){ 
  if (typeof self! == 'indefinido') { return self } 
  if (typeof window! == 'indefinido') { return window }; 
  if (typeof global! == 'indefinido') {retornar global}; 
  throw new Error('não foi possível localizar o objeto global'); 
}; 

var globais = getGlobal(); 

if (typeof globals.setTimeout! == 'função') { 
  // não há setTimeout neste ambiente! 
}

// depois de if (typeof globalThis.setTimeout !== 'function') {
  // não há setTimeout neste ambiente!
}

Operador de coalescência de valor nulo

O operador de coalescência de valor nulo é representado por dois pontos de interrogação. Esse operador também é um operador lógico, que é semelhante ao operador lógico OR. A regra de cálculo é que, enquanto o operando esquerdo for null ou undefined , o operando direito será retornado, caso contrário, o operando esquerdo será retornado. O lógico ou operador retorna apenas o operando direito se o operando esquerdo for convertido em tipo boolean e for false .

O código de amostra é o seguinte:

console.log (null ?? 10) // 10
console.log (indefinido ?? 10) // 10
Console.log (FALSO ?? 10) // FALSO

útil

para atribuir valores a variáveis ​​sem valores

O código é o seguinte:

VAL VAR

// Se o valor do valor não for nulo ou indefinido, atribua um valor de 10
Valor = valor ?? 10
Console.Log (Valor) // 10It

Vale a pena notar () o Valor Null Coalescante Operador e lógico e lógico ou não pode ser usado ao mesmo tempo, caso contrário, uma exceção será lançada.

Operador de cadeia opcional

O operador de cadeia opcional é usado para ler o valor de um atributo profundamente na cadeia de um objeto. Atributo Aab , Aab precisamos garantir Aa A .

undefind o operador de cadeia opcional não causará esse problema.

var a = {}

console

de erro.log (aa? .b) // O

operador de cadeia opcional indefinido também pode ser usado para chamar métodos em objetos.

// Se o método obj.fun () existir, ele será chamado diretamente abaixo.

obj.fun

?

Promise.allSettled()

ES2021 (ES12)

String.Prototype.Replaceall ()

método

replaceAll() retorna uma nova string.

const Newstr = str.replaceall ('mingau', 'semana')

(

Newstr) // Uma tigela de

separadores numéricos

_

1_0000_0000

WeakRef

// O símbolo 1000000

a

leitura.

referência a outro objeto.

Promise.any ()

O método New Promise.any() em ES2021 aceita os mesmos parâmetros que Promise.any() promise.all() (Ou seja, todas as promessas falham/rejeitam), uma promessa falhada e uma instância do tipo agregateError são retornadas.

Operadores de atribuição lógica

Alguns novos operadores de atribuição foram adicionados no ES2021, como segue:

• &&=
• ||=
• ??=

De

fato, é consistente com os operadores de atribuição ordinária.

] = [verdadeiro, falso]
f1 && = 'uma tigela de semanas' // equivalente a str = str && 'uma tigela de semanas'
f2 || = 'Uma tigela de semanas' // equivalente a str = str || 'uma tigela de semanas'

semanas

' // equivalente a str = str?

A extensão da classe

sem

defini -los no constructor no ES2022.

  myname = 'uma tigela de zhou'
}
/* Ambos são consistentes*/
classe C {
  construtor() {
    myname = 'uma tigela de zhou'
  }
}

Se um membro for declarado sem inicialização, seu valor padrão será indefinido.

No ES2022, podemos usar variáveis ​​nomeadas, começando com # como membros privados da

classe

.

  #myname = 'One Bowl Week'
}
const C = novo C ()
Console.log (#Myname) // Private Field '#Myname' deve ser declarado em uma classe anexa

aguarda é usada no nível superior

await O nível superior sem usar a função async

.
aguarda
console.log (123)

objeto.Hasown ()

método

Object.hasOwn() é usado para determinar se um objeto possui um determinado atributo.

  Nome: 'Uma tigela de zhou',
  idade: 18,
}
console.log (object.hasown (pessoa, 'nome')) // true
console.log (object.Hasown (Pessoa, 'sexo')) // false

Array.prototype.at ()

O novo método at() em ES2022, sua função é obter um membro da matriz e seus parâmetros é o índice

da

matriz.

6]
console.log (arr.at (-1)) // 6
// Equivalente a ARR [ARR.Length - 1]

D Modificador

Expressão regular adiciona modificador A /d Ao usar o método exec() da expressão regular, se houver modificador A /d , o resultado será retornado mais um índices Atributo usado para indicar o valor do índice inicial do resultado correspondente na sequência original.

O código de amostra é o seguinte:

const str = 'javascript'
const r = /a /d

const m = r.exec (str)
Console.Log (M.Indices [0]) // [1, 2]

foi escrito no final

.

O mapa mental é o seguinte: