Erstens, was ist ES6
ES steht für ECMAScript, es von ECMA International Organization for Standardization ist, eine Skriptsprache, die Entwicklung von standardisierten Spezifikationen. ES6 ist eigentlich ein allgemeiner Hinweis, bezieht sich auf die ES2015 und nachfolgenden Versionen.
Vorteile:
Variable Upgrade - Funktion fügt Unberechenbarkeit Programm läuft
Grammatik zu verlieren, die gleiche Funktionalität zu erreichen, können verschiedene Menschen verschiedene Codes schreiben.
Zwei, ES6 die neue Syntax
2.1 lassen
die neuen Keywords ES6 verwendet , um declare Variablen.
- Es gibt keinen variablen Hub
console.log(a); // a is not defined
let a = 20
- Temporäre Totzonen
das Schlüsselwort eine Variable zu deklarieren verwenden wir Block-Level - Umfang haben, kann die Schleifenvariable wird eine globale Variable verhindern.
if (true) {
let num = 10;
console.log(num); //10
}
console.log(num); //not defined
2.2const
Aktion: deklariert eine Konstante ist , konstant ist , der Wert (Speicheradresse) der Betrag nicht geändert werden kann.
- Nachdem ein Block-Level-Umfang
if (true) {
const a = 10; }
console.log(a) // a is not defined
- Wann muss die Zuordnung Konstanten deklarieren
const PI; // Missing initializer in const declaration
- Nach konstanten Werten nicht geändert werden können die Werte.
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.
Der Unterschied zwischen 2,3 let, const, var von
| war | Lassen | const |
|---|---|---|
| Funktionsebene Anwendungsbereich | Block-Level-Umfang | Block-Level-Umfang |
| variable Lift | Es gibt keinen variablen Hub | Es gibt keinen variablen Hub |
| Sie können den Wert ändern | Sie können den Wert ändern | unveränderlich |
2.4 Destrukturierung Zuordnung
ES6 erlaubten Werte aus der Matrix extrahiert, in einer entsprechenden Position auf die Variable. Objekte können auch Rückbau erreicht werden.
- Eine Anordnung von deconstruction
// 数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量
//如果解构不成功，变量的值为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
- Objekt Rückbau
// 对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量
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 Funktionen arrow
Ausführungsbeispiel ES6 die neue Funktion definiert ist.
- Grammatik
(参数) => {函数体}
const fn = () => {}
//函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
function sum(num1, num2) {
return num1 + num2; }
const sum = (num1, num2) => num1 + num2;
//如果形参只有一个，可以省略小括号
function fn (v) {
return v;
}
const fn = v => v;
- Pfeil Funktion dieses Schlüsselwort nicht binden, die Funktion dieser Pfeil zeigt auf die Position im Rahmen dieser Funktion definiert.
var age = 100;
var obj = {
age: 20,
say: () => {
alert(this.age)
}
}
obj.say(); //alter的是100
2.6 restlichen Parameter
restlichen Parameter und mit der Verwendung von Dekonstruktion
let students = ['wangwu', 'zhangsan', 'lisi'];
//...s2将剩余的实参归成一个数组
let [s1, ...s2] = students;
console.log(s1); // 'wangwu'
console.log(s2); // ['zhangsan', 'lisi']
Mit der restlichen Summe Funktionsparameter schreiben
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
Drei, ES6 Ausbau der integrierten Objekte
- Erweiterungsmethode (1) Array von
3.1.1 Erweiterte Antrieb (Entwicklungs Syntax)
verlängerte Operator Array kann aufgeteilt in eine Folge von Parametern in einer durch Kommata getrennt werden.
// 扩展运算符可以将数组拆分成以逗号分隔的参数序列
// ...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 Konstruktor - Methode: Array.from ()
wandelt das Array oder die Objektklasse für die reale Anordnung durchqueren.
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 Instanzmethode: find ()
die erste Qualifikations Array - Mitglieder zu finden, wenn nicht gefunden kehrt undefiniert
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 Instanzmethode: Find ()
, um das erste Element der Anordnung in Übereinstimmung mit den Bedingungen der Lage zu finden, oder -1 , wenn nicht gefunden
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 Beispiel Methode: enthält ()
zeigt an, ob das Feld einen bestimmten Wert enthält, gibt einen Booleschen Wert.
let ary = ["a", "b", "c"];
let result1 = ary.includes('a')
let result2 = ary.includes('e')
console.log(result1) //true
console.log(result2) //false
- (2) String extension method
3.2.1 Vorlage Zeichenfolge
neue ES6 erstellen eine Reihe von Art und Weise, die Verwendung von anti-zitierte Definition.
//用反引号定义
let name = `zhangsan`;
Vorteile:
Template - String - Variablen können aufgelöst werden.
Template String kann wickeln
können eine Funktion in der Vorlage Zeichenfolge aufrufen.
//模板字符串中可以解析变量
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>
Das Verfahren von Beispiel 3.2.2: starts () und endsWith ()
starts (): ob der String - Parameter den Kopf der Zeichenfolge darstellt, gibt einen booleschen
endsWith (): Gibt an, ob der Parameter - String am Ende der Zeichenkette, gibt einen booleschen Wert
let str = 'Hello world!';
str.startsWith('Hello') // true
str.endsWith('!') // true
Das Verfahren von Beispiel 3.2.3: REPEAT ()
REPEAT Methode stellt die ursprüngliche Zeichenkette wiederholt n - mal, gibt einen neuen String.
console.log("y".repeat(5)) //yyyyy
- (3) Stellen Sie die Datenstruktur
ES6 stellt neue Datenstruktur festgelegt. Es ist ähnlich wie ein Array, aber der Wert des Elements ist einzigartig, keine doppelten Werte.
Syntax 3.3.1
Set selbst ist ein Konstruktor Set - Datenstruktur zu erzeugen.
Set - Funktion kann ein Array als Parameter zu initialisieren akzeptieren.
const s = new Set();
const set = new Set([1, 2, 3, 4, 4]);
3.3.2 Instanz - Methode
add (Wert): einen Wert hinzufügen, geben Set Struktur selbst
(Wert) löschen: Löschen von Wert, gibt einen Booleschen Wert, der angibt , ob der Löscherfolg
(Wert) hat: Gibt einen Booleschen Wert, der angibt , Sollwert ist ein Mitglied der
clear (): alle Mitglieder entfernen, ohne Rückgabewert
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 Verfahrbereich
Beispiele Strukturen und Anordnungen, hat auch forEach Verfahren für auf jedes Mitglied eine bestimmte Operation durchführt, gibt es keinen Rückgabewert.
// 遍历set数据结构 从中取值
const s = new Set(['a', 'b']);
s.forEach(value => {
console.log(value) //a b
})
