ES6-Einführung:
ES6 ist eine Reihe von Standards. Das Javascript-Element ist die perfekte Umsetzung dieser Reihe von Standards. Befolgen Sie diese Reihe von Standard-ES6-Syntax
1. Lassen Sie Variablen deklarieren
In vscode
<script>
// var 声明的变量没有局部作用域
// let 声明的变量 有局部作用域
//创建代码块
{
var a = 0
let b = 1
}
console.log(a) // 0
console.log(b) // ReferenceError: b is not defined
</script>
Dies ist die Ausgabe von der Konsole. Die Standardausgabe unten befindet sich in den Kommentaren unten
// var 可以声明多次
// let 只能声明一次
var m = 1
var m = 2
let n = 3
let n = 4
console.log(m) // 2
console.log(n) // Identifier 'n' has already been declared
2, const Deklarationskonstante (schreibgeschützte Variable)
Erstellen Sie const.html
// 1、声明之后不允许改变
const PI = "3.1415926"
PI = 3 // TypeError: Assignment to constant variable.
// 2、一但声明必须初始化，否则会报错
const MY_AGE // SyntaxError: Missing initializer in const declaration
3. Dekonstruktion und Zuordnung
Erstellen Sie eine Destrukturierungszuweisung.html
Die Destrukturierungszuweisung ist eine Erweiterung des Zuweisungsoperators.
Es ist ein Mustervergleich für Arrays oder Objekte, bei dem den Variablen dann Werte zugewiesen werden.
Das Schreiben von Code ist präzise und leicht zu lesen, und die Semantik ist klarer, und es erleichtert auch die Erfassung von Datenfeldern in komplexen Objekten.
//1、数组解构
// 传统
let a = 1, b = 2, c = 3
console.log(a, b, c)
// ES6
let [x, y, z] = [1, 2, 3]
console.log(x, y, z)
//2、对象解构
let user = {name: 'Helen', age: 18}
// 传统
let name1 = user.name
let age1 = user.age
console.log(name1, age1)
// ES6
let { name, age } = user//注意：结构的变量必须是user中的属性
console.log(name, age)
4. Vorlagenzeichenfolge
Erstellen Sie die Vorlage string.html
Die Vorlagenzeichenfolge entspricht der erweiterten Version der Zeichenfolge. Das Backquote `ist nicht nur eine normale Zeichenfolge, sondern kann auch zum Definieren einer mehrzeiligen Zeichenfolge verwendet werden. Außerdem können Sie der Zeichenfolge Variablen und Ausdrücke hinzufügen .
// 1、多行字符串
let string1 = `Hey,
can you stop angry now?`
console.log(string1)
// Hey,
// can you stop angry now?
// 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let name = "Mike"
let age = 27
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info)
// My Name is Mike,I am 28 years old next year.
// 3、字符串中调用函数
function f(){
return "have fun!"
}
let string2 = `Game start,${f()}`
console.log(string2); // Game start,have fun!
5. Abkürzung zum Deklarieren von Objekten
Abkürzung zum Erstellen der Deklaration object.html
const age = 12
const name = "Amy"
// 传统
const person1 = {age: age, name: name}
console.log(person1)
// ES6
const person2 = {age, name}
console.log(person2) //{age: 12, name: "Amy"}
6. Abkürzung für Definitionsmethode
Erstellen Sie die Definitionsmethode abbreviation.html
// 传统
const person1 = {
sayHi:function(){
console.log("Hi")
}
}
person1.sayHi();//"Hi"
// ES6
const person2 = {
sayHi(){
console.log("Hi")
}
}
person2.sayHi() //"Hi"
7. Objekterweiterungsoperator
Objekterweiterungsoperator erstellen. Mit dem HTML-
Erweiterungsoperator (...) werden alle durchlaufbaren Attribute des Parameterobjekts entfernt und in das aktuelle Objekt kopiert.
// 1、拷贝对象
let person1 = {name: "Amy", age: 15}
let someone = { ...person1 }
console.log(someone) //{name: "Amy", age: 15}
// 2、合并对象
let age = {age: 15}
let name = {name: "Amy"}
let person2 = {...age, ...name}
console.log(person2) //{age: 15, name: "Amy"}
8. Pfeilfunktion
Pfeilfunktionen erstellen.html Pfeilfunktionen
bieten eine präzisere Möglichkeit, Funktionen zu schreiben. Die grundlegende Syntax lautet:
parameter => Funktionskörper
// 传统
var f1 = function(a){
return a
}
console.log(f1(1))
// ES6
var f2 = a => a
console.log(f2(1))
// 当箭头函数没有参数或者有多个参数，要用 () 括起来。
// 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，
// 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var f3 = (a,b) => {
let result = a+b
return result
}
console.log(f3(6,2)) // 8
// 前面代码相当于：
var f4 = (a,b) => a+b
Pfeilfunktionen werden meist bei der Definition anonymer Funktionen verwendet