En primer lugar, ¿cuál es ES6
ES significa ECMAScript, es por ECMA Organización Internacional de Normalización, el desarrollo de especificaciones estandarizadas de un lenguaje de script. ES6 es en realidad una referencia general, se refiere a la ES2015 y versiones posteriores.
Pros:
función de actualización variable añade programa se ejecuta imprevisibilidad
gramática demasiado flojo, para lograr la misma funcionalidad, diferentes personas pueden escribir código diferente.
Dos, ES6 la nueva sintaxis
2.1 dejar que
las nuevas palabras clave ES6 utilizados para las variables de declarar.
- No hay ascensor variables
console.log(a); // a is not defined
let a = 20
- zona muerta temporal
usando la palabra clave para declarar una variable que vamos a tener alcance a nivel de bloque, se puede evitar que la variable de bucle se convierte en una variable global.
if (true) {
let num = 10;
console.log(num); //10
}
console.log(num); //not defined
2.2const
acción: declarar una constante, la constante es el valor (dirección de memoria) la cantidad no puede ser cambiado.
- Tener un ámbito de nivel de bloque
if (true) {
const a = 10; }
console.log(a) // a is not defined
- Cuando la asignación debe declarar constantes
const PI; // Missing initializer in const declaration
- Después de valores constantes, los valores no se pueden modificar.
const PI = 3.14;
PI = 100; // Assignment to constant variable.
const ary = [100, 200];
ary[0] = 'a';
ary[1] = 'b';
console.log(ary); // ['a', 'b']; 数据结构里面的值可以改
ary = ['a', 'b']; // Assignment to constant variable.
La diferencia entre el 2,3 let, const, var de
| era | dejar | const |
|---|---|---|
| ámbito de nivel de la función | ámbito de nivel de bloque | ámbito de nivel de bloque |
| variable de elevación | No hay ascensor variables | No hay ascensor variables |
| Puede cambiar el valor | Puede cambiar el valor | inmutable |
2,4 desestructuración asignación
ES6 permitió valores extraídos de la matriz, en una posición correspondiente en la variable. Los objetos también se pueden lograr deconstrucción.
- Una matriz de deconstrucción
// 数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量
//如果解构不成功，变量的值为undefined。
let [a, b, c, d, e] =[1,2,3];
console.log(a) //1
console.log(b) //2
console.log(c) //3
console.log(d) //undefined
console.log(e) //undefined
- deconstrucción de objetos
// 对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量
let person = { name: 'zhangsan', age: 20 };
let { name, age } = person;
console.log(name); // 'zhangsan'
console.log(age); // 20
let {name: myName, age: myAge} = person; // myName myAge 属于别名
console.log(myName); // 'zhangsan'
console.log(myAge); // 20
2.5 Funciones flecha
ES6 realización, la nueva función se define.
- gramática
(参数) => {函数体}
const fn = () => {}
//函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
function sum(num1, num2) {
return num1 + num2; }
const sum = (num1, num2) => num1 + num2;
//如果形参只有一个，可以省略小括号
function fn (v) {
return v;
}
const fn = v => v;
- función de la flecha no se une a esta palabra clave, la función de esta flecha, apunta a la posición definida en el contexto de esta función.
var age = 100;
var obj = {
age: 20,
say: () => {
alert(this.age)
}
}
obj.say(); //alter的是100
2.6 parámetros restantes
restantes parámetros y con el uso de deconstrucción
let students = ['wangwu', 'zhangsan', 'lisi'];
//...s2将剩余的实参归成一个数组
let [s1, ...s2] = students;
console.log(s1); // 'wangwu'
console.log(s2); // ['zhangsan', 'lisi']
Con la suma restante parámetro de la función de escritura
const sum = (...args) => {
let total = 0;
args.forEach(item => total += item);
return total;
};
console.log(sum(10, 20)); //30
console.log(sum(10, 20, 30));//60
Tres, la expansión ES6 de los objetos incorporados en
- Método de extensión (1) Matriz de
3.1.1 ampliada (sintaxis en desarrollo)
array ampliadas de operación se puede dividir en una secuencia de parámetros en una separada por comas.
// 扩展运算符可以将数组拆分成以逗号分隔的参数序列
// ...ary 等于 "a", "b", "c"
let ary = ["a", "b", "c"];
console.log(...ary) //a b c
console.log("a", "b", "c") //a b c
//扩展运算符应用于数组合并
let ary1 = [1, 2, 3];
let ary2 = [4, 5, 6];
let ary3 = [...ary1, ...ary2];
console.log(ary3) //[1，2，3，4，5，6]
ary1.push(...ary2); // 合并数组的第二种方法
console.log(ary1) //[1，2，3，4，5，6]
// 利用扩展运算符将伪数组转换为真正的数组
var oDivs = document.getElementsByTagName('div');
var ary = [...oDivs];
3.1.2 método constructor: Array.from ()
convierte la matriz o atravesar la clase de objeto para la matriz real.
var arrayLike = {
"0": "1",
"1": "2",
"length": 2
}
//将类数组或可遍历对象转换为真正的数组
var ary = Array.from(arrayLike);
console.log(ary) //["1", "2"]
//方法还可以接受第二个参数，用来对每个元素进行处理，将处理后的值放入返回的数组。
var ary = Array.from(arrayLike, item => item * 2)
console.log(ary) //[2, 4]
3.1.3 Método ejemplo: find ()
para encontrar los primeros miembros de la matriz de calificación, si los rendimientos no se encuentran indefinidos
var ary = [{
id: 1,
name: '张三'
}, {
id: 2,
name: '李四'
}];
let target1 = ary.find((item, index) => item.id == 2);
console.log(target1); //Object id: 2 name: "李四"
let target2 = ary.find(item => item.id == 3);
console.log(target2);//undefined
3.1.4 método de instancia: FindIndex ()
para encontrar el primer miembro de la matriz en línea con las condiciones de la ubicación, o -1 si no se encuentra
let ary = [1, 5, 10, 15];
let index1 = ary.findIndex((value, index) => value > 9);
let index2 = ary.findIndex((value, index) => value > 20);
console.log(index1); // 2
console.log(index2); // -1
3.1.55 Ejemplo Método: incluye ()
indica si la matriz contiene un valor dado, devuelve un valor booleano.
let ary = ["a", "b", "c"];
let result1 = ary.includes('a')
let result2 = ary.includes('e')
console.log(result1) //true
console.log(result2) //false
- método de extensión (2) Cadena
3.2.1 cadena de plantilla
nueva ES6 crear una cadena de paso, uso de la definición anti-citado.
//用反引号定义
let name = `zhangsan`;
Ventajas:
las variables de cadena plantilla se pueden resolver.
cadena de plantilla puede envolver
puede llamar a una función en la cadena de plantilla.
//模板字符串中可以解析变量
let name = `张三`;
let sayHello = `Hello, 我的名字叫${name}`;
console.log(sayHello); //Hello, 我的名字叫张三
//在模板字符串中可以调用函数
const fn = () => {
return '我是fn函数'
}
let h = `我是模板字符串 ${fn()}`;
console.log(h); //我是模板字符串 我是fn函数
//模板字符串中可以换行
let html = `
<div>
<span>${name}</span>
</div>
`;
console.log(html);
//输出： <div>
// <span>张三</span>
// </div>
El método del Ejemplo 3.2.2: startsWith () y endsWith ()
startsWith (): si la cadena de parámetro que representa la cabeza de la cadena, devuelve un booleano
endsWith (): Indica si la cadena de parámetros al final de la cadena, devuelve un valor booleano
let str = 'Hello world!';
str.startsWith('Hello') // true
str.endsWith('!') // true
El método del Ejemplo 3.2.3: REPEAT ()
método REPEAT representa la cadena original se repite n veces, devuelve una nueva cadena.
console.log("y".repeat(5)) //yyyyy
- (3) Establecer la estructura de datos
ES6 ofrece nuevo Conjunto estructura de datos. Es similar a una matriz, pero el valor del miembro es valores únicos, no duplicados.
Sintaxis 3.3.1
Conjunto sí es un constructor para generar la estructura de conjunto de datos.
función de ajuste puede aceptar una matriz como un parámetro para inicializar.
const s = new Set();
const set = new Set([1, 2, 3, 4, 4]);
3.3.2 Método ejemplo
add (valor): añadir un poco de valor, volver estructura se fijó
borrar (valor): eliminar un valor, devuelve un valor booleano que indica si el éxito eliminación
tiene (valor): Devuelve un valor booleano que indica la valor de ajuste es un miembro de la
clara (): elimina todos los miembros, no devuelve ningún valor
const s = new Set();
s.add(1).add(2).add(3); // 向 set 结构中添加值
s.delete(2) // 删除 set 结构中的2值 s.has(1) // 表示 set 结构中是否有1这个值 返回布尔值
s.clear() // 清除 set 结构中的所有值
3.3.3 de desplazamiento
Ejemplos Establecer estructuras y arrays, también tiene método forEach para realizar una determinada operación en cada miembro, no hay valor de retorno.
// 遍历set数据结构 从中取值
const s = new Set(['a', 'b']);
s.forEach(value => {
console.log(value) //a b
})
