Este artículo le brindará una comprensión profunda de ES6 y conocerá las nuevas características de ES6. ¡Espero que le resulte útil!
Entrada al curso de dominio front-end (vue): ingrese al aprendizaje
ECMAScriptes una脚本语言的标准化规范desarrollado por Netscape originalmente llamadoMocha, luego renombradoLiveScripty finalmenteJavaScript
ECMAScript 2015 (ES2015), versión 6, originalmente conocida como ECMAScript 6 (ES6), agrega nuevas funciones.
alcance del bloque ES6 permite
Primero, ¿qué es el alcance? Alcance simplemente significa declarar una variable. El alcance válido de esta variable es antes de let . js solo tiene全局作用域y函数作用域de var , y ES6 brinda块级作用域a js.
{
var a = "?";
sea b = "⛳";
}
consola.log(a);
consola.log(b);? Error de referencia no detectado: b no está definido
Como puede ver, usamos la palabra clave var para definir la variable a en el bloque. De hecho, se puede acceder a ella globalmente. Por lo tanto, var声明的变量是全局的, pero queremos que la variable tenga efecto en el bloque y sea. se accede después de salir del bloque No, entonces puede usar la nueva palabra clave de alcance a nivel de bloque let en ES6 para declarar la variable a. Cuando accedo nuevamente, se informa un error que dice que a is not defined , a no está definido.
Como se muestra a continuación, primero defina una función que devuelva una matriz. Antes de usar la matriz desestructurada, llame a la matriz y asigne el valor de retorno a la temperatura, y luego imprima la matriz temporal. Después de usar解构数组, defina directamente una variable de matriz. luego, el valor de retorno de la función apunta a la variable. Automáticamente asignará el valor del primer elemento a la primera variable de la matriz, el segundo elemento a la segunda variable de la matriz, y así sucesivamente. Finalmente, las tres variables se imprimen y no hay. problema.
función desayuno() {
devolver ['?', '?', '?'];
}
var temp = desayuno();
console.log(temperatura[0], temperatura[1], temperatura[2]);
sea [a, b, c] = desayuno();
consola.log(a, b, c);? ?
Primero, la función breakfast devuelve un对象. Utilice解构对象para definir el objeto. La clave en el par clave-valor representa el nombre de la clave del objeto real asignado. Una vez completada la desestructuración, la asignación. Se completará automáticamente. Luego se llama a la función de desayuno para devolver el objeto. Luego imprima las variables a, b, c y podrá ver que no hay problema.
función desayuno() {
devolver {a: '?', b: '?', c: '?'
}
let { a: a, b: b, c: c } = desayuno();
consola.log(a, b, c);?
Antes de usar la cadena de plantilla, concatenamos las variables de cadena usando +
Utilice la cadena de plantilla proporcionada por ES6. Primero use `` para ajustar la cadena. Cuando desee utilizar variables, utilice ${变量}
sea a = '?',
b = '?️';
let c = 'Comer hoy' + a + 'Ver después de comer' + b;
consola.log(c);
let d = `Come ${a} hoy y mira después de comer ${b}`;
consola.log(d);¿Comer hoy? ¿Veamos después de comer? ¿Comer hoy? ¿Veamos después de comer?
Con estas funciones, puede completar fácilmente operaciones como, por ejemplo, si la cadena comienza con algo, si termina con algo y si contiene alguna cadena.
let str = 'Hola, soy Xiao Zhou ❤️';
console.log(str.startsWith('Hola'));
console.log(str.endsWith('❤️'));
console.log(str.endsWith('Hola'));
console.log(str.includes(" "));verdadero verdadero FALSO verdadero
En ES6, puede usar parámetros predeterminados Al llamar a una función, si no se asigna ningún valor al parámetro, se ejecutará utilizando los parámetros predeterminados establecidos. Cuando se asigne un valor al parámetro, se ejecutará utilizando los parámetros recién asignados. valor, sobrescribiendo el valor predeterminado Utilice lo siguiente:
función decir (cadena) {
consola.log(str);
}
función decir1 (cadena = 'Oye') {
consola.log(str);
}
decir();
decir1();
decir1('❤️');indefinido Oye oye❤️
Utilice ... para ampliar los elementos y facilitar la operación. Utilice lo siguiente:
let arr = ['❤️', '?', '?']; consola.log(arr); consola.log(...arr); let brr = ['Príncipe', ...arr]; consola.log(brr); consola.log(...brr);
['❤️', '?', '?' ❤️? ['Príncipe', '❤️', '?', '?' ¿Príncipe ❤️?
El operador ... se usa en los parámetros de la función y recibe una matriz de parámetros. Se usa de la siguiente manera:
función f1(a, b, ...c) {
consola.log(a, b, c);
consola.log(a, b, ...c);
}
f1('?','?','☃️','㊙️');? ?
Puede usar .name para obtener el nombre de la función. El uso específico es el siguiente:
función f1() { }
console.log(f1.nombre);
let f2 = función () { };
console.log(f2.nombre);
let f3 = función f4() { };
console.log(f3.nombre);f1 f2 f4
El uso de funciones de flecha puede hacer que el código sea más conciso, pero también debe prestar atención a las limitaciones de las funciones de flecha, y la función de flecha en sí no tiene esto, esto apunta al padre
sea f1 = a => a;
sea f2 = (a, b) => {
devolver a + b;
}
console.log(f1(10));
console.log(f2(10, 10));10 20
Usando la expresión de objeto de es6, si el atributo del objeto es el mismo que el valor, el valor se puede omitir y function se puede omitir al escribir la función.
deja a = '㊙️';
sea b = '☃️';
objeto constante = {
una: una,
b: b,
decir: función () {
}
}
constante es6obj = {
a,
b,
decir() {
}
}
consola.log(obj);
console.log(es6obj); { a: '㊙️', b: '☃️', diga: [Función: diga] }
{ a: '㊙️', b: '☃️', diga: [Función: diga] } Utilice la palabra clave const para definir la medición. const limita la acción de asignar valores a la medición, pero no limita el valor en la medición. Utilice lo siguiente:
aplicación constante = ['☃️', '?'];
console.log(...aplicación);
aplicación.push('?');
console.log(...aplicación);
aplicación = 10;Puedes ver que al asignar nuevamente un valor a la medición se reporta un error.
☃️ ? ☃️ ? aplicación = 10; ^ TypeError: Asignación a variable constante.
Cuando se usan puntos para definir atributos de objetos, si el nombre del atributo contiene caracteres de espacio, es ilegal y no se puede pasar la sintaxis. Usar [属性名] puede resolver perfectamente el problema, y no solo se puede escribir el nombre del atributo directamente, sino también. se puede especificar mediante variables. El uso específico es el siguiente:
dejar objeto = {};
let a = 'pequeño nombre';
obj.name = 'Príncipe';
// Es ilegal usar puntos para definir atributos con espacios en el medio // obj.little name = 'Principito';
obj[a] = 'Principito';
consola.log(obj); { nombre: 'Príncipe', 'pequeño nombre': 'Principito' } Es posible que los resultados de comparar algunos valores especiales usando === o == no satisfagan sus necesidades. Puede usar Object.is(第一个值，第二个值) para juzgar y es posible que se ría.
console.log(NaN == NaN); console.log(+0 == -0); console.log(Object.is(NaN, NaN)); console.log(Object.is(+0, -0));
FALSO verdadero verdadero FALSO
Utilice Object.assign() para copiar un objeto a otro objeto, de la siguiente manera:
dejar objeto = {};
Objeto.asignar(
// objeto fuente,
//Copiar objeto de destino { a: '☃️' }
);
consola.log(obj); { a: '☃️' }Puede usar es6 para configurar el prototipo de un objeto de la siguiente manera:
dejar obj1 = {
conseguir() {
devolver 1;
}
}
dejar obj2 = {
una: 10,
conseguir() {
devolver 2;
}
}
dejar prueba = Object.create(obj1);
console.log(test.get());
console.log(Object.getPrototypeOf(prueba) === obj1);
Object.setPrototypeOf(prueba, obj2);
console.log(test.get());
console.log(Object.getPrototypeOf(prueba) === obj2);1 verdadero 2 verdadero
dejar obj1 = {
conseguir() {
devolver 1;
}
}
dejar obj2 = {
una: 10,
conseguir() {
devolver 2;
}
}
dejar prueba = {
__proto__:obj1
}
console.log(test.get());
console.log(Object.getPrototypeOf(prueba) === obj1);
prueba.__proto__ = obj2;
console.log(test.get());
console.log(Object.getPrototypeOf(prueba) === obj2);1 verdadero 2 verdadero
dejar obj1 = {
conseguir() {
devolver 1;
}
}
dejar prueba = {
__proto__: obj1,
conseguir() {
return super.get() + ' ☃️';
}
}
console.log(test.get());1 ☃️
Antes de aprender, primero escriba un iterador.
función morir(arr) {
sea yo = 0;
devolver {
próximo() {
dejar hecho = (i >= arr.length);
let valor = !hecho ? arr[i++] : indefinido;
devolver {
valor: valor,
hecho: hecho
}
}
}
}
let arr = ['☃️', '?', '?'];
dejar morirArr = morir(arr);
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next()); { valor: '☃️', hecho: falso }
{ valor: '?', hecho: falso }
{ valor: '?', hecho: falso }
{valor: indefinido, hecho: verdadero}Bien, veamos el generador simplificado.
función* morir(arr) {
for (sea i = 0; i <arr.length; i++) {
rendimiento arr[i];
}
}
dejar prueba = morir(['?','☃️']);
console.log(test.next());
console.log(test.next());
console.log(test.next()); { valor: '?', hecho: falso }
{ valor: '☃️', hecho: falso }
{valor: indefinido, hecho: verdadero}Utilice es6 para crear clases de forma rápida y cómoda, genial
cosas de clase {
constructor(nombre) {
this.nombre = nombre;
}
decir() {
devuelve este.nombre + 'Di Ori';
}
}
let xiaoming = new stu("小明");
console.log(xiaoming.say());Xiao Ming dijo que Ori dio
Definir métodos get/set para obtener o modificar atributos de clase
cosas de clase {
constructor(nombre) {
this.nombre = nombre;
}
conseguir() {
devolver este.nombre;
}
establecer(nuevaCadena) {
this.name = newStr;
}
}
let xiaoming = new stu("小明");
console.log(xiaoming.get());
xiaoming.set ("Daming")
console.log(xiaoming.get());Xiao Ming y Da Ming
Los métodos modificados con la palabra clave estática se pueden utilizar directamente sin crear una instancia del objeto.
cosas de clase {
estática decir (cadena) {
consola.log(str);
}
}
stu.say("Método estático original");Método estático original
El uso de la herencia puede reducir la redundancia del código, como por ejemplo:
clase Persona {
constructor(nombre, bir) {
this.nombre = nombre;
this.bir = bir;
}
mostrar información() {
return 'Nombre:' + este.nombre + 'Cumpleaños:' + este.bir;
}
}
clase A extiende Persona {
constructor(nombre, bir) {
super(nombre, bir);
}
}
let zhouql = new A("Zhou Qiluo", "2002-06-01");
// Zhou Qiluo en sí no tiene un método showInfo, se hereda de Person's console.log(zhouql.showInfo());Nombre: Zhou Qiluo Cumpleaños: 2002-06-01
La colección de conjuntos, a diferencia de las matrices, no permite elementos duplicados en la colección de conjuntos.
//Crear una colección Set let food = new Set('??');
// Agrega repetidamente, solo uno puede ir en food.add('?');
comida.add('?');
console.log(comida);
//Tamaño de la colección actual console.log(food.size);
// Determinar si existe un elemento en la colección console.log(food.has('?'));
// Eliminar un elemento de la colección food.delete('?');
console.log(comida);
// Recorre la colección food.forEach(f => {
consola.log(f);
});
// Borrar la colección food.clear();
console.log(comida); Conjunto (3) { '?', '?', '?'
3
verdadero
Conjunto (2) {'?', '?'
?
?
Establecer (0) {}El mapa se combina para almacenar pares clave-valor
dejar comida = nuevo mapa();
sea a = {}, b = función () { }, c = "nombre";
comida.set(a, '?');
comida.set(b, '?');
comida.set(b, '?');
comida.set(c, 'arroz');
console.log(comida);
console.log(comida.tamaño);
console.log(comida.get(a));
comida.eliminar(c);
console.log(comida);
console.log(comida.tiene(a));
comida.paraCada((v, k) => {
console.log(`${k} + ${v}`);
});
comida.clear();
console.log(comida); Mapa(3) { {} => '?', [Función: b] => '?', 'nombre' => 'arroz' }
3
?
Mapa(2) { {} => '?', [Función: b] => '?'
verdadero
[objeto Objeto] +?
función () { } +?
Mapa(0) {}Mediante el desarrollo modular, es6 puede importar y exportar fácilmente algunos contenidos, así como la exportación predeterminada y otros detalles.
deja a = '?';
let f1 = function (str = 'Tus parámetros') {
consola.log(str);
}
exportar {a, f1}; importar {a, f1} desde './27moduletest.js';
consola.log(a);
f1();
f1('entendido');