Zusammenfassung häufig verwendeter Funktionen von ES6, ES7 und ES8 (Codebeispiele)

Dieser Artikel enthält eine Zusammenfassung häufig verwendeter Funktionen (Codebeispiele) von ES6, ES7 und ES8. Ich hoffe, dass er für Freunde hilfreich ist.

Allgemeine neue Funktionen von ES6

1. let && const

let 命令也用于变量声明，但是作用域为局部
{
    let a = 10;
    var b = 1;        
}
在函数外部可以获取到b，获取不到a，因此例如for循环计数器就适合使用let。

const用于声明一个常量，设定后值不会再改变
const PI = 3.1415;
PI // 3.1415
PI = 3; //TypeError: Assignment to constant variable.

2. Destrukturierungszuweisung

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。 
例如数组：

let [a, b, c] = [1, 2, 3];
//等同于
let a = 1;
let b = 2;
let c = 3;
这真的让代码看起来更优美，有种python赋值的既视感。 

对象的解构赋值：获取对象的多个属性并且使用一条语句将它们赋给多个变量。

var {
  StyleSheet,
  Text,
  View
} = React;

等同于
var StyleSheet = React.StyleSheet;
var Text = React.Text;
var View = React.Text;

3. Pfeilfunktion

Der neue Pfeiloperator in ES6 wird verwendet, um das Schreiben von Funktionen zu vereinfachen Die rechte Seite ist die spezifische Operation und der Rückgabewert.

var sum = (num1, num2) => { return num1 + num2; }
//等同于
var sum = function(num1, num2) {
    return num1 + num2;
};
箭头函数还修复了this的指向，使其永远指向词法作用域：

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); // 25

4 ... Die Einführung des Operators

wird selten die Erweiterungsfunktion verwenden. Dadurch kann das Array direkt als Parameter an die Funktion übergeben werden:

var people = ['Lily', 'Lemon', 'Terry'];
function sayHello(people1,people2,people3){
    console.log(`Hello ${people1},${people2},${people3}`);
}
sayHello(...people);//输出：Hello Lily,Lemon,Terry

5. Iterierbarer Typ

Um die Sammlungstypen zu vereinheitlichen, wird der ES6-Standard verwendet Es wurde ein neuer iterierbarer Typ eingeführt: Array, Map und Set gehören alle zum iterierbaren Typ. Sammlungen mit iterierbarem Typ können durch die neue for... of-Schleife durchlaufen werden.

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
    alert(x);
}
for (var x of s) { // 遍历Set
    alert(x);
}
for (var x of m) { // 遍历Map
    alert(x[0] + '=' + x[1]);
}

Map相关操作如下， Set同理：

var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

6. Klasse

ES6 bietet eine Schreibmethode, die traditionellen Sprachen näher kommt, und führt das Konzept der Klasse als Vorlage für Objekte ein. Klassen können über das Schlüsselwort class definiert werden, ähnlich wie in den meisten herkömmlichen Sprachen.

//定义类
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

Gemeinsame neue Funktionen von ES7

1. Array.prototype.includes

在一个数组或者列表中检查是否存在一个值
let arr = ['react', 'angular', 'vue']

// Correct
if (arr.includes('react')) {
  console.log('Can use React')
}
还能在字符串中使用includes:

let str = 'React Quickly'

// Correct
if (str.toLowerCase().includes('react')) {  // true
  console.log('Found "react"')  
}
除了增强了可读性语义化，实际上给开发者返回布尔值，而不是匹配的位置。

includes也可以在NaN(非数字)使用。最后 ，includes第二可选参数fromIndex，这对于优化是有好处的，因为它允许从特定位置开始寻找匹配。
更多例子：

console.log([1, 2, 3].includes(2)) // === true)
console.log([1, 2, 3].includes(4)) // === false)
console.log([1, 2, NaN].includes(NaN)) // === true)
console.log([1, 2, -0].includes(+0)) // === true)
console.log([1, 2, +0].includes(-0)) // === true)
console.log(['a', 'b', 'c'].includes('a')) // === true)
console.log(['a', 'b', 'c'].includes('a', 1)) // === false)

2.Exponentiation Operator (Potenzierungsoperation)

et a = 7 ** 12
let b = 2 ** 7
console.log(a === Math.pow(7,12)) // true
console.log(b === Math.pow(2,7)) // true
开发者还可以操作结果:

let a = 7
a **= 12
let b = 2
b **= 7
console.log(a === Math.pow(7,12)) // true
console.log(b === Math.pow(2,7)) // true

Neue Funktionen von ES8

1. Object.values/Object.entries

ES5 führt die Object.keys-Methode ein, die eine zurückgibt array , Mitglieder sind die Schlüsselnamen aller durchlaufbaren (aufzählbaren) Eigenschaften des Parameterobjekts selbst (mit Ausnahme der geerbten).
Die Object.values-Methode gibt ein Array zurück, dessen Mitglieder die Schlüsselwerte aller durchlaufbaren (aufzählbaren) Eigenschaften des Parameterobjekts selbst sind (mit Ausnahme der geerbten).
Die Object.entries-Methode gibt ein Array zurück, dessen Mitglieder Schlüsselwert-Arrays aller durchlaufbaren (aufzählbaren) Eigenschaften des Parameterobjekts selbst sind (mit Ausnahme der geerbten).

let {keys, values, entries} = Object;  

let obj = { a: 1, b: 2, c: 3 };  

for (let key of keys(obj)) {  
    console.log(key); // 'a', 'b', 'c'
}  

for (let value of values(obj)) {  
    console.log(value); // 1, 2, 3
}  

for (let [key, value] of entries(obj)) {  
    console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}

2. String-Padding

3. Async/Await

使用Promise
使用Promise写异步代码，会比较麻烦：

axios.get(`/q?query=${query}`)
.then(response => response.data)
.then(data =>
{
this.props.processfetchedData(data);
})
.catch(error => console.log(error));
使用Async/Await
Async/Await使得异步代码看起来像同步代码，这正是它的魔力所在：

async fetchData(query) =>
{
try
{
const response = await axios.get(`/q?query=${query}`);
const data = response.data;
return data;
}
catch (error)
{
console.log(error)
}
}
 
fetchData(query).then(data =>
{
this.props.processfetchedData(data)
})

Async/Await ist eine neue Art zu schreiben Asynchroner Code. Die vorherigen Methoden waren Callback-Funktionen und Promises. Im Vergleich zu Promise ist es prägnanter und die Handhabung von Fehlern, bedingten Anweisungen und Zwischenwerten ist bequemer

Das obige ist der detaillierte Inhalt vonZusammenfassung häufig verwendeter Funktionen von ES6, ES7 und ES8 (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!