Resumen de las nuevas funciones de ES6

 console.log(a); // undefined 变量提升了 实际代码变为 var a; console.log(a)
 console.log(b); // 报错 Uncaught ReferenceError: Cannot access 'b' before initialization
 console.log(c); // 报错 Uncaught ReferenceError: Cannot access 'c' before initialization
 var a = 120;
 let b = 'false';
 const c = 100;

let y const solo son accesibles en el alcance del bloque

// 使用var
var arr = [];
  for (var i = 0; i < 10; i++) {
    arr[i] = function() {
      return i
    };
  }
console.log(arr[5]()); // 10


// 使用let或const
const arr = [];
  for (let i = 0; i < 10; i++) {
    arr[i] = function() {
      return i
    };
  }
console.log(arr[5]()); // 5

if(true) {
  var a = 120;
  let b = 'false';
  const c = 100;
}
console.log(a); // 120
console.log(b);  // 报错：Uncaught ReferenceError: b is not defined
console.log(c);  // 报错：Uncaught ReferenceError: c is not defined

Let y const no pueden declarar variables con el mismo nombre en el mismo ámbito, pero var puede

var a = 120;
let b = 'false';
const c = 100;
var a = 130;
let b = 'true'; // Uncaught SyntaxError: Identifier 'b' has already been declared
const c = 200; // Uncaught SyntaxError: Identifier 'c' has already been declared
console.log(a); // 130

const solo puede definir constantes y no se puede modificar

const b = false;
b = 12;
console.log(b); // Uncaught TypeError: Assignment to constant variable

no contamina las variables globales

console.log(window.RegExp); // ƒ RegExp() { [native code] }
let RegExp = 10;
console.log(RegExp); // 10 
console.log(window.RegExp); // ƒ RegExp() { [native code] }

cadena de plantilla

Use acentos graves `` para crear cadenas de plantilla y use ${nombre de variable} cuando inserte variables;

  let name = '小明';
  let age = '12';
  console.log(name + '今年'+ age + '岁啦！'); // 小明今年12岁啦！
  console.log(`${name}今年${age}岁啦！`); // 小明今年12岁啦！

El uso de este método puede evitar el uso de una gran cantidad de + y ' ';

operador de propagación

El operador de extensión hace referencia a ... , que se usa para extender un tipo iterable o una matriz;

Combinar matrices usando el operador de propagación

const arry1 = ['小明', '小红'];
const arry2 = [...arry1, '小李', '小强'];
console.log(arry2); // ['小明', '小红', '小李', '小强']

copiar matriz usando el operador de propagación

const arry1 = ['小明', '小红'];
const arry2 = [...arry1];
console.log(arry2); // ['小明', '小红']
arry2[2] = '小强';
console.log(arry1, arry2); // ['小明', '小红'] ['小明', '小红', '小强']

El resultado de copiar utilizando el operador de extensión no es una simple copia de la dirección de referencia, por lo que el cambio no se verá afectado;

Operador de propagación con objetos

const obj1 = {name: '小明', age: 12};
const obj2 = {hobby: '踢足球'};
const obj3 = {...obj1, ...obj2}
console.log(obj3); // {name: '小明', age: 12, hobby: '踢足球'}

Operador de extensión de objeto, si el número de capas es 1, es una copia profunda. Los niveles por encima del segundo nivel no son copias profundas;

const obj1 = {name: '小明', age: 12};
const obj2 = {
   project: {
        English: 20,
        huaxue: 30,
       }
};
const obj3 = {...obj1, ...obj2}
console.log(obj3); // {name: '小明', age: 12, hobby: '踢足球'}
obj3.project.huaxue = 90
console.log(obj2); // project: {English: 20, huaxue: 90} obj2的huaxue属性也被改变了
console.log(obj3); // {name: '小明', age: 12, project: {English: 20, huaxue: 90}

asignación de desestructuración

La asignación de desestructuración es una extensión del operador de asignación, que es una coincidencia de patrones para matrices u objetos, y luego asigna valores a las variables en él, lo que puede hacer que el código sea conciso y fácil de leer;

deconstrucción de objetos

 let student = {
    name: '小凡',
    age: 18
 }
 let {name, age} = student
 console.log(name, age); // 小凡 18

