1. Introdução ao ECMAScript

1. O que é ECMA

O nome chinês da ECMA (European Computer Manufacturers Association) é a European Computer Manufacturers
Association, cujo objetivo é avaliar, desenvolver e aprovar padrões de telecomunicações e computadores. Depois de 1994, a
organização mudou seu nome para Ecma International

2. O que é ECMAScript

ECMAScript é uma linguagem de programação de script padronizada pela Ecma International através da ECMA-262.

3. O que é ECMA-262

A Ecma International desenvolveu muitos padrões e o ECMA-262 é apenas um deles. Para obter uma lista de todos os padrões, consulte
http://www.ecma-international.org/publications/standards/Standard.htm

4. Por que aprender ES6

A versão ES6 tem mais mudanças e é um marco
O ES6 adiciona muitos novos recursos gramaticais, tornando a programação mais simples e eficiente
ES6 é a tendência de desenvolvimento front-end, habilidades necessárias para o emprego

2. Novos recursos do ECMAScript 6

1. deixe a palavra-chave

A palavra-chave let é usada para declarar variáveis. Variáveis declaradas usando let possuem várias características:

Declaração duplicada não permitida

let a = 1;
let a = 2;
var b = 3;
var b = 4;
a  // Identifier 'a' has already been declared
b  // 4

escopo do bloco

       {
    
    
  let a = 0;
  var b = 1;
}
a  // ReferenceError: a is not defined
b  // 1

elevação variável não existe

console.log(song);// ReferenceError: Cannot access 'song' before initialization
let song = '恋爱达人';

não afeta a cadeia de escopo

 {
    
    
            let school = 'baicaotang';
            function fn(){
    
    
                console.log(school);
            }
            fn();//baicaotang
        }

Cenário de aplicação: É correto usar let para declarar variáveis no futuro

2. A palavra-chave const

A palavra-chave const é usada para declarar constantes, as declarações const têm as seguintes características

declaração deve atribuir um valor inicial

const a;// SyntaxError: Missing initializer in const declaration

Os identificadores geralmente são maiúsculos

const PI = "3.1415926";

Declaração duplicada não permitida

const a=1;
const a=2;
//SyntaxError: Identifier 'a' has already been declared

Valor não permite alteração

const SCHOOL = 'baicaotang';
SCHOOL = 'ATGUIGU';
//TypeError: Assignment to constant variable.

escopo do bloco

{
    
    
            const PLAYER = 'UZI';
        }
        console.log(PLAYER);
        //ReferenceError: PLAYER is not defined

Observação: a modificação das propriedades do objeto e a alteração dos elementos da matriz não acionarão cenários de aplicação de erro const: declare tipos de objeto usando const e selecione let para declarações de tipo não objeto

3. Atribuição de desconstrução variável

O ES6 permite extrair valores de arrays e objetos e atribuir valores a variáveis de acordo com um determinado padrão, que é chamado
de atribuição de desestruturação.

1. Atribuição de desestruturação de matriz

let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3

2. Atribuição da estrutura do objeto

let {
    
    a = 10, b = 5} = {
    
    a: 3};
// a = 3; b = 5;
let {
    
    a: aa = 10, b: bb = 5} = {
    
    a: 3};
// aa = 3; bb = 5;

Observação: se você usa frequentemente métodos de objeto e elementos de matriz, pode usar o formulário de atribuição de desestruturação

4. Corda

1. Identificação de strings de métodos estendidos

ES6 usou o método indexOf para determinar se uma string contém substrings. ES6 adicionou um método de identificação de substring.

includes(): Retorna um valor booleano para determinar se a string do parâmetro foi encontrada.
startsWith(): Retorna um valor booleano para determinar se a string do parâmetro está no início da string original.
endsWith(): Retorna um valor booleano para determinar se a string do parâmetro está no final da string original.

Os três métodos acima podem aceitar dois parâmetros, a string a ser pesquisada e um índice de posição inicial de pesquisa opcional.

let string = "apple,banana,orange";
string.includes("banana");     // true
string.startsWith("apple");    // true
string.endsWith("apple");      // false
string.startsWith("banana",6)  // true

2. Repetição de string

repeat(): Retorna uma nova string, indicando que a string é repetida pelo número especificado de vezes.

console.log("Hello,".repeat(2));  // "Hello,Hello,"

3. Conclusão da sequência

padStart: retorna uma nova string, indicando que a string original é completada da cabeça (lado esquerdo) com a string do parâmetro.
padEnd: retorna uma nova string, indicando que a string original é completada do final (lado direito) com a string do parâmetro.

Os dois métodos acima aceitam dois parâmetros, o primeiro parâmetro especifica o comprimento mínimo da string gerada e o segundo parâmetro é a string usada para conclusão. Se o segundo parâmetro não for especificado, ele será preenchido com espaços em branco por padrão.

