1. Las comillas inversas indican cadenas de varias líneas
`这是一个
多行
字符串`;
2. La cadena de la plantilla es la
misma que la cadena de varias líneas, pero reemplazará automáticamente las variables en la cadena
var name = '小明';
var age = 20;
var message = `你好, ${
name}, 你今年${
age}岁了!`;
alert(message);
3. Map
Map es una estructura de un conjunto de pares clave-valor con una velocidad de búsqueda extremadamente rápida.
Por ejemplo: Suponga que desea encontrar la calificación correspondiente de acuerdo con el nombre del compañero de clase, si usa Array para lograrlo, necesita dos Arrays:
var names = ['Michael', 'Bob', 'Tracy'];
var scores = [95, 75, 85];
Dado un nombre, para encontrar la partitura correspondiente, primero debe buscar la posición correspondiente en los nombres, y luego recuperar la partitura correspondiente de las partituras. Cuanto más largo sea el Array, más tardará.
Si se implementa con Map, solo se necesita una tabla de comparación de "nombre" - "puntuación", y los resultados se buscan directamente en función del nombre. No importa qué tan grande sea la tabla, la velocidad de búsqueda no disminuirá. Escriba un mapa en JavaScript de la siguiente manera:
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
La inicialización del mapa requiere una matriz bidimensional o la inicialización directa de un mapa vacío. El mapa tiene los siguientes métodos:
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined
Dado que una clave solo puede corresponder a un valor, si coloca una clave en un valor varias veces, el siguiente valor borrará el valor anterior:
var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88
4. Set
Set es similar a Map. También es un conjunto de claves, pero no almacena valor. Dado que la clave no se puede repetir, no hay una clave duplicada en el conjunto.
Para crear un conjunto, debe proporcionar una matriz como entrada o crear un conjunto vacío directamente:
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
Los elementos repetidos se filtran automáticamente en Set: (Nota: el número 3 y la cadena '3' son elementos diferentes).
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}
Los elementos se pueden agregar al conjunto mediante el método add (key), que se puede agregar repetidamente, pero no tendrá ningún efecto:
s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // 仍然是 Set {1, 2, 3, 4}
Los elementos se pueden eliminar mediante el método de eliminación (clave):
var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}
5. El
bucle de subíndice de tipo iterable se puede usar para atravesar Array, pero el subíndice no se puede usar al atravesar Map y Set. Para unificar el tipo de colección, el estándar ES6 introduce un nuevo tipo iterable: Array, Map y Set son todos tipos iterables. Se puede recorrer una colección de tipo iterable a través del nuevo bucle for… of.
6. para ... de bucle a través de la colección
Uso:
var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) {
// 遍历Array
console.log(x);
}
for (var x of s) {
// 遍历Set
console.log(x);
}
for (var x of m) {
// 遍历Map
console.log(x[0] + '=' + x[1]);
}
La diferencia entre for ... of loop y for ... in loop
Debido a problemas históricos, el bucle for ... in realmente atraviesa los nombres de propiedad de los objetos. Una matriz es en realidad un objeto, y el índice de cada elemento se considera un atributo.
Cuando agregamos manualmente propiedades adicionales al objeto Array, el bucle for ... in traerá efectos inesperados e inesperados:
var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
console.log(x); // '0', '1', '2', 'name'
}
El bucle for… in incluirá el nombre, pero la propiedad length de Array no se incluirá (Hello no está incluido).
El bucle for ... of soluciona completamente estos problemas, solo repite los elementos de la colección en sí:
var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
console.log(x); // 'A', 'B', 'C'
}
Una mejor manera es usar directamente el método forEach incorporado de iterable, que recibe una función y automáticamente vuelve a llamar la función en cada iteración.
7. bucle foreach
Reciba una función y vuelva a llamar automáticamente la función en cada iteración
Formación:
a.forEach(function (element, index, array) {
// element: 指向当前元素的值
// index: 指向当前索引
// array: 指向Array对象本身
console.log(element + ', index = ' + index);
});
Set es similar a Array, pero Set no tiene índice, por lo que los dos primeros parámetros de la función de devolución de llamada son los elementos mismos:
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
console.log(element);
});
Los parámetros de la función de devolución de llamada de Map son value, key y map en sí:
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
console.log(value);
});
Si no está interesado en algunos parámetros, debido a que las llamadas a funciones de JavaScript no requieren que los parámetros sean consistentes, puede ignorarlos. Por ejemplo, solo necesita obtener el elemento de Array:
var a = ['A', 'B', 'C'];
a.forEach(function (element) {
console.log(element);
});
8. Función anónima function
(x) {…} es una función anónima, no tiene nombre de función, porque la función JavaScript también es un objeto, por lo que la función anónima se puede asignar a una variable y la función se puede llamar a través de la variable.
Los siguientes dos son completamente equivalentes
function abs(x){
} 和 var abs = function (x){
}
9. JavaScript permite que se pasen cualquier número de parámetros sin afectar la llamada, por lo que no hay problema con pasar más parámetros que los definidos, aunque estos parámetros no son necesarios dentro de la función.
10. Let
Debido a que el alcance variable de JavaScript está realmente dentro de la función, no podemos definir variables con alcance local en el bucle for y otros bloques de instrucciones:
function foo() {
for (var i=0; i<100; i++) {
//
}
i += 100; // 仍然可以引用变量i
}
Para resolver el alcance a nivel de bloque, ES6 introduce la nueva palabra clave let, que se puede usar para declarar una variable de alcance a nivel de bloque reemplazando var con let:
function foo() {
var sum = 0;
for (let i=0; i<100; i++) {
sum += i;
}
// SyntaxError:
i += 1;
}
11. const
const es declarar una constante y el valor no se puede modificar. No es posible antes de ES6. Por lo general, usamos todas las variables en mayúsculas para significar "Esto es una constante. No cambie su valor".
El estándar ES6 introduce una nueva palabra clave const para definir constantes. Tanto const como let tienen alcance a nivel de bloque:
const PI = 3.14;
PI = 3; // 某些浏览器不报错，但是无效果！
PI; // 3.14
12. Desestructuración de la asignación (puede asignar un conjunto de variables al mismo tiempo, reduciendo la cantidad de código)
Al desestructurar y asignar elementos de matriz, se deben incluir varias variables entre [...].
var [x, y, z] = ['hello', 'JavaScript', 'ES6'];
console.log('x = ' + x + ', y = ' + y + ', z = ' + z);
//x = hello, y = JavaScript, z = ES6
Si la matriz en sí todavía está anidada, también se puede deconstruir y asignar de la siguiente forma. Tenga en cuenta que el nivel y la posición de anidación deben ser coherentes:
let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];
x; // 'hello'
y; // 'JavaScript'
z; // 'ES6'
La asignación de desestructuración también puede ignorar ciertos elementos:
let [, , z] = ['hello', 'JavaScript', 'ES6']; // 忽略前两个元素，只对z赋值第三个元素
z; // 'ES6'
Para extraer varios atributos de un objeto, también puede utilizar la asignación de desestructuración para obtener rápidamente los atributos especificados del objeto:
var person = {
name: '小明',
age: 20,
gender: 'male',
passport: 'G-12345678',
school: 'No.4 middle school'
};
var {
name, age, passport} = person;
console.log('name = ' + name + ', age = ' + age + ', passport = ' + passport);
//name = 小明, age = 20, passport = G-12345678
Al desestructurar y asignar un objeto, también puede asignar valores directamente a las propiedades del objeto anidado, siempre que los niveles correspondientes sean consistentes:
var person = {
name: '小明',
age: 20,
gender: 'male',
passport: 'G-12345678',
school: 'No.4 middle school',
address: {
city: 'Beijing',
street: 'No.1 Road',
zipcode: '100001'
}
};
var {
name, address: {
city, zip}} = person;
name; // '小明'
city; // 'Beijing'
zip; // undefined, 因为属性名是zipcode而不是zip
// 注意: address不是变量，而是为了让city和zip获得嵌套的address对象的属性:
address; // Uncaught ReferenceError: address is not defined
Cuando se usa la asignación de desestructuración para asignar un valor a una propiedad de objeto, si la propiedad correspondiente no existe, a la variable se le asignará el valor indefinido, lo cual es consistente con hacer referencia a una propiedad inexistente para obtener indefinida.
Si el nombre de la variable que se utilizará no es coherente con el nombre del atributo, puede utilizar la siguiente sintaxis para obtener:
var person = {
name: '小明',
age: 20,
gender: 'male',
passport: 'G-12345678',
school: 'No.4 middle school'
};
// 把passport属性赋值给变量id:
let {
name, passport:id} = person;
name; // '小明'
id; // 'G-12345678'
// 注意: passport不是变量，而是为了让变量id获得passport属性:
passport; // Uncaught ReferenceError: passport is not defined
La asignación de desestructuración también puede usar valores predeterminados, lo que evita el problema de que las propiedades inexistentes regresen indefinidas:
var person = {
name: '小明',
age: 20,
gender: 'male',
passport: 'G-12345678'
};
// 如果person对象没有single属性，默认赋值为true:
var {
name, single=true} = person;
name; // '小明'
single; // true
A veces, si la variable ya ha sido declarada, al asignar nuevamente, la escritura correcta también reportará un error de sintaxis:
// 声明变量:
var x, y;
// 解构赋值:
{
x, y} = {
name: '小明', x: 100, y: 200};
// 语法错误: Uncaught SyntaxError: Unexpected token =
Esto se debe a que el motor de JavaScript trata la declaración al principio de {como un bloque, por lo que = ya no es legal. La solución es ponerlo entre paréntesis:
({
x, y} = {
name: '小明', x: 100, y: 200});
Utilice el escenario 1: intercambie los valores de dos variables xey, puede escribir así, sin necesidad de variables temporales:
var x=1, y=2;
[x, y] = [y, x]
Utilice el escenario 2: obtenga rápidamente el nombre de dominio y la ruta de la página actual:
var {
hostname:domain, pathname:path} = location;