Cuando se deconstruye el objeto, el nombre de la variable a la izquierda debe corresponder al valor clave en el objeto, use {}

let student = {
  name: '小凡',
  age: 18
}
let {name, age, sex} = student
console.log(name, age, sex); // 小凡 18 undefined

También es posible la deconstrucción incompleta;

let student = {
  name: '小凡',
  age: 18,
  sex: '男'
}
let {name} = student
console.log(name); // 小凡

Se puede utilizar con el operador de propagación;

let student = {
  name: '小凡',
  age: 18,
  sex: '男'
}
let {name, ...attribute} = student
console.log(name, attribute); // 小凡 {age: 18, sex: '男'}

Todas las variables se ponen en variables de expansión;

 let student = {
    name: '小凡',
    age: 18,
    sex: '男',
    school: {
      name: '一中',
      location: '村里'
    }
  }
  let {name, school, ...attribute} = student
  console.log(name,school, attribute); // 小凡 {name: '一中', location: '村里'} {age: 18, sex: '男'}

desestructuración de matrices

Use [ ] para la deconstrucción de arreglos, y el nombre de la variable a la izquierda es arbitrario;

let student = ['小凡', 18, '男'];
[name, age, sex] = student
console.log(name, age, sex); // 小凡 18 男

Otros son lo mismo que la deconstrucción de objetos;

Funciones extendidas

Funciones con valores predeterminados de parámetros

ES6 agrega valores predeterminados de parámetros, por lo que no es necesario escribir código tolerante a errores dentro de la función;

// es5的写法
function add(a,b) {
  a = a || 10; // 若无定义a，则默认为10
  b = b || 20; // 若无定义b，则默认为20
  return a+b
}
console.log(add()); // 30

// es6的写法
function add(a = 10, b = 20) {
  return a + b
}
console.log(add()); // 30

Los parámetros restantes representan parámetros indeterminados

La función de parámetro variable es la misma que los argumentos de es5;

// es5写法
function pick(obj) {
  let result = {};
  for(let i = 1; i < arguments.length; i++) {
    result[arguments[i]] = obj[arguments[i]]
  }
  return result;
}
let book = {
  name: '活着',
  author: '余华',
  pages: 400
}
let bookData = pick(book, 'name', 'author','pages');
console.log(bookData); // {"name": "活着", "author": "余华","pages": 400}

function pick(obj, ...keys) {
  let result = {};
  for(let i = 0; i < keys.length; i++) {
    result[keys[i]] = obj[keys[i]];
  }
  return result;
}
let book = {
  name: '活着',
  author: '余华',
  pages: 400
}
let bookData = pick(book, 'name', 'author','pages');
console.log(bookData); // {"name": "活着", "author": "余华","pages": 400}

función de flecha

No hay argumentos ni atributos prototipo en la función de flecha, y la función de flecha no es un objeto, por lo que la nueva palabra clave no se puede usar para instanciar la función de flecha;

Usa => para definir, function() {} es equivalente a () => {}

El this de la función de flecha apunta al this de su objeto principal

objeto extendido

Escribir variables y funciones directamente, como propiedades y métodos de objetos.

// es6写法
const name = "活着";
const author = "余华";

const book = {
  name,
  author,
  sayName() {
    console.log('这是一本很好看的书籍');
  }
}
book.sayName() // 这是一本很好看的书

El nombre del método de abreviatura anterior solo se puede abreviar cuando el atributo y el valor del atributo son iguales ~

// es5写法
const name = "活着";
const author = "余华";

const book = {
  name: name,
  author: author,
  sayName: function() {
    console.log('这是一本很好看的书籍');
  }
}
book.sayName() // 这是一本很好看的书

新增Object.is()/Object.assign()/Object.keys/Object.value/Object.entries/Object.getOwnPropertyDescriptors方法

Objeto.es()

El método Object.is() se usa para juzgar si dos valores son estrictamente iguales y devuelve un valor booleano, la diferencia con === es que los resultados del procesamiento para NaN y +0, -0 son diferentes;

object1 = {
   name: '小明',
   age: 12
}
object2 = {
   name: '小明',
   age: 12
}
console.log(object2.name === object2.name); // true
console.log(Object.is(object1.name, object2.name)); // true
console.log(null === null); // true
console.log(Object.is(null, null)); // true
console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // true
console.log(Object.is(+0,-0)); // false
console.log(+0 === -0); // true

