1.let
ES6 agregó el comando let para variables de vida. Su uso es similar a var, pero la variable declarada solo es válida en el bloque de código donde se encuentra el comando let.
for (let i = 0; i < 10; i++) {
}
console.log(i) //ReferenceError: i is not defined<br><br>for(var i=0;i<10;i++){<br><br>}<br>console.log(i) //10<br>
En el código anterior, el contador i solo es válido en el ciclo for, y se informará un error si se hace referencia a él fuera del ciclo. deja que tenga alcance de bloque. No hay ningún problema de alcance a nivel de bloque con var, y existe el problema con las solicitudes de variables globales.
2.const
const declara una constante de solo lectura. Una vez declarada, el valor de la constante no se puede cambiar.
const a = 10；
a = 20；
console.log(a) //TypeError: Assignment to constant variable.
El código anterior indica que cambiar el valor de la constante reportará un error.
La variable declarada por const no debe cambiar el valor, lo que significa que una vez que const declara la variable, debe inicializarse inmediatamente y no puede dejarse para una asignación posterior.
const a;
console.log(a)
El código anterior indica que para const, si solo declara y no asigna, se informará un error.
dejar y const
1. No repitas la afirmación
2. Hay problemas de alcance a nivel de bloque
3. Solo válido en el ámbito de nivel de bloque donde se encuentra la declaración.
3. Cadena de plantilla La cadena de
plantilla es una nueva forma de cadena
(1) Uso básico
let s1 = ` hello `
let s2 = ' hello '
(2) Empalme de cadenas y variables
let s3 =" a " + s1 + " b " + s2;
let s4 = ` a ${s1} b ${s2}`;
(3) Envoltura de hilo
var box =`<div>
<p>
<span>123</span>
</p>
<p>${a1}</p>
</div>`;
La aparición de cadenas de plantilla cambia en gran medida el método tradicional de empalme de cadenas y reduce la posibilidad de errores de código. Mejorar la eficiencia del desarrollo
4. Tarea de deconstrucción
ES6 permite extraer valores de matrices y objetos y asignar valores a variables de acuerdo con un patrón determinado, que se denomina desestructuración.
4.1: Asignación de estructura de objeto
var obj ={ name:"abc",age:18 };
//用解构赋值的方式获取name、age
let { name } = obj; //创建了一个变量name，值=obj.name
console.log(name); //"abc"
let { age } =obj;
console.log(age); //18
4.1: Asignación de la estructura de parámetros de función
function f1(obj){
console.log(obj.age);
console.log(obj.height)
}
//等价于
function f1({ age,height }){
console.log(age);
console.log(height)
}
f1({age:5,height:180})
5.parámetros de descanso
ES6 introduce el parámetro rest (en forma de ... nombre de variable), que se utiliza para obtener parámetros redundantes de la función, de modo que no es necesario utilizar el objeto de argumentos. La variable con el parámetro rest es una matriz y la variable coloca los parámetros adicionales en la matriz.
function fn(){
//arguments是函数内部的一个局部变量，
//arguments.length表示函数的实参的个数
console.log(arguments.length);
for(var i =0 ; i<arguments.length; i++){
console.log(arguments[i]);
}
}
fn(1,3,5) //3
// fn("a","b","c","d","e") //5
Los argumentos no se pueden utilizar dentro de la función de flecha es6 Para compensar este problema, debe nacer el parámetro rest.
//...args就是rest参数
//-->产生了一个变量，这个变量是一个数组，数组里面包含了这个函数调用时传递的所有实参
function q(...args){
//验证args是不是数组？
console.log(args instanceof Array);//true
console.log(Object.prototype.toString.call(args));//"[object Array]"
console.log(Array.isArray(args)); //true es5中的新方法
console.log(args);
}
q(1,3,5);
q(2,3,4,5,6,7,8);
6. Funciones de flecha
ES6 permite el uso de "flechas" (=>) para definir funciones.
Escenario: se utiliza para reemplazar funciones anónimas
Copiar código
Uso básico
//匿名函数
div.onclick=function(){
console.log("你好")
}
//箭头函数
div.onclick=()=>{
console.log("你好")
}
复制代码
有一个参数的箭头函数
复制代码
var fn=(a)=>{
console.log("abc");
}
//等价于：
var fn=a=>{
console.log("abc");
}
Funciones de flecha con 2 o más parámetros
var f=(a,b,c)=>{
console.log("abc")
}
复制代码
var p={
age:18,
//es6中对象方法的箭头函数表示形式
run:()=>{
setTimeout(()=>{
//this:window
console.log(this);//this是window
},100)
},
travel:function(){
//this:p
setTimeout(()=>{
console.log(this);//this是p
},100)
},
//推荐使用的方式☆☆☆：es6中对象方法的简写形式
say(){
console.log("say方法中的this：",this);
setTimeout(()=>{
console.log("say内部的延迟函数：",this);//this是p
},100)
},
}
p.run();
p.travel();
p.say();
¿Cuáles son las diferencias entre las funciones de flecha y las funciones anónimas ordinarias?
1. Este objeto en el cuerpo de la función es el objeto donde se ubica la definición, no el objeto donde se usa
2. No se puede usar como constructor, es decir, el nuevo comando no se puede usar, de lo contrario se producirá un error arrojado
3. No se puede utilizar El objeto de argumentos, que no existe en el cuerpo de la función. Si desea utilizarlo, puede utilizar el parámetro rest en su lugar.
4. El comando de rendimiento no se puede usar, por lo que las funciones de flecha no se pueden usar como funciones de generador.
5. La función del generador ahora se reemplaza a menudo por async
7. La expansión del objeto El
operador de propagación (propagación) son tres puntos (...). Se utiliza para recuperar todas las propiedades transitables del objeto de parámetro y copiarlas en el objeto actual
7.1 Object.assign: realizar la herencia de copia
//Object.assign 就是进行对象的浅拷贝
var source={ age:18,height:170,className:"3年2班" }
//克隆一个新对象出来
var newObj=Object.assign({},source);
console.log(newObj);
var newObj2={};
Object.assign(newObj2,source);
console.log(newObj2);
Lo anterior puede lograr una copia superficial, pero el código es demasiado La extensión de objeto de es6 es una excelente manera de resolver el problema de la copia superficial.
var car = {marca: "BMW", precio: "368000", longitud: "3 米"}
//克隆一个跟car完全一样的对象出来：
var car2={ ...car }
console.log(car2);
//新车子，跟car的长度不同，其他相同
var car3={ ...car,length:"4米" }
console.log(car3);
var car4={ ...car,type:"SUV"}
console.log(car4);
var car5={...car4,price:"69800",brand:"BYD"};
console.log(car5);
Extensión de objeto, simple y conveniente, el código es más breve, menos código para lograr funciones más potentes.
8 promesa
Promise es una solución para programación asincrónica (infierno de devolución de llamada)
在没有promise都是这样写的回调，一层一层的写，
$.get("/getUser",function(res){
$.get("/getUserDetail",function(){
$.get("/getCart",function(){
$.get("/getBooks",function(){
//...
})
})
})
})
.
Uso básico de la promesa
var promise=new Promise((resolve,reject)=>{
//b 把需要执行的异步操作放在这里
$.get("/getUser",res=>{
//获取数据的异步操作已经执行完毕了，等待下一步的执行，通过执行resolve函数，告诉外界你可以执行下一步操作了
//c、
resolve(res)
//而执行的下一步操作，其实就是写在then的回调函数中的
})
})
//a、
promise.then(res=>{
//d、执行后续的操作
console.log(res);
})
Promise realiza devolución de llamada multicapa
new Promise((resolve,reject)=>{
$.get("/getUser",res=>{
resolve(res)
})
}).then(res=>{
//用户基本信息
return new Promise(resolve=>{
$.get("/getUserDetail",res=>{
resolve(res)
})
})
}).then(res=>{
//用户详情
return new Promise(resolve=>{
$.get("/getCart",res=>{
resolve(res)
})
})
}).then(res=>{
//购物车信息
})
Gestión de errores de implementación de promesas
new Promise((resolve,reject)=>{
$.ajax({
url:"/getUser",
type:"GET",
success:res=>{
resolve(res);
},
error:res=>{
reject(res)
}
})
}).then(resSuccess=>{
//成功的返回值
},resError=>{
//失败的返回值
})