Este artigo lhe dará uma compreensão profunda do ES6 e aprenderá sobre os novos recursos do ES6. Espero que seja útil para você!
Entrada front-end (vue) para curso de domínio: entre no aprendizado
ECMAScripté uma脚本语言的标准化规范desenvolvida pela Netscape originalmente chamadaMocha, mais tarde renomeada comoLiveScripte finalmente renomeada comoJavaScript
ECMAScript 2015 (ES2015), versão 6, originalmente conhecido como ECMAScript 6 (ES6), adiciona novos recursos.
Escopo do bloco ES6 permite
Primeiro, o que é escopo? Escopo significa simplesmente declarar uma variável. O escopo válido desta variável é antes de let chegar. js possui apenas全局作用域e函数作用域de var , e ES6 traz块级作用域para js.
{
var a = "?";
seja b = "⛳";
}
console.log(a);
console.log(b);? ReferenceError não capturado: b não está definido
Como você pode ver, usamos a palavra-chave var para definir a variável a no bloco. Na verdade, ela pode ser acessada globalmente. Portanto, var声明的变量是全局的, mas queremos que a variável tenha efeito no bloco e seja. acessado após sair do bloco Não, então você pode usar a nova palavra-chave de escopo em nível de bloco let no ES6 a is not defined declarar a variável a.
Conforme mostrado abaixo, primeiro defina uma função que retorne um array Antes de usar o array解构数组, chame o array e atribua o valor de retorno a temp e, em seguida, imprima o array temporário. então O valor de retorno da função aponta para a variável. Ele atribuirá automaticamente o valor do primeiro item à primeira variável do array, o segundo item à segunda variável do array e assim por diante. problema.
função café da manhã() {
retornar ['?', '?', '?'];
}
var temp = café da manhã();
console.log(temp[0], temp[1], temp[2]);
deixe [a, b, c] = café da manhã();
console.log(a,b,c);? ?
Primeiro, a função breakfast retorna um对象. Use解构对象para definir o objeto. Após a conclusão da desestruturação, a atribuição. será concluído automaticamente. Então a função café da manhã é chamada para retornar o objeto. Em seguida, imprima as variáveis a, b, c e você verá que não há problema.
função café da manhã() {
retornar {a: '?', b: '?', c: '?' }
}
deixe {a: a, b: b, c: c } = café da manhã();
console.log(a,b,c);?
Antes de usar a string do modelo, concatenamos as variáveis da string usando +
Use a string de modelo fornecida pelo ES6. Primeiro use `` para agrupar a string. Quando quiser usar variáveis, use ${变量}
deixe a = '?',
b = '?️';
deixe c = 'Comer hoje' + a + 'Ver depois de comer' + b;
console.log(c);
let d = `Coma ${a} hoje e observe depois de comer ${b}`;
console.log(d);Comer hoje? Vamos ver depois de comer?️ Comer hoje? Vamos ver depois de comer?️
Usando essas funções, você pode concluir facilmente operações como se a string começa com alguma coisa, se a string termina com alguma coisa e se contém alguma string.
deixe str = 'Olá, sou Xiao Zhou ❤️';
console.log(str.startsWith('Olá'));
console.log(str.endsWith('❤️'));
console.log(str.endsWith('Olá'));
console.log(str.includes(" "));verdadeiro verdadeiro falso verdadeiro
No ES6, você pode usar parâmetros padrão. Ao chamar uma função, se nenhum valor for atribuído ao parâmetro, ela será executada usando os parâmetros padrão definidos. Quando um valor for atribuído ao parâmetro, ele será executado usando os parâmetros recém-atribuídos. valor, substituindo o valor padrão Use o seguinte:
função dizer(str) {
console.log(str);
}
function diga1(str = 'Ei') {
console.log(str);
}
dizer();
diga1();
diga1('❤️');indefinido Ei, ei❤️
Use ... para expandir elementos para facilitar a operação. Use como segue:
deixe arr = ['❤️', '?', '?']; console.log(arr); console.log(...arr); deixe brr = ['Príncipe', ...arr]; console.log(brr); console.log(...brr);
['❤️', '?', '?' ❤️ ? ['Príncipe', '❤️', '?', '?' Príncipe ❤️?
O operador ... é usado em parâmetros de função e recebe uma matriz de parâmetros. É usado da seguinte forma:
função f1(a, b, ...c) {
console.log(a,b,c);
console.log(a, b, ...c);
}
f1('?','?','☃️','㊙️');? ??
Você pode usar .name para obter o nome da função. O uso específico é o seguinte:
função f1() { }
console.log(f1.nome);
deixe f2 = função () {};
console.log(f2.nome);
deixe f3 = função f4() { };
console.log(f3.nome);f1 f2 f4
Usar funções de seta pode tornar o código mais conciso, mas você também deve prestar atenção às limitações das funções de seta, e a função de seta em si não tem isso, ela aponta para o pai
seja f1 = a => a;
seja f2 = (a, b) => {
retornar a + b;
}
console.log(f1(10));
console.log(f2(10, 10));10 20
Usando a expressão de objeto de es6, se o atributo do objeto for igual ao valor, o valor pode ser omitido e function pode ser omitida ao escrever a função.
deixe a = '㊙️';
deixe b = '☃️';
const obj={
uma: uma,
b:b,
diga: função () {
}
}
const es6obj = {
um,
b,
dizer() {
}
}
console.log(obj);
console.log(es6obj); { a: '㊙️', b: '☃️', diga: [Função: diga] }
{ a: '㊙️', b: '☃️', diga: [Função: diga] } Use a palavra-chave const para definir a medição. const limita a ação de atribuir valores à medição, mas não limita o valor na medição.
const aplicativo = ['☃️', '?'];
console.log(...aplicativo);
app.push('?');
console.log(...aplicativo);
aplicativo = 10;Você pode ver que ao atribuir um valor à medição novamente, um erro é relatado.
☃️? ☃️? aplicativo = 10; ^ TypeError: Atribuição a variável constante.
Ao usar pontos para definir atributos de objetos, se o nome do atributo contiver caracteres de espaço, isso é ilegal e a sintaxe não pode ser passada. Usar [属性名] pode resolver perfeitamente o problema, e não apenas o nome do atributo pode ser escrito diretamente, mas também. pode ser especificado usando variáveis. O uso específico é o seguinte:
deixe obj = {};
deixe a = 'nomezinho';
obj.name = 'Príncipe';
// É ilegal usar pontos para definir atributos com espaços no meio // obj.little name = 'Little Prince';
obj[a] = 'Pequeno Príncipe';
console.log(obj); { nome: 'Príncipe', 'nome pequeno': 'Pequeno Príncipe' } Os resultados da comparação de alguns valores especiais usando === ou == podem não atender às suas necessidades. Você pode usar Object.is(第一个值，第二个值) para julgar e pode rir.
console.log(NaN == NaN); console.log(+0 == -0); console.log(Object.is(NaN, NaN)); console.log(Object.is(+0, -0));
falso verdadeiro verdadeiro falso
Use Object.assign() para copiar um objeto para outro objeto, como segue:
deixe obj = {};
Objeto.atribuir(
//objeto fonte,
//Copia o objeto alvo {a: '☃️' }
);
console.log(obj); { uma: '☃️' }Você pode usar es6 para definir o protótipo de um objeto da seguinte forma:
deixe obj1 = {
pegar() {
retornar 1;
}
}
deixe obj2 = {
um: 10,
pegar() {
retorno 2;
}
}
deixe testar = Object.create(obj1);
console.log(teste.get());
console.log(Object.getPrototypeOf(teste) === obj1);
Object.setPrototypeOf(teste, obj2);
console.log(teste.get());
console.log(Object.getPrototypeOf(teste) === obj2);1 verdadeiro 2 verdadeiro
deixe obj1 = {
pegar() {
retornar 1;
}
}
deixe obj2 = {
um: 10,
pegar() {
retorno 2;
}
}
vamos testar = {
__proto__:obj1
}
console.log(teste.get());
console.log(Object.getPrototypeOf(teste) === obj1);
teste.__proto__ = obj2;
console.log(teste.get());
console.log(Object.getPrototypeOf(teste) === obj2);1 verdadeiro 2 verdadeiro
deixe obj1 = {
pegar() {
retornar 1;
}
}
vamos testar = {
__proto__: obj1,
pegar() {
retornar super.get() + '☃️';
}
}
console.log(teste.get());1☃️
Antes de aprender, primeiro escreva um iterador
função morrer(arr) {
seja i = 0;
retornar {
próximo() {
deixe pronto = (i >= arr.length);
deixe valor = !concluído ? arr[i++] : indefinido;
retornar {
valor: valor,
feito: feito
}
}
}
}
deixe arr = ['☃️', '?', '?'];
deixe morrerArr = morrer(arr);
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next()); { valor: '☃️', concluído: falso }
{ valor: '?', concluído: falso }
{ valor: '?', concluído: falso }
{valor: indefinido, concluído: verdadeiro}OK, vamos dar uma olhada no gerador simplificado
função* morrer(arr) {
for (seja i = 0; i < arr.length; i++) {
rendimento arr[i];
}
}
deixe teste = morrer(['?','☃️']);
console.log(teste.next());
console.log(teste.next());
console.log(teste.next()); { valor: '?', concluído: falso }
{ valor: '☃️', concluído: falso }
{valor: indefinido, concluído: verdadeiro}Use es6 para criar classes de forma rápida e conveniente, ótimo
aula de aula {
construtor(nome) {
este.nome = nome;
}
dizer() {
retorne este.nome + 'Diga Ori';
}
}
deixe xiaomiing = new stu("小明");
console.log(xiaoming.say());Xiao Ming disse que Ori deu
Defina métodos get/set para obter ou modificar atributos de classe
aula de aula {
construtor(nome) {
este.nome = nome;
}
pegar() {
retorne este.nome;
}
set(novaStr) {
este.nome = newStr;
}
}
deixe xiaomiing = new stu("小明");
console.log(xiaoming.get());
xiaomiing.set("Daming")
console.log(xiaoming.get());Xiao Ming e Da Ming
Os métodos modificados com a palavra-chave static podem ser usados diretamente sem instanciar o objeto.
aula de aula {
palavra estática (str) {
console.log(str);
}
}
stu.say("Método estático original");Método estático original
O uso de herança pode reduzir a redundância de código, como:
classe Pessoa {
construtor(nome,nome) {
este.nome = nome;
isto.bir = bir;
}
mostrarInfo() {
return 'Nome:' + this.name + 'Aniversário:' + this.bir;
}
}
classe A estende Pessoa {
construtor(nome,nome) {
super(nome, nome);
}
}
deixe zhouql = novo A("Zhou Qiluo", "01/06/2002");
// O próprio Zhou Qiluo não possui um método showInfo, ele é herdado do console.log(zhouql.showInfo()) de Person;Nome: Zhou Qiluo Aniversário: 01/06/2002
A coleção de conjuntos, ao contrário dos arrays, não permite elementos duplicados na coleção de conjuntos
//Cria uma coleção Set let food = new Set('??');
// Adiciona repetidamente, apenas um pode entrar food.add('?');
comida.add('?');
console.log(comida);
//Tamanho atual da coleção console.log(food.size);
// Determine se existe um elemento na coleção console.log(food.has('?'));
// Exclui um elemento da coleção food.delete('?');
console.log(comida);
// Percorre a coleção food.forEach(f => {
console.log(f);
});
// Limpa a coleção food.clear();
console.log(comida); Definir(3) { '?', '?', '?'
3
verdadeiro
Definir(2) { '?', '?'
?
?
Conjunto(0) {}O mapa combina para armazenar pares de valores-chave
deixe comida = novo Mapa();
deixe a = {}, b = função () { }, c = "nome";
comida.set(a, '?');
comida.set(b, '?');
comida.set(b, '?');
food.set(c, 'arroz');
console.log(comida);
console.log(comida.tamanho);
console.log(comida.get(a));
comida.delete(c);
console.log(comida);
console.log(comida.has(a));
comida.forEach((v, k) => {
console.log(`${k} + ${v}`);
});
comida.claro();
console.log(comida); Mapa(3) { {} => '?', [Função: b] => '?', 'nome' => 'arroz' }
3
?
Mapa(2) { {} => '?', [Função: b] => '?'
verdadeiro
[objeto Objeto] + ?
função () { } + ?
Mapa(0) {}Usando o desenvolvimento modular, o es6 pode importar e exportar facilmente algum conteúdo, bem como exportação padrão e outros detalhes.
deixe a = '?';
deixe f1 = function (str = 'Seus parâmetros') {
console.log(str);
}
exportar {a, f1}; importar {a, f1} de './27moduletest.js';
console.log(a);
f1();
f1('entendi');