// 补充几个烦人的比较
console.log(null instanceof Object); // false，但null也是个对象
console.log(null === undefined); // false
console.log(null == undefined); // true
console.log(NaN == NaN); // false
console.log(undefined == undefined); // true
var x = new Boolean(false);
console.log(x); // Boolean {false} 
var y = Boolean(0);
console.log(y);  // false

Objeto.assign()

El método Object.assign() se usa para fusionar todas las propiedades enumerables en varios objetos y devolver el objeto de destino; es un método de copia superficial ~

object1 = {
    name: '小明',
    age: 12
}
object2 = {
    sex: 'male'
}
console.log(Object.assign(object1, object2)); // {name: '小明', age: 12, sex: 'male'}

Objeto.claves()

Object.keys() se usa para devolver todas las propiedades en el objeto, devolviendo una matriz

object1 = {
   name: '小明',
   age: 12
}
console.log(Object.keys(object1)); // ['name', 'age']

Objeto.valores()

Object.values() se usa para devolver todos los valores de atributo en el objeto, devolviendo una matriz

object1 = {
  name: '小明',
  age: 12
}
console.log(Object.values(object1)); // [['小明', 12]

Objeto.entradas()

Object.entries() se usa para devolver múltiples matrices, cada matriz se compone de clave-valor

 object1 = {
   name: '小明',
   age: 12,
   classes: ['语文', '数学', '英语']
 }
 console.log(Object.entries(object1)); // [ "name","小明"],["age",12],["classes",["语文","数学","英语"] ] ]

Objeto.getOwnPropertyDescriptors

Este método devuelve el objeto de descripción de todas las propiedades del objeto especificado;

<script>
  const obj = {
    name: 'xiaoming'
  }
  console.log(Object.getOwnPropertyDescriptors(obj)); 
</script>

Para los objetos creados por literales, la propiedad enumerable predeterminada es verdadera, la propiedad configurable configurable (propiedades eliminables y otras) es verdadera y la propiedad escribible es verdadera;

Complemento : cree un objeto a través del método Object.creat() y use el objeto existente como prototipo del objeto recién creado.

valor extendido

Number.EPSILON representa la precisión mínima, generalmente utilizada para juzgar si los decimales son iguales
Number.isFinite se usa para verificar si un valor es un valor finito
Number.isNaN se usa para verificar si un valor es NaN
Number.parseInt se usa para extraer la parte entera de la cadena Number.parseFloat se usa para extraer el número de coma flotante en la cadena
Number.isInteger Determina si un valor es un número entero
Math.trunc se usa para borrar la parte decimal del número
Math.sign se usa para juzgar si un número es positivo/negativo o 0. Los números positivos devuelven 1, los números negativos devuelven -1 y 0 devuelven 0.

console.log(0.1+0.2 === 0.3); // false
// 但是可以写个函数 判断如果0.1+0.2 与0.3相差小于Number.EPSILON,则表明0.1+0.2 与0.3相等
console.log(Number.isFinite(100)); // true
console.log(Number.isFinite(100/0)); // false
console.log(Number.isFinite(Infinity)); // false
console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN(0)); // false
console.log(Number.parseInt('321flos3')); // 321
console.log(Number.parseInt('3.21flos3')); // 3
console.log(Number.parseFloat('3.21flos3')); // 3.21
console.log(Number.parseFloat('3.2.1flos3')); // 3.2
console.log(Number.isInteger(3.21)); // false
console.log(Number.isInteger('3')); // false
console.log(Number.isInteger(3)); // true
console.log(Math.trunc(3.45)); // 3
console.log(Math.sign(3.45)); // 1
console.log(Math.sign(-3.45)); // -1
console.log(Math.sign(0)); // 0

Símbolo

Se agrega un nuevo símbolo de tipo de datos básico para representar un valor único. Las características son las siguientes:

El valor del símbolo es único y se utiliza para resolver conflictos de nombres;

Los valores de los símbolos no se pueden operar con otros datos;

Cree valores de símbolo a través de Symbol() o Symbol.for();