console.log("h".padStart(5,"o"));  // "ooooh"
console.log("h".padEnd(5,"o"));    // "hoooo"
console.log("h".padStart(5));      // "    h"

4. Cadeias de modelos

A string de modelo (string de modelo) é uma versão aprimorada da string, identificada por acentos graves (`), recursos:

Caracteres de nova linha podem aparecer na string

let str = `<ul>
                    <li>沈腾</li>
                    <li>玛丽</li>
                    <li>魏翔</li>
                    <li>艾伦</li>
                    </ul>`;

As variáveis podem ser geradas na forma de ${xxx}

 let lovest = '魏翔';
        let out = `${
      
      lovest}是我心目中最搞笑的演员!!`;
        console.log(out);

Observação: use strings de modelo quando strings e variáveis forem concatenadas

5. Modelo de etiqueta

Um modelo marcado é uma chamada de função em que o argumento para a chamada é uma string de modelo.

alert`Hello world!`;
// 等价于
alert('Hello world!');

5.Símbolo

O ES6 introduz um novo tipo de dado primitivo Symbol, que representa um valor único.O maior uso é definir o nome de propriedade único de um objeto.

Além de Number, String, Boolean, Object, null e undefined, os tipos de dados ES6 também adicionam Symbol.
Características do símbolo

O valor de Symbol é exclusivo para resolver conflitos de nomenclatura
Os valores dos símbolos não podem ser manipulados com outros dados
As propriedades do objeto definidas por Symbol não podem ser percorridas usando o loop for...in, mas você pode usar
Reflect.ownKeys para obter todos os nomes de chave do objeto

//创建 Symbol
let s1 = Symbol();
console.log(s1, typeof s1);
//添加标识的 Symbol
let s2 = Symbol('baicaotang');
let s2_2 = Symbol('baicaotang');
console.log(s2 === s2_2);
//使用 Symbol for 定义
let s3 = Symbol.for('baicaotang');
let s3_2 = Symbol.for('baicaotang');
console.log(s3 === s3_2);
let sy = Symbol("key1");
//作为属性名 
// 写法1
let syObject = {
    
    };
syObject[sy] = "kk";
console.log(syObject);    // {Symbol(key1): "kk"}
 
// 写法2
let syObject = {
    
    
  [sy]: "kk"
};
console.log(syObject);    // {Symbol(key1): "kk"}
 
// 写法3
let syObject = {
    
    };
Object.defineProperty(syObject, sy, {
    
    value: "kk"});
console.log(syObject);   // {Symbol(key1): "kk"}

Nota: Ao encontrar um cenário único, o símbolo deve ser considerado.Quando o valor do símbolo é usado como um nome de propriedade, a propriedade é uma propriedade pública em vez de uma propriedade privada e pode ser acessada fora da classe. Mas não aparecerá em loops for…in, for…of, nem será retornado por Object.keys(), Object.getOwnPropertyNames(). Se você deseja ler a propriedade Symbol de um objeto, pode obtê-la por meio de Object.getOwnPropertySymbols() e Reflect.ownKeys().

Valor embutido do símbolo

Além de definir o valor de Symbol usado por si só, o ES6 também fornece 11 valores de Symbol integrados, que apontam para os métodos usados internamente pela linguagem. Esses métodos podem ser chamados de métodos mágicos, pois serão executados automaticamente em determinados cenários.

documentos de referência

6.Mapear e definir

1. Conjunto

O ES6 fornece uma nova estrutura de dados Set (coleção). É semelhante a um array, mas os valores de seus membros são todos únicos
. A coleção implementa a interface do iterador, portanto pode ser percorrida usando o "operador de extensão" e "for...of...".
propriedades e métodos da coleção:

size retorna o número de elementos na coleção
add adiciona um novo elemento e retorna a coleção atual
delete exclui um elemento e retorna um valor booleano
has verifica se a coleção contém um elemento e retorna um valor booleano
clear limpa a coleção e retorna indefinido

//创建一个空集合
let s = new Set();
//创建一个非空集合
let s1 = new Set([1,2,3,1,2,3]);
//集合属性与方法
//返回集合的元素个数
console.log(s1.size);
//添加新元素
console.log(s1.add(4));
//删除元素
console.log(s1.delete(1));
//检测是否存在某个值
console.log(s1.has(2));
//清空集合
console.log(s1.clear());

2.Mapa

O ES6 fornece a estrutura de dados do mapa. É semelhante a um objeto e também é uma coleção de pares chave-valor. Mas o escopo de "chave"
não se limita a strings, e vários tipos de valores (incluindo objetos) podem ser usados como chaves. O mapa também implementa
a interface do iterador, para que possa ser percorrido usando "operador de propagação" e "for...of...".
Propriedades e métodos de Map :

size retorna o número de elementos no mapa
set adiciona um novo elemento e retorna o mapa atual
get retorna o valor da chave do objeto chave
has detecta se um elemento está contido no Map e retorna um valor booleano
clear limpa a coleção e retorna indefinido

//创建一个空 map
let m = new Map();
//创建一个非空 map
let m2 = new Map([
 ['name','baicaotang'],
 ['slogon','不断提高']
]);
//属性和方法
//获取映射元素的个数
console.log(m2.size);
//添加映射值
console.log(m2.set('age', 6));
//获取映射值
console.log(m2.get('age'));
//检测是否有该映射
console.log(m2.has('age'));
//清除
console.log(m2.clear());

7. Expansão numérica

1. Binário e Octal

O ES6 fornece uma nova maneira de escrever valores binários e octais, que são representados pelos prefixos 0b e 0o, respectivamente.

//二进制
console.log(0b11 === 3); // true
console.log(0B11 === 3); // true
//八进制
console.log(0o11 === 9); // true
console.log(0O11 === 9); // true

2. Number.isFinite() 与 Number.isNaN()

Number.isFinite() é usado para verificar se um valor é finito

console.log( Number.isFinite(1));   // true
console.log( Number.isFinite(0.1)); // true
// NaN 不是有限的
console.log( Number.isFinite(NaN)); // false
 
console.log( Number.isFinite(Infinity));  // false
console.log( Number.isFinite(-Infinity)); // false
 
// Number.isFinate 没有隐式的 Number() 类型转换，所有非数值都返回 false
console.log( Number.isFinite('foo')); // false
console.log( Number.isFinite('15'));  // false
console.log( Number.isFinite(true));  // false

Number.isNaN() é usado para verificar se um valor é NaN

console.log(Number.isNaN(NaN));      // true
console.log(Number.isNaN('true'/0)); // true
 
// 在全局的 isNaN() 中，以下皆返回 true，因为在判断前会将非数值向数值转换
// 而 Number.isNaN() 不存在隐式的 Number() 类型转换，非 NaN 全部返回 false
Number.isNaN("NaN");      // false
Number.isNaN(undefined);  // false
Number.isNaN({
    
    });         // false
Number.isNaN("true");     // false

3. Number.parseInt() e Number.parseFloat()

O ES6 transplanta os métodos globais parseInt e parseFloat para o objeto Number e os usa inalterados.

// 不指定进制时默认为 10 进制
Number.parseInt('12.34'); // 12
Number.parseInt(12.34);   // 12
 
// 指定进制
Number.parseInt('0011',2); // 3
 
// 与全局的 parseInt() 函数是同一个函数
Number.parseInt === parseInt; // true
Number.parseFloat()
用于把一个字符串解析成浮点数。
Number.parseFloat('123.45')    // 123.45
Number.parseFloat('123.45abc') // 123.45
 
// 无法被解析成浮点数，则返回 NaN
Number.parseFloat('abc') // NaN
 
// 与全局的 parseFloat() 方法是同一个方法
Number.parseFloat === parseFloat // true

4. Math.trunc

Usado para remover a parte fracionária de um número e retornar a parte inteira.

Math.trunc(12.3); // 12
Math.trunc(12);   // 12
 
// 整数部分为 0 时也会判断符号
Math.trunc(-0.5); // -0
Math.trunc(0.5);  // 0
 
// Math.trunc 会将非数值转为数值再进行处理
Math.trunc("12.3"); // 12
 
// 空值或无法转化为数值时时返回 NaN
Math.trunc();           // NaN
Math.trunc(NaN);        // NaN
Math.trunc("hhh");      // NaN
Math.trunc("123.2hhh"); // NaN

5. Number.isInteger

Number.isInteger() é usado para determinar se um valor é um inteiro

Number.isInteger(value)
Number.isInteger(0); // true
// JavaScript 内部，整数和浮点数采用的是同样的储存方法,因此 1 与 1.0 被视为相同的值
Number.isInteger(1);   // true
Number.isInteger(1.0); // true
 
Number.isInteger(1.1);     // false
Number.isInteger(Math.PI); // false
 
// NaN 和正负 Infinity 不是整数
Number.isInteger(NaN);       // false
Number.isInteger(Infinity);  // false
Number.isInteger(-Infinity); // false
 
Number.isInteger("10");  // false
Number.isInteger(true);  // false
Number.isInteger(false); // false
Number.isInteger([1]);   // false
 
// 数值的精度超过 53 个二进制位时，由于第 54 位及后面的位被丢弃，会产生误判
Number.isInteger(1.0000000000000001) // true
 
// 一个数值的绝对值小于 Number.MIN_VALUE（5E-324），即小于 JavaScript 能够分辨
// 的最小值，会被自动转为 0，也会产生误判
Number.isInteger(5E-324); // false
Number.isInteger(5E-325); // true
Number.isSafeInteger()
//用于判断数值是否在安全范围内。
Number.isSafeInteger(Number.MIN_SAFE_INTEGER - 1); // false
Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1); // false

Documentos de referência: Tutorial para novatos
Livros de referência: Ruan Yifeng Tutorial

Um breve resumo do ES6