1.let
ES6 hat den Befehl let für Lebensvariablen hinzugefügt. Die Verwendung ähnelt der von var, die deklarierte Variable ist jedoch nur in dem Codeblock gültig, in dem sich der Befehl let befindet.
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>
Im obigen Code ist der Zähler i nur in der for-Schleife gültig, und ein Fehler wird gemeldet, wenn außerhalb der Schleife auf ihn verwiesen wird. let hat block scope. Es gibt kein Problem mit dem Bereich auf Blockebene mit var, und das Problem mit Eingabeaufforderungen für globale Variablen besteht.
2.const
const deklariert eine schreibgeschützte Konstante. Nach der Deklaration kann der Wert der Konstante nicht mehr geändert werden.
const a = 10；
a = 20；
console.log(a) //TypeError: Assignment to constant variable.
Der obige Code zeigt an, dass das Ändern des Werts der Konstante einen Fehler meldet.
Die von const deklarierte Variable darf den Wert nicht ändern. Wenn const die Variable deklariert, muss sie sofort initialisiert werden und kann nicht für eine spätere Zuweisung belassen werden.
const a;
console.log(a)
Der obige Code gibt an, dass für const ein Fehler gemeldet wird, wenn Sie nur deklarieren und nicht zuweisen.
let und const
1. Wiederholen Sie die Aussage nicht
2. Es gibt Probleme mit dem Bereich auf Blockebene
3. Nur gültig in dem Bereich auf Blockebene, in dem sich die Deklaration befindet.
3. Vorlagenzeichenfolge Die
Vorlagenzeichenfolge ist eine neue Form der Zeichenfolge
(1) Grundlegende Verwendung
let s1 = ` hello `
let s2 = ' hello '
(2) Spleißen von Strings und Variablen
let s3 =" a " + s1 + " b " + s2;
let s4 = ` a ${s1} b ${s2}`;
(3) String Wrap
var box =`<div>
<p>
<span>123</span>
</p>
<p>${a1}</p>
</div>`;
Das Auftreten von Vorlagenzeichenfolgen ändert die herkömmliche Methode zum Spleißen von Zeichenfolgen erheblich und verringert die Wahrscheinlichkeit von Codefehlern. Verbesserung der Entwicklungseffizienz
4. Dekonstruktionsaufgabe
Mit ES6 können Werte aus Arrays und Objekten extrahiert und Variablen nach einem bestimmten Muster, das als Destrukturierung bezeichnet wird, Werte zugewiesen werden
4.1: Objektstrukturzuordnung
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: Funktionsparameterstrukturzuordnung
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.Restparameter
ES6 führt den Rest-Parameter (in Form von ... Variablenname) ein, mit dem redundante Parameter der Funktion abgerufen werden, sodass das Argument-Objekt nicht verwendet werden muss. Die Variable mit dem Rest-Parameter ist ein Array, und die Variable fügt die zusätzlichen Parameter in das Array ein.
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
In der es6-Pfeilfunktion können keine Argumente verwendet werden. Um dieses Problem auszugleichen, sollte der Rest-Parameter geboren werden.
//...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. Pfeilfunktionen
ES6 ermöglicht die Verwendung von "Pfeilen" (=>) zum Definieren von Funktionen.
Szenario: Wird verwendet, um anonyme Funktionen zu ersetzen.
Code kopieren
Grundlegende Verwendung
//匿名函数
div.onclick=function(){
console.log("你好")
}
//箭头函数
div.onclick=()=>{
console.log("你好")
}
复制代码
有一个参数的箭头函数
复制代码
var fn=(a)=>{
console.log("abc");
}
//等价于：
var fn=a=>{
console.log("abc");
}
Pfeilfunktionen mit 2 oder mehr Parametern
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();
Was sind die Unterschiede zwischen Pfeilfunktionen und normalen anonymen Funktionen?
1. Dieses Objekt im Funktionskörper ist das Objekt, in dem sich die Definition befindet, nicht das Objekt, in dem sie verwendet wird.
2. Es kann nicht als Konstruktor verwendet werden, dh der neue Befehl kann nicht verwendet werden, da sonst ein Fehler auftritt ausgelöst
3. Es kann nicht verwendet werden Das Argumentobjekt, das im Funktionskörper nicht vorhanden ist. Wenn Sie es verwenden möchten, können Sie stattdessen den Rest-Parameter verwenden.
4. Der Befehl Yield kann nicht verwendet werden, daher können Pfeilfunktionen nicht als Generatorfunktionen verwendet werden.
5. Die Generatorfunktion wird jetzt häufig durch Async ersetzt
7. Die Erweiterung des Objekts Der Spread-
Operator (Spread) besteht aus drei Punkten (...). Wird verwendet, um alle durchlaufbaren Eigenschaften des Parameterobjekts abzurufen und in das aktuelle Objekt zu
kopieren. 7.1 Object.assign: Vererbung der Kopie realisieren
//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);
Das obige kann eine flache Kopie erreichen, aber der Code ist etwas zu viel. Die Objekterweiterung von es6 ist eine großartige Möglichkeit, das Problem der flachen Kopie zu lösen.
var car = {Marke: "BMW", Preis: "368000", Länge: "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);
Objekterweiterung, einfach und bequem, der Code ist kürzer, weniger Code, um leistungsfähigere Funktionen zu erreichen.
8.Versprechen
Promise ist eine Lösung für die asynchrone Programmierung (Callback Hell)
在没有promise都是这样写的回调，一层一层的写，
$.get("/getUser",function(res){
$.get("/getUserDetail",function(){
$.get("/getCart",function(){
$.get("/getBooks",function(){
//...
})
})
})
})
.
Grundlegende Verwendung von Versprechen
var promise=new Promise((resolve,reject)=>{
//b 把需要执行的异步操作放在这里
$.get("/getUser",res=>{
//获取数据的异步操作已经执行完毕了，等待下一步的执行，通过执行resolve函数，告诉外界你可以执行下一步操作了
//c、
resolve(res)
//而执行的下一步操作，其实就是写在then的回调函数中的
})
})
//a、
promise.then(res=>{
//d、执行后续的操作
console.log(res);
})
Promise realisiert einen mehrschichtigen Rückruf
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=>{
//购物车信息
})
Versprechen Sie die Behandlung von Implementierungsfehlern
new Promise((resolve,reject)=>{
$.ajax({
url:"/getUser",
type:"GET",
success:res=>{
resolve(res);
},
error:res=>{
reject(res)
}
})
}).then(resSuccess=>{
//成功的返回值
},resError=>{
//失败的返回值
})