Las propiedades del objeto definidas por Symbol no se pueden recorrer usando el bucle for...in, pero puede usar Reflect.ownKeys para obtener todos los nombres clave del objeto;

    <script>
        let s1 = Symbol();
        console.log(s1, typeof s1); // Symbol() 'symbol'
        // 带有标识的创建
        let name = Symbol('小明');
        console.log(name, typeof name); // Symbol(小明) 'symbol'
        // 使用Symbol.for创建
        let project = Symbol.for('英语');
        console.log(project, typeof project); // Symbol(英语) 'symbol'
    </script>

Generalmente, al crear una propiedad única de un objeto, use Símbolo

     <script>
        const project = Symbol()
        const number = Symbol()
        let school = {
            name: '一中',
            location: '这里',
            [project]: function() {
                console.log('我喜欢英语');
            },
            [number]: 200
        }
        school[project](); // 我喜欢英语
        console.log(school[number]); // 200
    </script>

El símbolo es el sexto tipo de datos básico en JavaScript, yuxtapuesto con undefined, null, Number, String y Boolean~

Mapas y Conjuntos

Colocar

ES6 proporciona una nueva estructura de datos Set ( colección ), pero los valores de los miembros son únicos , y la colección implementa la interfaz del iterador, por lo que puede usar el operador de extensión y para... de... para atravesar ;

Las propiedades y métodos del objeto Set incluyen principalmente:

tamaño: Devuelve el número de elementos en la colección (equivalente al atributo de longitud en la matriz);

add: agrega un nuevo elemento y devuelve la colección actual;

delete: elimina el elemento y devuelve un valor booleano;

tiene: comprueba si un elemento está contenido en la colección y devuelve un valor booleano;

 let newSet = new Set([1,3]);
 console.log(newSet); // Set(2) {1, 3}
 console.log(newSet.add([4,5])) // Set(3) {1, 3, [4, 5]}
 console.log(newSet.delete(3)) // true
 console.log(newSet.delete(4)) // false
 console.log(newSet.has(1)) // true
 console.log(newSet.size); // 2

Usando las características de la unicidad del objeto Set, se puede realizar la deduplicación de la matriz ~

  let newSet = [...new Set([1,3,3,5,4,4,6,7])];
  console.log(newSet); //  [1, 3, 5, 4, 6, 7]

Darse cuenta de la intersección de matrices ~

let arr1 = [1,2,3,4,5];
let arr2 = [1,4,6,7];
let arr3 = [...new Set(arr1)].filter(item => new Set(arr2).has(item))
console.log(arr3); //  [1, 4]

Darse cuenta de la diferencia de matriz ~

let arr1 = [1,2,3,4,5];
let arr2 = [1,4,6,7];
let arr3 = [...new Set(arr1)].filter(item => !(new Set(arr2).has(item)))
console.log(arr3); //  [2,3,5]

Darse cuenta de la unión de matrices～

 let arr1 = [1,2,3,4,5];
 let arr2 = [1,4,6,7];
 let arr3 = [...new Set([...arr1, ...arr2])]
 console.log(arr3); //  [1, 2, 3, 4, 5, 6, 7]

Mapa

ES6 proporciona la estructura de datos Map, que es una colección de pares clave-valor. La definición de claves ya no se limita a cadenas como objetos, sino que incluye varios tipos de valores ( incluidos objetos ). Al mismo tiempo, debido a que Map implementa la interfaz del iterador, se puede recorrer utilizando for...of;

Las propiedades y métodos de Map incluyen principalmente:

tamaño: devuelve el número de elementos en el Mapa

establecer: Agregar un nuevo elemento y devolver el Mapa actual;

get: devuelve el valor clave del objeto clave-valor;

tiene: detecta si un elemento está contenido en el mapa actual y devuelve un valor booleano;

clear: Borrar la colección y devolver indefinido

let newMap = new Map();
newMap.set('name', '小明');
newMap.set('classes', ['语文', '数学', '英语']);
console.log(newMap); //  Map(2) {'name' => '小明', 'classes' => Array(3)}
console.log(newMap.size); // 2
console.log(newMap.has('name')); // true
for (const item of newMap) {
   console.log(item); // (2) ['name', '小明'] (2) ['classes', Array(3)]
}
console.log(newMap.delete('classes')); // true
console.log(newMap.size); // 1
console.log(newMap.get('name')); // 小明

