Como uma criança que gosta de digitar código à mão, acho que o código deveria ser digitado por mim mesmo para memorizá-lo melhor, então hoje irei apresentar os recursos do ES6 ~ ES12. Se você tem pontos cegos no uso do ES, ou não sabe muito sobre os novos recursos , acredito que este artigo deve poder te ajudar muito bem ~
Para entender melhor, explicaremos no modo caso , então para ter um melhor entendimento e, ao mesmo tempo, o case também suporta depuração no modo de desenvolvedor, espero que você possa apoiá-lo ~
ECMAScript é uma linguagem de programação de script padronizada pela Ecma International (anteriormente Associação Europeia de Fabricantes de Computadores) através da ECMA -262. Também pode-se dizer que existem apenas duas versões de JavaScript como padrão
no mundo dos programadores: ES5
e ES6
. Diz-se que o ES6 foi realmente lançado em 2015, que também é a época em que a grande era do front-end foi oficialmente lançada. iniciado. Ou seja, 2015 é usado como limite, antes de 2015 era chamado de ES5
e depois de 2016 é chamado coletivamente de ES6
Para obter informações sobre os recursos ES6
, você pode ler "Introdução aos padrões ES6". Professor Ruan Yifeng.
A diferença entre let, const e var:
Além disso, quando um objeto é declarado com const
, as propriedades do objeto podem ser alteradas, porque: obj declarado por const salva apenas o endereço de referência de seu. objeto.Enquanto o endereço permanecer inalterado, não haverá erro
...
para representar todos os restantesundefined
let [. uma, b, c] = [1, 2, 3] console.log(a, b, c) // 1 2 3 deixe [a, , c] = [1, 2, 3] console.log(a, , c) // 1 3 deixe [a, b, ...c] = [1, 2, 3, 4, 5] console.log(a, b, c) // 1 2 [3, 4, 5] deixe [a, b, ...c] = [1] console.log(a, b, c) // 1 indefinido [] deixe [a = 1, b = a] = [] const.log(a, b) // 1 1 deixe [a = 1, b = a] = [2] const.log(a, b) // 2 2
undefined
:
, outros Equivalente ao aliaslet { a, b } = { a: 1, b: 2 }; console.log(a,b); seja {a} = {b: 2}; console.log(a); seja {a, b = 2} = {a: 1}; console.log(a,b); seja {a:b = 2} = {a:1}; console.log(a); // A variável a não existe console.log(b); // 1
length
. , representando o númerolet [a, b, c, d, e] = "olá" console.log(a, b, c, d, e) // olá deixe {comprimento} = "olá" console.log(length) // 5
let { toString:s} = 123; console.log(s === Number.prototype.toString) // verdadeiro deixe { toString: s } = verdadeiro; console.log(s === Boolean.prototype.toString) // verdadeira
let arr = [[1,2], [3, 4]] deixe res = arr.map([a, b] => a + b) console.log(res) // [3, 7] deixe arr = [1, indefinido, 2] deixe res = arr.map((a = 'teste') => a); console.log(res) // [1, 'teste', 2] deixe func = ({x, y} = {x: 0, y: 0}) => { retornar[x, y] } console.log(func(1, 2)) // [indefinido, indefinido] console.log(func()) // [0, 0] console.log(func({})) // [indefinido, indefinido] console.log(func({x: 1})) // [1, indefinido] deixe func = ({x=0, y=0}) => { retornar[x, y] } console.log(func({x:1,y:2})) // [1, 2] console.log(func()) //erro console.log(func({})) // [0, 0] console.log(func({x: 1})) // [1, 0]A regularidade
é na verdade um ponto de conhecimento muito difícil de entender. Se alguém puder dominá-la totalmente, vamos simplificá-la. aqui Primeiro de tudo,
ele é dividido em dois estilos: JS分格
e perl 分格
JS: RegExp()
let re = new RegExp('a'); let re = new RegExp('a', 'i'); //O primeiro é o objeto de pesquisa, o segundo é a opção
estilo perl: / regra/opção, e pode ser seguido por vários, independente da ordem
let re = /a/; //Descubra se existe a em uma string let re = /a/i;//O primeiro é o objeto a ser pesquisado, o segundo é a opção
Aqui apresentamos um teste online de expressão regular (com expressões regulares comuns):
大括号包含
os caracteres Unicode//Unicode console.log("a", "u0061"); console.log("d", "u{4E25}"); // d estritamente let str = 'Domesy' //codePointAt() console.log(str.codePointAt(0)) // 68 //String.fromCharCode() console.log(String.fromCharCode(68)) //D //String.raw() console.log(String.raw`Oin${1 + 2}`); //Oin3 console.log(`Olán${1 + 2}`); deixe str = 'Domesy' //começaCom() console.log(str.startsWith("D")) // verdadeiro console.log(str.startsWith("s")) // falso //termina com() console.log(str.endsWith("y")) // verdadeiro console.log(str.endsWith("s")) // falso //repeat(): O parâmetro passado será automaticamente arredondado. Se for uma string, será convertido em um número console.log(str.repeat(2)) // DomesyDomesy. console.log(str.repeat(2.9)) // DomesyDomesy // Travessia: for-of for(deixe o código de str){ console.log(code) // Retorna D omesy uma vez } //inclui() console.log(str.includes("s")) // verdadeiro console.log(str.includes("a")) // falso //trimStart() const string = "Olá mundo!"; console.log(string.trimStart()); // "Olá mundo! " console.log(string.trimLeft()); // "Olá mundo! " //trimEnd() const string = "Olá mundo!"; console.log(string.trimEnd()); // "Olá mundo!" console.log(string.trimRight()); // "Olá, mundo!"
let str = `Dome sim' console.log(str) //Quebrará linhas automaticamente //Dome //
const str = { nome: 'Pequeno Dudu', info: 'Olá a todos' } console.log(`${str.info}, sou `${str.name}`) // Olá a todos, sou Xiao Dudu
let arr = [.
1, 2, 3, 4, 5] //Array.of() deixe arr1 = Array.of(1, 2, 3); console.log(arr1) // [1, 2, 3] //copyWithin(): três parâmetros (target, start = 0, end = this.length) // target: a posição do alvo // start: a posição inicial, que pode ser omitida e pode ser um número negativo. // fim: posição final, pode ser omitido, pode ser um número negativo, a posição real é fim-1. console.log(arr.copyWithin(0, 3, 5)) // [4, 5, 3, 4, 5] //encontrar() console.log(arr.find((item) => item > 3 )) // 4 //encontrarÍndice() console.log(arr.findIndex((item) => item > 3 )) // 3 //chaves() for (deixe o índice de arr.keys()) { console.log(index); // Retorna 0 1 2 3 4 de cada vez } //valores() for (deixe o índice de arr.values()) { console.log(index); // Retorna 1 2 3 4 5 de cada vez } // entradas() for (deixe o índice de arr.entries()) { console.log(index); // Retorna [0, 1] [1, 2] [2, 3] [3, 4] [4, 5] uma vez } deixe arr = [1, 2, 3, 4, 5] // Array.from(): A travessia pode ser um pseudo array, como String, Set Structure, Node node let arr1 = Array.from([1, 3, 5], (item) => { item de retorno * 2; }) console.log(arr1) // [2, 6, 10] // fill(): três parâmetros (target, start = 0, end = this.length) // target: a posição do alvo // start: a posição inicial, que pode ser omitida e pode ser um número negativo. // fim: posição final, pode ser omitido, pode ser um número negativo, a posição real é fim-1. console.log(arr.fill(7)) // [7, 7, 7, 7, 7] console.log(arr.fill(7, 1, 3)) // [1, 7, 7, 4, 5] deixe arr = [1, 2, 3, 4] //inclui() console.log(arr.includes(3)) // verdadeiro console.log([1, 2, NaN].includes(NaN)); // verdadeiros
// Sua função é expandir o array let arr = [3, 4, 5] console.log(...arr) // 3 4 5 deixe arr1 = [1, 2, ...arr] console.log(...arr1) // 1 2 3 4 5
for-in
//Object.is() console.log(Object.is('abc', 'abc')) // verdadeiro console.log(Object.is([], [])) // falso //Traverse: for-in deixe obj = {nome: 'Domesy', valor: 'Reagir' } for(deixe digitar obj){ console.log(key); // Retorna o valor do nome do atributo por sua vez console.log(obj[key]); // Retorna os valores dos atributos em sequência Domesy React } //Object.keys() console.log(Object.keys(obj)) // ['nome', 'valor'] //Object.assign() const alvo = {a: 1, b: 2}; fonte const = {b: 4, c: 5}; resultado const = Object.assign (destino, origem) console.log(resultado) // {a: 1, b: 4, c: 5} console.log(target) // {a: 1, b: 4, c: 5}
deixe a = 1; seja b = 2; seja obj = {a,b} console.log(obj) // { a: 1, b: 2 } deixe método = { olá() { console.log('olá') } } console.log(method.hello()) //
let a = "b" deixe obj = { [a]: "c" } console.log(obj) // {b : "c"}
// Sua função é expandir o array let { a , b , ...c } = { a: 1, b: 2, c: 3, d: 4}; console.log(c) // {c: 3, d: 4} deixe obj1 = {c: 3} deixe obj = {a: 1, b: 2, ...obj1} console.log(obj) // {a: 1, b: 2, c: 3}Binário
0b
ou 0B
, indicando00
ou 0O
, indicando binário正数为1
,负数为-1
,正零0
,负零-0
, NaN
parseInt
parseFloat
//Binary console.log(0b101) // 5 console.log(0o151) //105 //Número.isFinite() console.log(Number.isFinite(7)); console.log(Number.isFinite(true)); //Número.isNaN() console.log(Number.isNaN(NaN)); console.log(Number.isNaN("true" / 0)); console.log(Number.isNaN(true)); //Número.isInteger() console.log(Number.isInteger(17)); console.log(Number.isInteger(17.58)); //Número.isSafeInteger() console.log(Number.isSafeInteger(3)); console.log(Number.isSafeInteger(3.0)); console.log(Number.isSafeInteger("3")); console.log(Number.isSafeInteger(3.1)); //Math.trunc() console.log(Math.trunc(13.71)); console.log(Math.trunc(0)); console.log(Math.trunc(true)); console.log(Math.trunc(false)); //Math.sign() console.log(Math.sign(3)); console.log(Math.sign(-3)); console.log(Math.sign(0)); console.log(Math.sign(-0)); console.log(Math.sign(NaN)); console.log(Math.sign(true)); console.log(Math.sign(falso)); //Math.abrt() console.log(Math.cbrt(8)); //Número.parseInt() console.log(Number.parseInt("6.71")); console.log(parseInt("6.71")); //Número.parseFloat() console.log(Number.parseFloat("6.71@")); console.log(parseFloat("6.71@"));
//O parâmetro recebe um valor específico por padrão. função divertida(x, y = x){ console.log(x,y) } função fun1(c, y = x){ console.log(c,x,y) } divertido(2); fun1(1); //1 1 1
function fun(...arg){ console.log(arg) // [1, 2, 3, 4] }
fun(1, 2, 3, 4)
let arrow = (v) => v + 2 console.log(arrow(1)) // 3
A diferença entre funções de seta e funções comuns
. mas o valor do membro é único e não há
declarações de valor repetidas: const set = new Set()
Atributos:
Método:
especificamente Nota:
iterator
Na ordem de inserção,let list = new Set() //adicionar() lista.add("1") lista.add(1) console(lista) // Conjunto(2) {1, "1"} //tamanho console(lista.tamanho) // 2 //excluir() lista.delete("1") console(lista) // Conjunto(1) {1} //tem() lista.has(1) // verdadeiro lista.has(3) // falso //claro() lista.claro() console(lista) // Conjunto(0) {} deixe arr = [{id: 1}, {id: 2}, {id: 3}] deixe lista = novo conjunto (arr) //chaves() for (deixe a chave de list.keys()) { console.log(key); // Imprima isto: {id: 1} {id: 2} {id: 3} } //valores() for (deixe a chave de list.values()) { console.log(key); // Imprima isto: {id: 1} {id: 2} {id: 3} } //entradas() for (deixe os dados de list.entries()) { console.log(dados); // Imprima isto: [{id: 1},{id: 1}] [{id: 2},{id: 2}] [{id: 3},{id: 3 } ] } //forEach lista.forEach((item) => { console.log(item)//Imprima isto: {id: 1} {id: 2} {id: 3} });
Aplicação:
new Set
não pode remover objetos= [1,1,'true','true',true,true,15,15,false,false, undefined, indefinido, nulo,nulo, NaN, NaN,'NaN', 0, 0, 'a', 'a']; console.log([...novo conjunto(arr)]) //ou console.log(Array.from(new Set(arr))) // [1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, 'a']
let a = new Set([1, 2 , 3]) seja b = novo conjunto ([2, 3, 4]) //União console.log(new Set([...a, ...b])) // Set(4) {1, 2, 3, 4} //Interseção console.log(new Set([...a].filter(v => b.has(v)))) // Set(2) {2, 3} //Conjunto de diferenças new Set([...a].filter(v => !b.has(v))) // Set(1) {1}
let set = new Set([1,2, 3]) console.log(new Set([...set].map(v => v * 2))) // Set(3) {2, 4, 6}Definição
: A mesma estrutura de Set, mas o membro os valores são apenas Podem
ser declarados para o objeto: const set = new WeakSet()
Método WeakSet():
Nota:
: ⭐️⭐️
Mapa é uma nova estrutura de dados no ES6, que é um objeto semelhante. key é uma declaração de valor de qualquer tipo
: const map = new Map()
atributos:
Método:
Nota especial:
let map = new Map() //definir() mapa.set('a', 1) mapa.set('b', 2) console.log(mapa) // Mapa(2) {'a' => 1, 'b' => 2} //pegar map.get("a") // 1 //tamanho console.log(mapa.size) // 2 //excluir() map.delete("a") // verdadeiro console.log(mapa) // Mapa(1) {'b' => 2} //tem() map.has('b') // verdadeiro map.has(1) // falso //claro() mapa.clear() console.log(mapa) // Mapa(0) {} deixe arr = [["a", 1], ["b", 2], ["c", 3]] deixe mapa = novo mapa (arr) //chaves() for (deixe a chave de map.keys()) { console.log(chave); // Imprime isto: abc } //valores() for (deixe o valor de map.values()) { console.log(valor); // Imprima isto: 1 2 3 } //entradas() for (deixe os dados de map.entries()) { console.log(dados); // Imprima isto: ["a", 1] ["b", 2] ["c", 3] } //forEach map.forEach((item) => { console.log(item)//Imprima isto: 1 2 3 });Definição
: e estrutura do mapa, mas os valores dos membros só podem
ser declarados para objetos: const set = new WeakMap()
método:
Símbolo é um tipo de dados primitivo introduzido no ES6, que representa独一无二
: const sy = Stmbol()
Parâmetros: string (opcional)
Método:
Symbol值
descrito por parâmetros. este parâmetro existe, retorna o Symbol值
(pesquise primeiro e depois cria, Registrado no ambiente global)Symbol值
registrado (apenas key
de Symbol.for()
pode ser retornada)Symbol值
usados como nomes de propriedades no objeto// Declare let a = Symbol(); deixe b = Símbolo(); console.log(a === b); //Symbol.for() deixe c = Symbol.for("domesy"); deixe d = Símbolo.for("domesy"); console.log(c === d); //Symbol.keyFor() const e = Símbolo.for("1"); console.log(Symbol.keyFor(e)); //Símbolo.descrição deixe símbolo = Símbolo("es"); console.log(symbol.descrição); console.log(Symbol("es") === Símbolo("es")); console.log(símbolo === símbolo); // verdadeiro console.log(symbol.description === "es"); // true
Proxy é usado para modificar o comportamento padrão de certas operações, o que equivale a fazer alterações no nível da linguagem, portanto é uma espécie de "meta". programação" ), ou seja, a programação em uma linguagem de programação
pode ser entendida desta forma. Proxy é uma camada de拦截
definida antes do objeto alvo. O mundo exterior deve passar por essa camada de interceptação se quiser acessá-lo. Portanto, um mecanismo é fornecido para filtrar e filtrar o acesso do mundo exterior.
Proxy pode ser entendido aqui como代理器
declaração de proxy: const proxy = new Proxy(target, handler)
o método de interceptação:
let obj = { nome: 'domesy', horário: '2022-01-27', valor: 1 } deixe dados = novo Proxy(obj, { //pegar() get(alvo, chave){ retornar alvo[chave].replace("2022", '2015') }, //definir() set(alvo, chave, valor) { if (chave === "nome") { return (alvo[chave] = valor); } outro { retornar alvo[chave]; } }, // tem() has(alvo, chave) { if (chave === "nome") { retornar alvo[chave]; } outro { retornar falso; } }, //deletePropriedade() deleteProperty(destino, chave) { if (key.indexOf("_") > -1) { excluir alvo[chave]; retornar verdadeiro; } outro { retornar alvo[chave]; } }, //própriasChaves() ownKeys(alvo) { return Object.keys(target).filter((item) => item!= "hora"); }, }) console.log(data.time) // 27/01/2015 dados.tempo = '2020' data.name = 'Reagir' console.log(data) //Proxy {nome: 'React', hora: '2022-01-27', valor: 1} //Interceptação has() console.log("nome" em dados) // verdadeiro console.log("tempo" em dados) // falso //Exclui deleteProperty() excluir dados.time; // verdadeiro // Percorrer ownKeys() console.log(Object.keys(dados)); //['nome', 'valor'] //aplicar() deixe soma = (...args) => { seja num = 0; args.forEach((item) => { num += item; }); retornar num; }; soma = novo proxy(soma, { aplicar(alvo, ctx, args) { retornar alvo(...args) * 2; }, }); console.log(soma(1, 2)); console.log(soma.call(null, 1, 2, 3)); console.log(sum.apply(null, [1, 2, 3])); //construtor() deixe Usuário = classe { construtor(nome) { este.nome = nome; } } Usuário = novo proxy(Usuário, { construir(alvo, args, novoTarget) { retornar novo alvo(...args); }, }); console.log(new User("domesy")); // Usuário {name: 'domesy'}
Reflect é semelhante ao Proxy, exceto que mantém o comportamento padrão de Object
e
do Reflect
.e Os métodos de Proxy correspondem um a um, portanto não os apresentaremos aqui
Classe: abstração de uma classe de coisas com características comuns (sintaxe do construtor açúcar)
classe de instância gerada Parent {. construtor(nome = 'es6'){ este.nome = nome } } deixe dados = novo Pai('domesy') console.log(data) // Parent { name: 'domesy'}
classe Parent { construtor(nome = 'es6'){ este.nome = nome } } // Classe de herança comum Child estende Parent {} console.log(new Child()) // Filho {nome: 'es6'} // Passa os parâmetros class Child extends Parent { construtor(nome = "filho") { super(nome); this.type = "criança"; } } console.log(new Child('domesy')) // Child { name: 'domesy', type: 'child'}Os dois métodos
class Parent { construtor(nome = 'es6'){ este.nome = nome } //obter obter getNome() { retorne 'sy' + este.nome } //setter definir setNome(valor){ este.nome = valor } } deixe dados = novo Pai() console.log(data.getName) // syes6 data.setName = 'domesy' console.log(data.getName) //
class Parent { getNome estático = (nome) => { retornar `Olá! ${nome}` } } console.log(Parent.getName('domesy')) // Olá!classe de
domésticas
Parent {} Parent.type = "teste"; console.log(Parent.type); //teste
Promise
é resolver o problema do "inferno de retorno de chamada".
Promise
pode suportar múltiplas solicitações simultâneas e obter dados em solicitações simultâneas. Esta Promise
pode resolver o problema assíncrono Promise
si, não pode ser considerada uma
definição assíncrona: Status do objeto contendo resultados de operação assíncrona
:
Nota:
//Definição normal deixe ajax = (. retorno de chamada) => { console.log('≈') setTimeout(() => { retorno de chamada && callback.call(); }, 1000) } ajax(() => { console.log('tempo limite') }) //Primeiro será impresso para iniciar a execução, depois o timeout será impresso após 1s. //Promessa deixe ajax = () => { console.log("Iniciar execução"); retornar nova Promessa((resolver, rejeitar) => { setTimeout(() => { resolver(); }, 1000); }); }; ajax().then(() => { console.log("tempo limite"); }); // Primeiro será impresso para iniciar a execução, depois o timeout será impresso após 1s. //então() deixe ajax = () => { console.log("Iniciar execução"); retornar nova Promessa((resolver, rejeitar) => { setTimeout(() => { resolver(); }, 1000); }); }; ajax() .então(() => { retornar nova Promessa((resolver, rejeitar) => { setTimeout(() => { resolver(); }, 2000); }); }) .então(() => { console.log("tempo limite") }) // Primeiro será digitado para iniciar a execução, depois o timeout será digitado após 3s (1+2) // pegar() deixe ajax = (num) => { console.log("Iniciar execução"); retornar nova Promessa((resolver, rejeitar) => { se (num > 5) { resolver(); } outro { throw new Error("Ocorreu um erro"); } }); }; ajax(6) .então(função(){ console.log("timeout"); // Iniciará a execução primeiro, então o tempo limite será impresso após 1s. }) .catch(função (erro) { console.log("catch", err); }); ajax(3) .então(função(){ console.log("tempo limite"); }) .catch(função (erro) { console.log("catch"); // Inicia a execução primeiro e depois captura após 1s. });
. retornar nova promessa (resolver, rejeitar) => { Seja img = document.createElement ("img"); img.src = src; img.onload = function () { resolver (img); }; img.onerror = function (err) { rejeitar (err); }; }); } const showImgs = (imgs) => { imgs.foreach ((img) => { document.body.appendChild (IMG); }) } Promise.All ([[ loadImg("https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"), loadImg("https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"), loadImg("https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"),]
)
. Então (Showimgs
{ retornar nova promessa (resolver, rejeitar) => { Seja img = document.createElement ("img"); img.src = src; img.onload = function () { resolver (img); }; img.onerror = function (err) { rejeitar (err); }; }); } const showImgs = (imgs) => { Seja p = document.createElement ("p"); P.AppendChild (IMG); document.body.appendChild (P); } Promise.Race ([ loadImg("https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"), loadImg("https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"), loadImg("https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"),
Então (Showimgs);
para
controlar o iterador tambémuma solução de programação assíncrona que encapsula vários estados internos.
done
value
umdone
value
concluído)恢复
do programa. render "a"; render "b"; retornar "C" } deixe o gerador = data (); console.log (generator.next ()) // {value: 'a', feito: false} console.log (generator.next ()) // {value: 'b', feito: false} console.log (generator.next ()) // {value: 'c', feito: true} console.log (generator.next ()) // {value: indefinido, feito: true}
é uma interface que fornece um mecanismo de acesso unificado para várias estruturas de dados. Enquanto qualquer estrutura de dados implantar a interface do iterador, ela poderá concluir a operação de travessia (ou seja, processar todos os membros da estrutura de dados em sequência).
As funções do iterador:
Nota:
数组
Map结构
Set
某些类似数组的对象
Map结构
.// Basicamente, use Let arr = ["Hello", "World"]; deixe mapa = arr [symbol.iterator] (); console.log (map.next ()); console.log (map.next ()); console.log (map.next ()); // para loop let arr = ["hello", "World"]; para (deixe o valor de arr) { console.log (valor); } // Processamento de objetos Let OBJ = { Iniciar: [1, 5, 2], fim: [7, 9, 6], [Símbolo.iterador](){ deixe index = 0; Deixe arr = this.start.concat (this.end) retornar { próximo(){ if (índice <arr.length) { retornar { Valor: arr [index ++], feito: false } }outro{ retornar { Valor: arr [index ++], feito: verdadeiro } } } } } } para (deixe a chave do obj) { console.log (chave); }
símbolo
@
para estender e modificar o comportamento da classecore-decorators
Target.name = "Domesy" } @nome classe teste {} Console.Log (test.name) //
nos primeiros dias, era um método comum usar funções de execução imediatas para obter
modularização de usar modularização:
as soluções de manutenção de código:
export default Index
export { name as newName }
import Index from './Index'
import * as Index from './Index'
import { name, value, id } from './Index'
import { name as newName } from './Index'
import './Index'
import Index, { name, value, id } from './Index'
export命令
e import命令
são combinados e gravados em uma linha.
Let arr = [1, 2, 3, 4] // inclui () es6 console.log (arr.includes (3)) // true console.log ([1, 2, nan] .includes (NAN)); // inclui () es7 console.log (arr.includes (1, 0)) // true console.log (arr.includes (1, 1)) //Operador de energia
**
para representar Math.pow()
// Operador de energia ES7 console.log (Math.pow (2, 3)) // 8 Console.log (2 ** 8) // 256
Deixe Str = 'Domesy' // padstart (): será preenchido na forma de espaços? "0")); Console.log ("8-27" .padstart (10, "AAAA-0M-0D"));//
) console.log ("1" .Padend (2, "0"));
deixe obj = {name: 'Domesy', valor: 'react'} //Object.values () console.log (object.values (obj)) // ['react', 'react'] //Object.entries () console.log (object.entries (obj)) // [['nome', 'value'], ['react', 'react']]
função: altere a função assíncrona para a função síncrona (açúcar de sintaxe do gerador)
const func = async () => { Let Promise = nova promessa ((resolver, rejeitar) => { setTimeout(() => { resolver ("executar"); }, 1000); }); console.log (aguardar promessa); console.log (aguarda 0); console.log (aguarda Promise.Resolve (1)); console.log(2); devolver promessa.Resolve (3); } func (). Então (val => { console.log (val); }
)
forEach()
Promise
then
async/await
for-of
Promise.all()
try catch
reject
Existem duas situações: se é um objeto de promessa
. Essa coisa não promulsa como aguarda.
Se estiver aguardando um objeto de promessa, aguarda também pausará o código por trás do ASYNC, primeiro executará o código de sincronização fora do Async, aguarde o cumprimento do objeto Promise e use os parâmetros de resolução como resultado da operação da expressão aguardada.
Vantagens e:
.
undefined
é retornada quando a escape ilegal de cordas é encontrada e a sequência original pode ser obtida do raw
.// Relax Restrições de string const test = (valor) => { console.log (valor) } Teste `Domesy` // ['Domesy', Raw: [" Domesy "]
Promise.Finally ()
deixe func = time => { Retorne nova promessa ((res, rejé) => { setTimeout(() => { if (tempo <500) { res (tempo) }outro{ Rej (tempo) } }, tempo) }) } diversão (300) .Then ((val) => console.log ('res', val)) .catch ((Erro) => console.log ('Rej', Erro)) .Finalmente (() => console.log ('acabado')) // Resultado da execução: res 300 Func concluído (700) .Then ((val) => console.log ('res', val)) .catch ((Erro) => console.log ('Rej', Erro)) .Finalmente (() => console.log ('acabado')) // Resultado da execução: REJ 700 concluído
-Await-of: Iterador assíncrono, o loop aguarda para que cada Promise对象
se torne resolved状态
antes de entrar na próxima etapa,
deixe gettime = (segundos) => { retornar nova promessa (res => { setTimeout(() => { res (segundos) }, segundos) }) } teste de função assíncrona () { Deixe arr = [gettime (2000), gettime (500), gettime (1000)] para aguardar (deixe x de arr) { console.log (x); } } teste () // Execute 2000 500 1000
//json.stringify ( ) Atualizar console.log (json.stringify (" ud83d ude0e");console.log
u {d800}"));
Infinity
for inserido))Deixe arr = [1, 2, 3, 4] // flatmap () console.log (arr.map ((x) => [x * 2])); console.log (arr.flatmap ((x) => [x * 2])); console.log (arr.flatmap ((x) => [[x * 2]]); const arr1 = [0, 1, 2, [3, 4]]; const arr2 = [0, 1, 2, [[[3, 4]]]]; console.log (arr1.flat ()); console.log (arr2.flat (2));console.log
arr2.flat (infinito)
Object.entries()
deixe mapa = novo mapa ([ ["A", 1], ["B", 2], ]); deixe obj = object.FromEntries (mapa); console.log (obj
; ["A", 1], ["B", 2], ] Seja obj = object.FromEntries (arr);
(obj)
; A: 1, B: 2, C: 3 } deixe res = object.Fromentries ( Object.entries (obj) .Filter (([key, val]) => value! == 3) ) console.log (res) // {a: 1, b: 2}
// tostring () function test () { Consople.log ('DUNESY') } console.log (test.toString ()); // function test () { //consople.log('domesy ') //}
no ES10, tente capturar pode ignorar os parâmetros de captura
Let func = (nome) => { tentar { retornar json.parse (nome) } pegar { retornar falso } } console.log (func (1)) // 1 console.log (func ({a: '1'})) // false
de
número em JS pode representarusar
console.log (2 ** 53) // 9007199254740992 console.log (número.max_safe_integer) // 9007199254740991 // bigint const bigint = 9007199254740993N console.log (bigint) // 9007199254740993N console.log (typeof bigint) // bigint console.log (1n == 1) // true console.log (1n === 1) // false const Bigintnum = bigint (9007199254740993N) console.log (bigintnum) // 9007199254740993nHá um total de 7
em ES6, a saber: srting
, number
boolean
object
null
undefined
symbol
nulo
Function
Array
Date
object
RegExp
8. São eles: srting
, number
, boolean
, object
, null
, undefined
, symbol
, BigInt
.
Promise.all()
Promise.AllSettled ([) Promise.Reject ({ Código: 500, msg: "Exceção de serviço", }), Promise.Resolve ({ Código: 200, Dados: ["1", "2", "3"], }), Promise.Resolve ({ Código: 200, Dados: ["4", "5", "6"], }), ]). Então ((res) => { console.log (res) // [{Razão: {code: 500, msg: 'Service Exception'}, status: "rejeitou"}, // {Razão: {code: 200, Data: ["1", "2", "3"]}, status: "rejeitada"}, // {Razão: {code: 200, Data: ["4", "5", "6"]}, status: "rejeitada"}] const data = res.filter ((item) => item.status === "cumprido"); console.log (dados); // {Razão: {code: 200, Data: ["4", "5", "6"]}, status: "rejeitada"}] })
require
dinâmico require()
import()
sob// então () deixe modulePage = "index.js"; importar (ModulePage) .then ((módulo) => { module.init (); }); // combinado com assíncrono aguardando (assíncrono() => { const modulepage = 'index.js' const módulo = aguarda importação (modulepage); console.log (módulo) })
// navegador console.log (globalThis) // Window //nóconsole.log (globalThis) //
global? Representa se
o
// Antes do ES11, deixe um user && user.name // Agora deixe B = Usuário? .Nome
"" || "" ?? "Valor padrão"; const b = 0; const a = b || 5; console.log (a); const b = nulo // indefinido const a = b ?? 123;
Console.Log
)
os let str = "oi!, este é um novo recurso do ES6 ~ ES12, atualmente ES12" console.log (str.replace ("es", "sy")); , este é um novo recurso do Sy6 ~ es12, atualmente ES12 console.log (str.Replace (/es/g, "sy")); , este é um novo recurso do sy6 ~ sy12, atualmente é sy12 console.log (str.replaceall ("es", "sy"); , este é um novo recurso do sy6 ~ sy12, atualmente é sy12 console.log (str.replaceall (/es/g, "sy"); , este é um novo recurso do SY6 ~ SY12, atualmente Sy12
Promise.ANY ()
Promise.any ([[ Promise.Reject ("Terceiro"), Promise.Resolve ("Segundo"), Promise.Resolve ("Primeiro"), ]) .then ((res) => console.log (res)) // Segundo .catch ((err) => console.error (err)); Promise.any ([[ Promise.Reject ("Erro 1"), Promise.Reject ("Erro 2"), Promise.reject ("Erro 3"), ]) .Then ((res) => console.log (res))) .catch ((err) => console.error (err)); // agregateError: todas as promessas foram rejeitadas Promise.any ([[ Promise.Resolve ("Terceiro"), Promise.Resolve ("Segundo"), Promise.Resolve ("Primeiro"), ]) .then ((res) => console.log (res)) // Terceiro.catch ((
err));
Deixe fracos = new fracarref ({nome: 'domesy', ano: 24}) fracarref.deref () // {name: 'Domesy', ano: 24} fracarref.deref (). ano // 24
Let num1 = 5; Seja num2 = 10; num1 && = num2; console.log (num1); // equivalente a num1 && (num1 = num2); if (num1) { num1 = num2; }
deixe num1; Seja num2 = 10; num1 || = num2; console.log (num1); // equivalente a num1 || (num1 = num2); if (! num1) { num1 = num2; }
?? Seja num2 = 10; Seja num3 = nulo; // indefinido num1 ?? = num2; console.log (num1); num1 = false; num1 ?? = num2; console.log (num1); num3 ?? = 123; console.log (num3); // equivalente a // num1 ?? (num1 = num2
)
Seja num2 = 100_000; console.log (num1); console.log (num2); const num3 = 10.12_34_56 console.log (num3);