Erweiterte JavaScript-Klasse ES6 → ES11
- 1. Neue ES6-Funktionen
- 1.1. Schlüsselwort let
- 1.2. const-Schlüsselwort
- 1.3. Destrukturierung und Zuweisung von Variablen
- 1.4. Vorlagenzeichenfolge
- 1.5. Vereinfachen Sie das Schreiben von Objekten
- 1.6. Pfeilfunktion
- 1.7. Standardwerte von Funktionsparametern
- 1.8. Ruheparameter
- 1.9. Spread-Operator
- 1.9.5. Klonen von Objekten
- 2、Symbol
- 3. Iterator
- 4. Generatorfunktion
- 5、Versprechen
- 6、Einstellen
- 7、Karte
Referenzvideo: Shang Silicon Valley Web-Front-End-ES6-Tutorial mit ES6-ES11-
Unterstützungscode: https://gitee.com/Augenstern-creator/kuang-study-es6
1. Neue ES6-Funktionen
1.1. Schlüsselwort let
Das Schlüsselwort let wird zum Deklarieren von Variablen verwendet. Variablen, die mit let deklariert werden, haben mehrere Eigenschaften:
- Doppeldeklarationen sind nicht zulässig
//1. 变量不能重复声明
let star = '大林';
let star = '小林'; // 报错
- Bereich auf Blockebene (einschließlich Klammern, die durch if, else, while und for gebildet werden)
//2. 块儿级作用域
{
let girl = '秦xx';
}
console.log(gril); // 报错
- Es gibt keine variable Förderung
//3. 不存在变量提升
console.log(song); // 报错
let song = '恋爱达人';
- Hat keinen Einfluss auf die Bereichskette
//4. 不影响作用域链
{
let school = '尚硅谷';
function fn(){
console.log(school);
}
fn(); // 尚硅谷
}
Anwendungsszenarien:Verwenden Sie einfach let, wenn Sie in Zukunft Variablen deklarieren.
1.2. const-Schlüsselwort
Zur Deklaration wird das Schlüsselwort const verwendetKonstanteDie const-Deklaration weist die folgenden Merkmale auf
- Der Deklaration muss ein Anfangswert zugewiesen werden
//1. 一定要赋初始值
const A; // 报错
- Bezeichner werden im Allgemeinen in Großbuchstaben geschrieben
//2. 一般常量使用大写(潜规则)
const A = 100;
- Doppeldeklarationen sind nicht zulässig
const SCHOOL = '尚硅谷';
const SCHOOL = 'ZZU'; // 报错
- Der Wert darf nicht geändert werden
//声明常量
const SCHOOL = '尚硅谷';
//3. 常量的值不能修改
SCHOOL = 'ATGUIGU'; // 报错
- Blockumfang
//4. 块儿级作用域
{
const PLAYER = 'UZI';
}
console.log(PLAYER); // 报错！
- Änderungen an Elementen von Arrays und Objekten werden nicht als Änderungen an Konstanten gezählt und es wird kein Fehler gemeldet.
const TEAM = ['UZI','MXLG','Ming','Letme'];
TEAM.push('Meiko'); // 不报错
Hinweis: Änderungen an Objekteigenschaften und Änderungen an Array-Elementen lösen keine Konstantenfehler aus.
Anwendungsszenarien:Verwenden Sie const, wenn Sie Objekttypen deklarieren, und let, wenn Sie Nicht-Objekttypen deklarieren.
1.3. Destrukturierung und Zuweisung von Variablen
Mit ES6 können Sie Werte aus Arrays und Objekten extrahieren und diese nach bestimmten Mustern Variablen zuweisen, was als destrukturierende Zuweisung bezeichnet wird.
1.3.1. Destrukturierung und Zuweisung von Arrays
- Syntax: Daten mithilfe von eckigen Klammern destrukturieren
[]
//1. 数组的结构
const F4 = ['小沈阳','刘能','赵四','宋小宝'];
let [xiao, liu, zhao, song] = F4;
console.log(xiao); //小沈阳
console.log(liu); //刘能
console.log(zhao); //赵四
console.log(song); //宋小宝
1.3.2. Destrukturierung und Zuordnung von Objekten
- Syntax: Objekte mithilfe von geschweiften Klammern zerstören
{}
//2. 对象的解构
const zhao = {
name: '赵本山',
age: '不详',
xiaopin: function(){
console.log("我可以演小品");
}
};
let {
name, age, xiaopin} = zhao;
console.log(name); // 赵本山
console.log(age); // 不详
console.log(xiaopin); // [Function: xiaopin]
xiaopin(); // 我可以演小品
// 复杂解构
let wangfei = {
name: "王菲",
age: 18,
songs: ['红豆','流年','暧昧','传奇'],
history: [
{
name : '窦唯'
},
{
name: '李亚鹏'
},
{
name: '谢霆锋'
}
]
};
let {
songs: [one,two,three], history: [first,second,third]} = wangfei;
console.log(one); // 红豆
console.log(two); // 流年
console.log(three); // 暧昧
console.log(first); // { name: '窦唯' }
console.log(second); // { name: '李亚鹏' }
console.log(third); // { name: '谢霆锋' }
- Im Allgemeinen dekonstruieren wir weniger Attribute in Objekten und mehr Methoden in dekonstruierten Objekten., wie folgt verwenden:
let {
xiaopin} = zhao;
xiaopin();
Hinweis: Wenn Sie häufig Objektmethoden und Array-Elemente verwenden, können Sie die destrukturierende Zuweisungsform verwenden.
1.4. Vorlagenzeichenfolge
Die verwendete Vorlagenzeichenfolge ist eine erweiterte Version der ZeichenfolgeBacktick-Identifikation, Merkmale:
- Zeilenumbrüche können in Zeichenfolgen vorkommen
//1. 声明
let str1 = `我也是一个字符串哦!`;
console.log(str1, typeof str1);
// 我也是一个字符串哦! string
//2. 内容中可以直接出现换行符
let str2 = `<ul>
<li>沈腾</li>
<li>玛丽</li>
<li>魏翔</li>
<li>艾伦</li>
</ul>`;
console.log(str2);
- Über das Formular können
${xxx}Variablen ausgegeben werden
//3. 变量拼接
let lovest = '魏翔';
let out = `${
lovest}是我心目中最搞笑的演员!!`;
console.log(out);
// 魏翔是我心目中最搞笑的演员!!
Beachten:Verwenden Sie beim Verketten von Zeichenfolgen und Variablen Vorlagenzeichenfolgen
1.5. Vereinfachen Sie das Schreiben von Objekten
**ES6 ermöglicht das direkte Schreiben von Variablen und Funktionen in geschweifte Klammern als Eigenschaften und Methoden von Objekten. **Diese Art des Schreibens ist prägnanter
let name = '尚硅谷';
let age = 20;
// 原始写法
const school1 = {
name: name,
age: age,
change: function() {
console.log('我们可以改变你!!');
},
improve: function() {
console.log('我们可以提高你!!');
}
}
// ES6 写法
const school2 = {
name,
age,
change() {
console.log('我们可以改变你!!');
},
improve() {
console.log("我们可以提高你的技能");
}
}
Beachten:Objektabkürzungen vereinfachen den Code, daher verwenden Sie von nun an nur noch Abkürzungen.
1.6. Pfeilfunktion
ES6 ermöglicht die Verwendung vonPfeil =>Funktion definieren
// 声明一个函数原始写法
let fn = function(){
}
// 声明函数箭头函数写法
let fn = (a,b) => {
return a + b;
}
// 调用函数
let result = fn(1, 2);
console.log(result);
Hinweise zu Pfeilfunktionen :
- Wenn nur ein formaler Parameter vorhanden ist, können die Klammern weggelassen werden
let add = (n) => {
return n + n;
}
console.log(add(9));
// 省略小括号
let add = n => {
return n + n;
}
- Wenn der Funktionskörper nur eine Anweisung enthält, können die geschweiften Klammern weggelassen werden (Lassen Sie die geschweiften Klammern weg und auch die Return-Anweisung muss weggelassen werden), ist der Rückgabewert der Funktion das Ausführungsergebnis der Anweisung
// 函数体如果只有一条语句，则省略花括号和return语句
let pow1 = (n) => {
return n * n;
}
console.log(pow1(9));
// 省略花括号
let pow2 = n => n * n;
console.log(pow2(9));
- Die Pfeilfunktion this zeigt auf den Wert von this in dem Bereich, in dem er deklariert ist.
//1. this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值
function getName() {
console.log(this.name);
}
let getName2 = () => {
console.log(this.name);
}
//设置 window 对象的 name 属性
window.name = '尚硅谷';
const school = {
name: "ATGUIGU"
}
//直接调用
getName();
getName2();
//call 方法调用
getName.call(school);
getName2.call(school);
- Pfeilfunktionen können nicht als Konstruktoren instanziiert werden
//4. 箭头函数不能作为构造实例化对象
let Person = (name, age) => {
this.name = name;
this.age = age;
}
let me = new Person('xiao',30);
console.log(me); // Person is not a constructor
- Argumente können nicht verwendet werden
//5. 不能使用 arguments 变量
let fn = () => {
console.log(arguments);
}
fn(1,2,3); // arguments is not defined
Beachten:Pfeilfunktionen ändern diesen Zeiger nicht und eignen sich daher sehr gut zur Angabe von Rückruffunktionen.。
1.7. Standardwerte von Funktionsparametern
ES6 ermöglicht die Zuweisung von Anfangswerten zu Funktionsparametern
- Anfangswert formaler Parameter, Parameter mit Standardwerten, im Allgemeinen später angeordnet (versteckte Regel)
// 1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)
function add(a,c=10,b) {
return a + b + c;
}
let result = add(1,2);
console.log(result);
- Kombiniert mit Destrukturierungsauftrag
//原始写法
function connect (options){
let host = options.host;
let username = options.username;
let password = options.password;
let port = options.password;
}
// 调用 connect 方法,向里面传个对象
connect({
host: 'atguigu.com',
username: 'root',
password: 'root',
port: 3306
})
// 与解构赋值结合写法
function connect({
host="127.0.0.1", username,password, port}){
console.log(host)
console.log(username)
console.log(password)
console.log(port)
}
// 调用 connect 方法,向里面传个对象
connect({
username: 'root',
password: 'root',
port: 3306
})
1.8. Ruheparameter
ES6 führt Restparameter ein, die zum Erhalten der tatsächlichen Parameter von Funktionen verwendet werden und anstelle von Argumenten verwendet werden.
- Rest funktioniert ähnlich wie Argumente
function add(...args){
console.log(args);
}
add(1,2,3,4,5);
- Der Restparameter muss der letzte Formalparameter sein
function minus(a,b,...args){
console.log(a,b,...args);
}
minus(100,1,2,3,4,5,19);
Beachten:Der Rest-Parameter eignet sich sehr gut für Szenarien mit einer unbegrenzten Anzahl von Parameterfunktionen.
1.9. Spread-Operator
Wenn kein Spread-Operator vorhanden ist, können Sie Push, Splice, Concat und andere Methoden nur in Kombination verwenden, um vorhandene Array-Elemente in einen Teil eines neuen Arrays umzuwandeln. Mit dem Spread-Operator wird die Konstruktion neuer Arrays einfacher und eleganter. Der Spread-Operator besteht ebenfalls aus drei Punkten (…). Es ist wie die umgekehrte Operation von Restparametern, bei der ein Array in eine durch Kommas getrennte Parametersequenz konvertiert und das Array entpackt wird.
// 展开数组
console.log(...[1,2,3]);
// 1 2 3
console.log(1,...[2,3,4],5)
// 1 2 3 4 5
console.log([1,...[2,3,4],5])
// [1, 2, 3, 4, 5]
1.9.1. Array-Zusammenführung
//1. 数组的合并
const kuaizi = ['王太利', '肖央'];
const fenghuang = ['曾毅', '玲花'];
// ES5数组合并写法
const zuixuanxiaopingguo1 = kuaizi.concat(fenghuang);
console.log(zuixuanxiaopingguo1);
// [ '王太利', '肖央', '曾毅', '玲花' ]
// ES6扩展运算符数组合并
const zuixuanxiaopingguo2 = [...kuaizi, ...fenghuang];
console.log(zuixuanxiaopingguo2);
// [ '王太利', '肖央', '曾毅', '玲花' ]
1.9.2. Array-Klonen
let arr = [1, 2, 3];
let arr2 = [...arr]; // [1, 2, 3]
arr2.push(4);
console.log(arr2); // [1, 2, 3, 4]
// 数组含空位
let arr3 = [1, , 3],
arr4 = [...arr3];
console.log(arr4); // [1, undefined, 3]
- Hier ist eine flache Kopie
1.9.3. Konvertieren Sie ein Pseudo-Array in ein echtes Array
<body>
<div></div>
<div></div>
<div></div>
<script>
//3. 将伪数组转为真正的数组
const divs = document.querySelectorAll('div'); //获取到的是一个伪数组
console.log(divs);
const divArr = [...divs];
console.log(divArr);
</script>
</body>
1.9.4. Objektzusammenführung
let age = {
age: 15};
let name = {
name: "Amy"};
let person = {
...age, ...name};
console.log(person); // {age: 15, name: "Amy"}
1.9.5. Klonen von Objekten
var obj1 = {
foo: 'bar', x: 42 };
var clonedObj = {
...obj1 };
console.log(clonedObj); // { foo: "bar", x: 42 }
2、Symbol
ES6 führt einen neuen primitiven Datentyp Symbol ein, der einen eindeutigen Wert darstellt. Es ist der siebte Datentyp der JavaScript-Sprache und ein Datentyp ähnlich einer Zeichenfolge.
- Der Wert von Symbol ist eindeutig und wird zur Lösung von Namenskonflikten verwendet.
- Symbolwerte können nicht mit anderen Daten bearbeitet werden
- Die durch Symbol definierten Objekteigenschaften können nicht mit der for...in-Schleife durchlaufen werden, aber Sie können sie verwenden,
Reflect.ownKeysum alle Schlüsselnamen des Objekts abzurufen.
2.1. Erstellung eines Symbols
- Symbol()
- Schlüsselwörter können nicht vor Symbol hinzugefügt werden
newund ein eindeutiger Symboltypwert kann durch direkten Aufruf erstellt werden.
- Schlüsselwörter können nicht vor Symbol hinzugefügt werden
let s = Symbol();
console.log(s,typeof s);
// Symbol() symbol
- Stmbol('string')
- Die Zeichenfolge hier ist nur eine Beschreibung und das zurückgegebene Ergebnis ist nicht festgelegt.(Es gibt zwei Zhang Sans, aber die Nummern der beiden Zhang Sans sind unterschiedlich)
// 创建 Symbol 的时候，可以添加一个描述
const sym = Symbol('foo');
// sym.description 可以直接返回 Symbol 的描述
console.log(sym.description); // foo
let s2 = Symbol('张三');
let s3 = Symbol('张三');
// 没有两个 Symbol 的值是相等的
console.log( s2 === s3); //false
- Symbol.for('string')
- Durch die Erstellung eines Symbols auf diese Weise kann ein fester Symbolwert über eine Zeichenfolge zurückgegeben werden
let s4 = Symbol.for('尚硅谷');
let s5 = Symbol.for('尚硅谷');
console.log(s4 === s5); // true
2.2. Kann nicht mit anderen Daten betrieben werden
//不能与其他数据进行运算
// let result = s + 100;
// let result = s > 100;
// let result = s + s;
2.3. 7 Datentypenspeicher
Mantra: USONB == Du bist so kleinlich
U == undefiniert
S == Zeichenfolgensymbol
o == Objekt
n == Nullzahl
b == Boolescher Wert
2.4. Anwendung des Symbols
2.4.1. Symbol als Attributname
In ES6 unterstützen Objekteigenschaftsnamen Ausdrücke, sodass Sie eine Variable als Eigenschaftsnamen verwenden können, was zur Vereinfachung von Code hilfreich ist. Der Ausdruck muss jedoch in eckige Klammern gesetzt werden :
let prop = "name";
const obj = {
// 使用表达式作为属性名,需要加方括号
[prop]: "liao"
};
console.log(obj.name); // 'liao'
Nachdem wir diese neue Funktion verstanden haben, lernen wir weiter. Der Symbolwert kann als Attributname verwendet werden, da der Symbolwert eindeutig ist. Wenn er also als Attributname verwendet wird, wird er mit keinem anderen Attributnamen wiederholt:
let name = Symbol();
let obj = {
[name]: "liao"
};
console.log(obj); // { Symbol(): 'liao' }
Das gedruckte Objekt hat einen Attributnamen, der ein Symbolwert ist. Wenn wir auf diesen Attributwert zugreifen möchten, dürfen wir keine .Punkte verwenden, sondern müssen eckige Klammern verwenden:
console.log(obj[name]); // 'liao'
console.log(obj.name); // undefined
- Wenn Symbol als Attributname verwendet wird, muss Symbol
[]umbrochen werden
2.4.2. Traversierung von Symbolattributnamen
Verwenden Sie als Attributnamen einen Wert vom Typ Symbol. Dieses Attribut wird von , oder nicht for…indurchlaufen oder abgerufenObject.keys()Object.getOwnPropertyNames()JSON.stringify()
Object.keys(): Alle Attributnamenschlüssel abrufenObject.getOwnPropertyNames(): Alle Attributnamenschlüssel abrufenJSON.stringify(): Alle Attributnamen, Schlüssel und Attributwertwerte abrufen
const obj1 = {
name: "林晓",
age: 18,
salary: 30000,
};
for (const key in obj1) {
// 遍历属性名 key
console.log(key);
/**
* name
age
salary
*/
}
// 获取所有的属性名 key
console.log(Object.keys(obj1));
// [ 'name', 'age', 'salary' ]
// 获取所有的属性名 key
console.log(Object.getOwnPropertyNames(obj1));
// [ 'name', 'age', 'salary' ]
// 获取所有的属性名key和属性值value
console.log(JSON.stringify(obj1));
// {"name":"林晓","age":18,"salary":30000}
- Wir können die folgenden zwei Methoden verwenden, um die Attributnamen aller Symboltypen des Objekts zu erhalten
Reflect.ownKeysNeue APIObject.getOwnPropertySymbols::
/**
* 但是如果是 Symbol 属性名
*/
const salary = Symbol("salary");
const name = Symbol("name");
const obj = {
[name]: "林晓",
age: 18,
[salary]: 30000,
};
// age 只能拿到 key,拿不到Symbol类型的 name 属性名
for (const key in obj) {
console.log(key);
}
// 获取到obj对象里面的所有 Symbol 属性名
const SymbolPropNames = Object.getOwnPropertySymbols(obj);
console.log(SymbolPropNames); // [ Symbol(name), Symbol(salary) ]
// 获取第一个 Symbol 类型的属性值
console.log(obj[SymbolPropNames[0]]); // 林晓
// 获取第二个 Symbol 类型的属性值
console.log(obj[SymbolPropNames[1]]); // 30000
// 新的api: Reflect.ownKeys()
console.log(Reflect.ownKeys(obj)); // [ 'age', Symbol(name), Symbol(salary) ]
2.4.3, Symbol.for() und Symbol.keyFor()
Symbol enthält zwei statische Methoden forund keyFor.
const s1 = Symbol("liao");
const s2 = Symbol("liao");
const s3 = Symbol.for("liao");
const s4 = Symbol.for("liao");
console.log(s1 === s3); // false
console.log(s3 === s4); // true
- Bei direkter Verwendung der Symbol-Methode sind die erstellten Symbolwerte nicht gleich, selbst wenn die eingehenden Zeichenfolgen gleich sind.
- Wenn Sie die Methode zum Übergeben einer Zeichenfolge verwenden
Symbol.for, prüft sie zunächst, ob ein Symbolwert durch Aufrufen der Methode Symbol.for mithilfe der Zeichenfolge erstellt wurde. Wenn dies der Fall ist, geben Sie den Wert zurück. Wenn nicht, verwenden Sie die Zeichenfolge, um einen neuen zu erstellen eins.
// Symbol.keyFor() 方法传入一个 symbol 值,返回该值在全局注册的键名
const sym = Symbol.for("liao");
console.log(Symbol.keyFor(sym)); // 'liao'
2.5. Integrierter Symbolwert
Zusätzlich zur Definition der von Ihnen verwendeten Symbolwerte bietet ES6 auch 11 integrierte Symbolwerte, die auf intern in der Sprache verwendete Methoden verweisen. Diese Methoden können als magische Methoden bezeichnet werden, da sie in bestimmten Szenarien automatisch ausgeführt werden.
| Symbol.hasInstance | Diese Methode wird aufgerufen, wenn andere Objekte den Instanzoperator verwenden, um zu bestimmen, ob sie Instanzen des Objekts sind. |
|---|---|
| Symbol.isConcatSpreadable | Die Symbol.isConcatSpreadable-Eigenschaft des Objekts entspricht einem booleschen Wert, der angibt, ob das Objekt erweitert werden kann, wenn es in Array.prototype.concat() verwendet wird. |
| Symbol.Arten | Diese Eigenschaft wird beim Erstellen abgeleiteter Objekte verwendet |
| Symbol.match | Wenn str.match(myObject) ausgeführt wird und die Eigenschaft vorhanden ist, wird sie aufgerufen und gibt den Rückgabewert der Methode zurück. |
| Symbol.ersetzen | Wenn das Objekt von der Methode str.replace(myObject) aufgerufen wird, wird der Rückgabewert dieser Methode zurückgegeben. |
| Symbolsuche | Wenn das Objekt von der Methode str.search (myObject) aufgerufen wird, wird der Rückgabewert dieser Methode zurückgegeben. |
| Symbol.split | Wenn das Objekt von der Methode str.split(myObject) aufgerufen wird, wird der Rückgabewert dieser Methode zurückgegeben. |
| Symbol.iterator | Wenn ein Objekt eine for...of-Schleife ausführt, wird die Methode Symbol.iterator aufgerufen und der Standarditerator des Objekts zurückgegeben. |
| Symbol.toPrimitive | Wenn das Objekt in einen primitiven Typwert konvertiert wird, wird diese Methode aufgerufen und der dem Objekt entsprechende primitive Typwert zurückgegeben. |
| Symbol. toStringTag | Wenn die toString-Methode für das Objekt aufgerufen wird, wird der Rückgabewert der Methode zurückgegeben. |
| Symbol. Unerträgliche | Dieses Objekt gibt an, welche Eigenschaften aus der with-Umgebung ausgeschlossen werden, wenn das with-Schlüsselwort verwendet wird. |
3. Iterator
Iterator (Iterator) ist ein Mechanismus. Es handelt sich um eine Schnittstelle, die einen einheitlichen Zugriffsmechanismus für verschiedene Datenstrukturen bietet. Solange die Iterator-Schnittstelle in einer beliebigen Datenstruktur bereitgestellt wird, kann der Durchlaufvorgang abgeschlossen werden.
- ES6 hat einen neuen Durchlaufbefehl für die Schleife „for...of“ erstellt, und die Iterator-Schnittstelle wird hauptsächlich für die Verwendung durch „for…of“ verwendet
- Daten mit nativer Iteratorschnittstelle (können mit for of durchlaufen werden)
- Array
- Argumente
- Satz
- Karte
- Zeichenfolge
- TypedArray
- Knotenliste
3.0. Gängige Array-Methoden
Hier ist eine kurze Einführung in die gängigen Methoden von Arrays:
- So ändern Sie das ursprüngliche Array:
// 1、push() : 数组末尾添加数据,返回数组的长度
var arr = [10, 20, 30, 40]
res = arr.push(20)
console.log(arr);//[10,20,30,40,20]
console.log(res);//5
// 2、pop():数组末尾弹出数据
var arr = [10, 20, 30, 40]
res =arr.pop()
console.log(arr);//[10,20,30]
console.log(res);//40
// 3、unshift(): 数组头部添加数据,返回数组的长度
var arr = [10, 20, 30, 40]
res=arr.unshift(99)
console.log(arr);//[99,10,20,30,40]
console.log(res);//5
// 4、shift():数组头部删除数据,返回删除的那个数据
var arr = [10, 20, 30, 40]
res=arr.shift()
console.log(arr);[20,30,40] // [ 20, 30, 40 ]
console.log(res);// 10
// 5、reverse():翻转数组,返回翻转的数据
var arr = [10, 20, 30, 40]
res=arr.reverse()
console.log(arr);//[40,30,20,10]
console.log(res);//[40,30,20,10]
// 6、sort(): 排序
var arr = [1,3,5,7,9,10]
console.log(arr.sort()); // 默认排序顺序为按字母升序,所以通常不准确
// 正序排列
arr.sort(function(a,b){
return(a-b)})
console.log(arr); // [1,3,5,7,9,10]
// 倒序排列
arr.sort(function(a,b){
return(b-a)})
console.log(arr);// [ 10, 9, 7, 5, 3, 1 ]
// 7、splice(开始的索引,截取几个): 截取数组,返回截取出来的数据
var arr = [1,3,5,7,9,10]
res = arr.splice(1,2) // 从索引1开始,截取2个数据
console.log(arr); // [ 1, 7, 9, 10 ]
console.log(res); // [ 3, 5 ]
//splice(开始的索引,截取几个,你要插入的数据) : 删除并插入数据
var arr = [1,3,5,7,9,10]
res = arr.splice(1,1,999,888) // 从索引1开始,截取1个数据删除,并插入999,888
console.log(arr); // [1, 999, 888, 5,7,9,10]
console.log(res); // [ 3 ]
- Methode ohne Änderung des ursprünglichen Arrays
// 1、concat(): 合并数据
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.concat(20,"小敏",50)
console.log(arr) // [10, 20, 10, 30, 40, 50, 60,20,"小敏",50]
console.log(res);// [10, 20, 10, 30, 40, 50, 60,20,"小敏",50]
//2、join(): 数组转字符串
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.join("+")
console.log(arr) // 数组不改变 [10, 20, 10, 30, 40, 50, 60]
console.log(res); // 10+20+10+30+40+50+60
console.log(typeof res); //string
//3、slice(开始索引,结束索引): 截取数组的一部分数据,返回截取的数据,前闭后开 [ ),
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.slice(1,4)
console.log(arr) // 数组不改变 [10, 20, 10, 30,40, 50, 60]
console.log(res);// [ 20, 10, 30 ]
//4、indexOf(数值):从左边开始检查数组中有没有这个数值,如果有就返回该数据第一次出现的索引
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.indexOf(10)
console.log(arr) // 数组不改变 [10, 20, 10, 30,40, 50, 60]
console.log(res); // 返回第一次出现的索引 0
//indexOf(数值,开始的索引)
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.indexOf(10,1)
console.log(arr) // 数组不改变 [10, 20, 10, 30,40, 50, 60]
console.log(res); // 2
//5、lastIndexOf(数值):从右边开始检查数组中有没有这个数值,如果有就返回该数据第一次出现的索引
- Neue Array-Methoden in ES6
//1、forEach(): 循环遍历数组
var arr = ['盖伦','德玛','大风车']
arr.forEach((item,index) => {
// index 是数组下标,item是数组值
console.log(index);
console.log(item);
});
// 2、map 加工数组
var arr = ['盖伦','德玛','大风车'];
var newArr = arr.map((item,index) => {
console.log(index);
console.log(item);
return item + '111'
});
console.log(newArr); // [ '盖伦111', '德玛111', '大风车111' ]
// 3、filter() 过滤数组
var arr = [1,2,3,4,5];
var newArr = arr.filter((item,index) => {
return item > 2;
});
console.log(newArr); // [ 3, 4, 5 ]
// 4、every() 判断数组是不是满足所有条件
var arr = [1, 2, 3, 4, 5]
var res = arr.every((item,index) => {
return item > 0;
})
console.log(res);//打印结果 true
// 6、find() 用来获取数组中满足条件的第一个数据
var arr = [1, 2, 3, 4, 5]
var res = arr.find((item,index) => {
return item > 3;
})
console.log(res);//打印结果 4
3.1. Array-Traversierung
Schauen wir uns zunächst an, wie das Array durchlaufen wird:
//声明一个数组
const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];
//使用 for...in 遍历数组
for (let i in xiyou) {
// i 是数组的下标
console.log(i);
console.log(xiyou[i]);
}
//使用 for...of 遍历数组
for (let v of xiyou) {
console.log(v);
/**
* 唐僧
孙悟空
猪八戒
沙僧
*/
}
//forEach(): 循环遍历数组
var arr = ['盖伦','德玛','大风车']
arr.forEach((index,item) => {
// index 是数组下标,item是数组值
console.log(index);
console.log(item);
});
3.2. Objektdurchquerung
//对象
var test = {
name : "zs",
age: "18"
}
// 遍历属性名和属性值
for(let key in test) {
// key 是属性名
console.log(key);
console.log(test[key]);
}
// 获取所有的属性名
console.log(Object.keys(test)); // [ 'name', 'age' ]
// 获取所有的属性值
console.log(Object.values(test)); // [ 'zs', '18' ]
3.3. Konvertierung zwischen Arrays und Objekten
- Konvertieren Sie ein Array in ein Objekt
// 数组转对象
// 方法一:使用 spread 扩展运算符
const arr1 = ['one','two','three'];
const obj1 = {
...arr1};
console.log(obj1); // { 0: 'one', 1: 'tow', 2: 'three' }
// 方法二:使用 foreach
const arr = [1,2,3,4,5];
let obj = {
};
arr.forEach((item,index) => {
// index 是下标, item 是数组元素
obj[index] = item;
})
console.log(obj); //{ 0: 1, 1: 2, 2: 3, 3: 4, 4: 5 }
- Konvertieren Sie ein Objekt in ein Array
3.4. Iterator
Warum können Daten mit for... of durchlaufen werden? Weil das Array eine Eigenschaft hatSymbol.iterator
//声明一个数组
const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];
console.log(xiyou);
Beachten:Wenn Sie die Durchquerung von Daten anpassen müssen, denken Sie an Iteratoren
// 原理
//声明一个数组
const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];
//创建数组的迭代器
let iterator = xiyou[Symbol.iterator]();
//调用对象的next方法
console.log(iterator.next());//{ value: '唐僧', done: false }
console.log(iterator.next());//{ value: '孙悟空', done: false }
console.log(iterator.next());//{ value: '猪八戒', done: false }
console.log(iterator.next());//{ value: '沙僧', done: false }
console.log(iterator.next());//{ value: undefined, done: true }
4. Generatorfunktion
Die Generatorfunktion ist eine von ES6 bereitgestellte asynchrone Programmierlösung, deren syntaktisches Verhalten sich völlig von herkömmlichen Funktionen unterscheidet.
/**
* generator 生成器函数,可以通过 yield 关键字 , 将函数挂起
* 和普通函数的区别
* 1. function 后面,函数名之前有个星号 *
* 2. 只能在函数内部使用 yield 表达式
* 3. generator函数是分段执行的, yield 语句是赞同执行, next() 是恢复执行
*/
function* func(){
yield 2; // 调用一次 next 会执行到这
yield 3; // 调用二次 next 会执行到这
}
// 调用生成器函数,会返回一个迭代器对象,可以使用 next() 方法
let fn = func();
console.log(fn.next()); // { value: 2, done: false }
console.log(fn.next()); // { value: 3, done: false }
console.log(fn.next()); // { value: undefined, done: true }
Codebeschreibung:
*Es gibt keine Einschränkung hinsichtlich der Position des Sternchens- Das von der Generatorfunktion zurückgegebene Ergebnis ist ein Iteratorobjekt. Durch Aufrufen der nächsten Methode des Iteratorobjekts kann der Wert nach der Yield-Anweisung abgerufen werden.
- Yield entspricht der Pausenmarke der Funktion und kann auch als Trennzeichen der Funktion betrachtet werden. Bei jedem Aufruf der nächsten Methode wird ein Code ausgeführt.
- Die nächste Methode kann tatsächliche Parameter als Rückgabewert der yield-Anweisung übergeben
5、Versprechen
Promise ist eine neue Lösung für die asynchrone Programmierung, die in ES6 eingeführt wurde. Syntaktisch gesehen ist Promise ein Konstruktor, der asynchrone Vorgänge kapselt und deren Erfolgs- oder Fehlerergebnisse erhält .
//实例化 Promise 对象
// 参数是一个函数,函数的形参是 resolve 和 reject,resolve 可以改变 Promise的状态为成功,reject 可以改变Promise的状态为失败
const p = new Promise(function(resolve, reject) {
//异步操作定时器
setTimeout(function() {
let data = '数据库中的用户数据';
resolve(data);
}, 1000);
});
/**
* 调用 promise 对象的 then 方法,then 方法接收两个参数,两个参数都是函数,成功的函数形参是value,失败函数的形参是reason
* 上方 resolve 成功后,下面的 then 方法就是执行第一个函数的方法
*/
p.then(function(value) {
console.log(value); // 数据库中的用户数据
}, function(reason) {
console.error(reason);
})
Nachdem wir die Daten im asynchronen Betriebszeitgeber erhalten haben, können wir die Auflösungsfunktion aufrufen, um den Status des Promise-Objekts so zu ändern, dass der Status des Promise-Objekts erfolgreich ist. Nach dem Erfolg können wir die then-Methode des Promise-Objekts aufrufen. Die then-Methode empfängt zwei Parameter, die beide erfolgreich sind. Es handelt sich um einen Funktionstyp. Der erfolgreiche formale Parameter heißt Wert und der fehlgeschlagene formale Parameter heißt Grund. Wenn der Promise-Objektstatus als erfolgreich erkannt wird, wird die erste Methode in Die then-Methode wird ausgeführt.
<script>
//实例化 Promise 对象
const p = new Promise(function(resolve, reject) {
// 使用定期器来做一个异步任务的模拟
setTimeout(function() {
// let data = '数据库中的用户'
// resolve(data)
let err = '数据读取错误';
reject(err);
}, 1000);
});
//调用 promise 对象的 then 方法
p.then(function(value) {
console.log(value);
}, function(reason) {
console.error(reason);
})
</script>
Nachdem es uns nicht gelungen ist, Daten im Timer für asynchrone Operationen abzurufen, rufen wir die Ablehnungsfunktion auf, um den Status des Promise-Objekts so zu ändern, dass der Status des Promise-Objekts fehlgeschlagen ist. Nach einem Fehler können wir die Methode then des Promise-Objekts aufrufen und Erkennen Sie, dass der Status des Promise-Objekts fehlgeschlagen ist, und führen Sie dann die zweite Methode in der then-Methode aus.
Wenn das Promise-Objekt erfolgreich Daten erhält, wird die erste Callback-Funktion ausgeführt und ein Wert ausgegeben.
Wenn das Promise-Objekt keine Daten abrufen kann, wird die zweite Rückruffunktion ausgeführt und der Grund ausgegeben.
5.1. Versprechen Sie die Kapselung von Lesedateien
//1. 引入 fs 模块
const fs = require('fs');
//2. 调用方法读取文件
// fs.readFile('./resources/为学.md', (err, data)=>{
// //如果失败, 则抛出错误
// if(err) throw err;
// //如果没有出错, 则输出内容
// console.log(data.toString());
// });
//3. 使用 Promise 封装
const p = new Promise(function(resolve, reject){
fs.readFile("./resources/为学.md", (err, data)=>{
//判断如果失败
if(err) reject(err);
//如果成功
resolve(data);
});
});
p.then(function(value){
console.log(value.toString());
}, function(reason){
console.log("读取失败!!");
});
5.2. Promise kapselt Ajax
<body>
<script>
// 接口地址: https://api.apiopen.top/getJoke
const p = new Promise((resolve, reject) => {
//1. 创建对象
const xhr = new XMLHttpRequest();
//2. 初始化
xhr.open("GET", "https://api.apiopen.top/getJ");
//3. 发送
xhr.send();
//4. 绑定事件, 处理响应结果
xhr.onreadystatechange = function () {
//判断
if (xhr.readyState === 4) {
//判断响应状态码 200-299
if (xhr.status >= 200 && xhr.status < 300) {
//表示成功
resolve(xhr.response);
} else {
//如果失败
reject(xhr.status);
}
}
}
})
//指定回调
p.then(function(value){
console.log(value);
}, function(reason){
console.error(reason);
});
</script>
</body>
5.3, Promise.then-Methode
Rufen Sie die then-Methode auf. Das Rückgabeergebnis der then-Methode ist ein Promise-Objekt. Der Objektstatus wird durch das Ausführungsergebnis der Callback-Funktion bestimmt.
- Wenn das Rückgabeergebnis in der Rückruffunktion eine Eigenschaft vom Nicht-Promise-Typ ist
<body>
<script>
const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("获取数据成功");
}, 1000)
});
//调用 then 方法 then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定
//1. 如果回调函数中返回的结果是 非 promise 类型的属性, 状态为成功, 返回值为对象的成功的值
const result = p.then(value => {
console.log(value);
return 123;
}, reason => {
console.warn(reason);
})
console.log(result);
</script>
</body>
- Wenn das Rückgabeergebnis in der Rückruffunktion eine Eigenschaft vom Typ Promise ist
<body>
<script>
const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("获取数据成功");
}, 1000)
});
//调用 then 方法 then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定
//2. 如果回调函数中返回的结果是 promise 类型的属性,则then方法的返回状态由 promise 对象决定
const result = p.then(value => {
return new Promise((resolve, reject) => {
resolve('ok');
})
}, reason => {
console.warn(reason);
})
console.log(result);
</script>
</body>
- Fehler werfen
<body>
<script>
const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("获取数据成功");
}, 1000)
});
//调用 then 方法 then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定
//3.抛出错误
const result = p.then(value => {
//3. 抛出错误
throw new Error('出错啦!');
}, reason => {
console.warn(reason);
})
console.log(result);
</script>
</body>
Die Promise.then-Methode kann also in einer Kette aufgerufen werden
p.then(value =>{
},reason => {
}).then(value =>{
},reason => {
})
// 常用写法如下
p.then(value=>{
}).then(value=>{
});
5.4, Promise.catch-Methode
<body>
<script>
const p = new Promise((resolve, reject)=>{
setTimeout(()=>{
//设置 p 对象的状态为失败, 并设置失败的值
reject("出错啦!");
}, 1000)
});
// p.then(function(value){}, function(reason){
// console.error(reason);
// });
p.catch(function(reason){
console.warn(reason);
});
</script>
</body>
Promise.catchEs fehlt einfach Promise.thender syntaktische Zucker des ersten Funktionsparameters, thenalso verwenden Sie einfach .
6、Einstellen
-
Karteneigenschaften und -methoden
-
sizeGibt die Anzahl der Elemente von Set zurück -
addFügen Sie ein neues Element hinzu und geben Sie das aktuelle Set zurück -
hasÜberprüfen Sie, ob ein Set ein Element enthält -
clearLöschen Sie die Sammlung und geben Sie undefiniert zurück
-
//声明一个 set集合
let s = new Set();
let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);
console.log(s2);// { '大事儿', '小事儿', '好事儿', '坏事儿' }
// 注意Set集合会有去重功能,所以s2的元素个数其实是4个
// 元素个数
console.log(s2.size); // 4
// 添加新的元素
s2.add('喜事儿');
console.log(s2); // { '大事儿', '小事儿', '好事儿', '坏事儿', '喜事儿' }
// 删除元素
s2.delete('坏事儿');
// 检测是否存在某个值
console.log(s2.has('糟心事')); // false
// 清空
s2.clear();
console.log(s2);// {}
6.1. Inkassopraxis festlegen
- Array-Deduplizierung
let arr = [1,2,3,4,5,4,3,2,1];
//1. 数组去重
let result1 = new Set(arr); //此时result是一个集合,转化为数组只需要使用扩展运算符展开
console.log(result1); // { 1, 2, 3, 4, 5 }
let result2 = [...new Set(arr)];
console.log(result2); // [ 1, 2, 3, 4, 5 ]
- Finden Sie den Schnittpunkt zweier Mengen
let arr = [1,2,3,4,5,4,3,2,1];
let arr2 = [4,5,6,5,6];
// 首先先对数组去重
let result = [...new Set(arr)];
let result2 = [...new Set(arr2)];
7、Karte
-
ES6 stellt die Kartendatenstruktur bereit. Es ähnelt einem Objekt und ist ebenfalls eine Sammlung von Schlüssel-Wert-Paaren.
-
Datenstruktur. Es ähnelt einem Objekt und ist ebenfalls eine Sammlung von Schlüssel-Wert-Paaren. Der Umfang von „Schlüssel“ ist jedoch nicht auf Zeichenfolgen beschränkt. Als Schlüssel können verschiedene Arten von Werten (einschließlich Objekten) verwendet werden.
-
Map implementiert auch die Iterator-Schnittstelle, sodass Sie
扩展运算符undfor…of…zum Durchqueren verwenden können. -
Karteneigenschaften und -methoden
sizeGibt die Anzahl der Elemente in der Map zurücksetFügen Sie ein neues Element hinzu und geben Sie die aktuelle Karte zurückgetGibt den Schlüsselwert des Schlüsselobjekts zurückhasPrüfen Sie, ob eine Map ein Element enthältclearLöschen Sie die Sammlung und geben Sie undefiniert zurück
//创建一个空Map
let m = new Map();
//创建一个非空Map
let m2 = new Map([
['name','林晓'],
['age','21']
]);
//添加元素
m2.set('salary','30000');
//添加方法
m2.set('fighting', function(){
console.log("加油!!");
});
console.log(m2);
// 获取
console.log(m2.get('name'));
console.log(m2.get('age'));
console.log(m2.get('salary'));
console.log(m2.get('fighting'));
// 删除
m2.delete('age');
// 检查是否包含某元素
console.log(m2.has('age'));
// 清除
m2.clear();