Iteradores y generadores/Objetos proxy

Vuelve y habla en detalle.

Promesa

Al ver 2023, ¿sigues teniendo dolor de cabeza por Promise?_Blog de Xiaoxiaotao confundido-Blog de CSDN

clase de clase

La esencia de una clase sigue siendo una función.

Ver Tutorial de JavaScript Avanzado (Programación Orientada a Objetos)

Implementación modular

La modularización consiste en dividir programas complejos en archivos individuales de acuerdo con ciertas reglas y, finalmente, combinarlos, lo que puede reducir la complejidad del código, evitar conflictos de nombres y mejorar la reutilización;

La función modular en ES6 se compone principalmente de dos comandos: exportar e importar, el comando exportar se usa para exponer la interfaz externa del módulo y el comando importar se usa para introducir las funciones proporcionadas por otros módulos;

Los módulos exportados se pueden exponer de tres maneras diferentes :

Métodos de exposición separados

Si los módulos exportados se exponen por separado , como:

// test.js文件
  // 通用暴露
export let name = '小明';
export function exam() {
  console.log('明天又要考试～');
}

exposición uniforme

Si el módulo de exportación adopta un método de exposición unificado , como:

// test.js文件
// 统一暴露
let name = '小明';
function exam() {
    console.log('明天又要考试～');
};
export {name, exam};

Tenga en cuenta que {nombre, examen} aquí no significa desestructurar la tarea, sino solo una forma de escribir ~

Luego, al importar el uso del módulo:

<script type="module">
  // 通用暴露
  import * as m1 from './test.js'
  // 给*起了别名m1
  console.log(m1); // m1中包含name属性和exam方法
</script>

expuesto por defecto

Si el módulo de exportación adopta el método de exposición predeterminado, este método generalmente se aplica a una sola exposición en un archivo, como:

// test.js文件
// 默认暴露
export default {
    name : '小明',
    exam: function() {
        console.log('明天又要考试～');
    }
};

Dependiendo del método de exposición del módulo, hay diferentes formas de importar el módulo :

Método general de importación

Este método se puede utilizar para los tres métodos de exposición anteriores:

<script>
  // 通用暴露
  import * as m1 from 'm1.js'
  // 给*起了别名m1
  console.log(m1); // 对于前两种暴露方式m1中包含name属性和exam方法，
  // 对于默认暴露方式，m1中包含default 取m1.default.name才可
</script>

Asignación de desestructuración

Para los dos primeros métodos de exposición, puede obtener directamente el nombre o el examen a través del siguiente código

<script type="module">
  // 通用暴露
  import { name,exam } from './test.js'
  // 或
  import { name as xingming,exam as kaoshi } from './test.js'
  // 给name/exam起了别名
</script>

Pero para la exposición predeterminada, use lo siguiente:

<script type="module">
   import { default as m1 } from './test.js'
   // 一般要给default取个别名，通过别名.name或别名.exam拿到
</script>

Método de importación simple para la exposición predeterminada

<script type="module">
   import m3 from './test.js'
   // 通过m3.name或m3.exam拿到
</script>

Los tres métodos de exposición anteriores se pueden introducir en otro archivo al mismo tiempo sin sobrescribir

Aquí, simplemente se agrega otro método de especificación modular importante, CommonJs:

El código modularizado de CommonJs puede ejecutarse en el lado del servidor, como nodejs, o en el lado del navegador (debe compilarse con la ayuda de la herramienta Browserify), y solo hay dos formas de exponerlo:

exportaciones.xxx = valor, el valor es el dato a ser expuesto, xxx es el nombre
module.exports = valor, el valor son los datos que se expondrán

El principio es que export===module.exports={ } en el lado del servidor, ambos apuntan al mismo objeto vacío;

Estos dos métodos no se pueden mezclar, si se mezclan, el que expone module.exports es el principal.¿Cuál es el valor, lo que expone module.exports;

Muestra que no hay ningún atributo de englishName,

Sólo hay dos formas de introducir,

Introducir módulos de terceros, require(xxx), donde xxx es el nombre del módulo
Importar módulos personalizados, require(xxx), xxx es la ruta del archivo del módulo