Die Funktionen von Ecmascript sind: 1. Modularität; „**“; 10. „async/await“ und so weiter.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.
ECMAScript ist eine Skript-Programmiersprache, die von ECMA International (ehemals European Computer Manufacturers Association) durch ECMA-262 standardisiert wurde.
Ecma International ist eine internationale, auf Mitgliedschaft basierende Organisation für Informations- und Telekommunikationsstandards. Vor 1994 hieß es European Computer Manufacturers Association. Aufgrund der Internationalisierung von Computern beziehen sich die Standards der Organisation auf viele andere Länder, daher beschloss die Organisation, ihren Namen zu ändern, um ihren internationalen Charakter zu verdeutlichen. Der Name ist kein Akronym mehr.
Anders als nationale staatliche Normungsagenturen ist Ecma International eine Unternehmensorganisation mit Mitgliedern. Der Standardisierungsprozess der Organisation ist eher kommerziell ausgerichtet und behauptet, dass diese Arbeitsweise das bürokratische Streben nach Ergebnissen verringert.
Tatsächlich ist Ecma International für die Formulierung vieler Standards verantwortlich, wie beispielsweise der folgenden Spezifikationen. Sie können sehen, dass es heute unsere Protagonisten gibt, die ECMAScript-Spezifikation, die C#-Sprachspezifikation, die C++/CLI-Sprachspezifikation usw.
Im November 1996 beschloss Netscape, der Erfinder von JavaScript, JavaScript bei der Standardisierungsorganisation ECMA einzureichen, in der Hoffnung, dass diese Sprache ein internationaler Standard werden könnte. Im folgenden Jahr veröffentlichte ECMA die erste Version des Standarddokuments 262 (ECMA-262), das den Standard für die Browser-Skriptsprache festlegte und diese Sprache ECMAScript nannte. Diese Version ist Version 1.0.
Dieser Standard wurde von Anfang an für die JavaScript-Sprache entwickelt, aber es gibt zwei Gründe, warum er nicht JavaScript heißt. Eine davon ist eine Marke. Gemäß der Lizenzvereinbarung darf nur Netscape den Namen JavaScript rechtmäßig verwenden, und JavaScript selbst wurde von Netscape als Marke registriert. Zweitens möchte ich zeigen, dass der Entwickler dieser Sprache ECMA und nicht Netscape ist, was dazu beitragen wird, die Offenheit und Neutralität dieser Sprache sicherzustellen.
Daher besteht die Beziehung zwischen ECMAScript und JavaScript darin, dass Ersteres eine Spezifikation des Letzteren und Letzteres eine Implementierung des Ersteren ist.
Das Wort ECMAScript 2015 (kurz ES2015) wird auch oft gesehen. Wie hängt es mit ES6 zusammen?
Im Jahr 2011, nach der Veröffentlichung der ECMAScript-Version 5.1, begann die Entwicklung der Version 6.0. Daher bezieht sich die ursprüngliche Bedeutung des Wortes ES6 auf die nächste Version der JavaScript-Sprache.
Da diese Version jedoch zu viele grammatikalische Funktionen einführt und während des Entwicklungsprozesses viele Organisationen und Einzelpersonen weiterhin neue Funktionen einreichen. Es wurde schnell klar, dass es nicht möglich sein würde, alle eingeführten Funktionen in einer Version zu integrieren. Der herkömmliche Ansatz besteht darin, zuerst Version 6.0 zu veröffentlichen, dann nach einer Weile Version 6.1, dann Version 6.2, Version 6.3 und so weiter.
Das Normenkomitee hat schließlich beschlossen, dass die Norm jedes Jahr im Juni als offizielle Version dieses Jahres offiziell veröffentlicht wird. In der Folgezeit werden auf Basis dieser Version Änderungen vorgenommen. Bis Juni des nächsten Jahres wird der Entwurf selbstverständlich zur Neujahrsversion. Auf diese Weise ist die vorherige Versionsnummer nicht erforderlich, sondern nur der Jahresstempel.
Daher ist ES6 sowohl ein historischer Begriff als auch ein allgemeiner Begriff. Es bezeichnet den JavaScript-Standard der nächsten Generation nach Version 5.1, der ES2015, ES2016, ES2017 usw. abdeckt, und ES2015 ist der offizielle Name, der sich speziell auf die veröffentlichte Version bezieht in diesem Jahr. Die offizielle Version des Sprachstandards.
Im November 1996 reichte Netscape Js bei der internationalen Standardisierungsorganisation ECMA ein, und die Sprache könnte zu einem internationalen Standard werden.
1997 wurde ECMAScript Version 1.0 veröffentlicht. (In diesem Jahr veröffentlichte ECMA die erste Version des Standarddokuments Nr. 262 (ECMA-262), das den Standard für Browser-Skriptsprachen festlegte und diese Sprache ECMAScript nannte, was die ES1.0-Version ist.)
Juni 1998 Im März , ES Version 2.0 wurde veröffentlicht.
Im Dezember 1999 wurde ES Version 3.0 veröffentlicht und wurde zum gemeinsamen Standard für JS und erhielt breite Unterstützung.
Im Oktober 2007 wurde die Entwurfsversion 4.0 von ES veröffentlicht.
Im Juli 2008 beschloss ECMA aufgrund zu vieler Differenzen zwischen den Parteien, die Entwicklung von ES 4.0 einzustellen. Stattdessen wird eine kleine Reihe von Verbesserungen bestehender Funktionen als ES 3.1 veröffentlicht. Doch kurz nach der Rückkehr wurde es in ES-Version 5.0 umbenannt.
Im Dezember 2009 wurde ES-Version 5.0 offiziell veröffentlicht.
Im Juni 2011 wurde ES Version 5.1 veröffentlicht und wurde zu einem internationalen ISO-Standard (ISO/IEC 16262:2011).
Im März 2013 endete der ES 6-Entwurf und es werden keine neuen Funktionen hinzugefügt.
Im Dezember 2013 wurde der ES 6-Entwurf veröffentlicht.
Im Juni 2015 wurde die offizielle Version von ES 6 veröffentlicht.
Von nun an wird jedes Jahr im Juni eine offizielle Version veröffentlicht. Die aktuellste Version ist also ES12, die im Juni 2021 veröffentlicht wird.
1, Klasse
ES6 führt Klassen ein und macht die objektorientierte Programmierung in JavaScript einfacher und verständlicher.
class Student {
constructor() {
console.log("I'm a student.");
}
study() {
console.log('study!');
}
static read() {
console.log("Reading Now.");
}
}
console.log(typeof Student); // function
let stu = new Student(); // "I'm a student."
stu.study(); // "study!"
stu.read(); // "Reading Now."2. Modularisierung
ES5 unterstützt native Modularisierung und Module werden als wichtige Komponente in ES6 hinzugefügt. Die Funktionen des Moduls bestehen hauptsächlich aus Export und Import. Jedes Modul verfügt über einen eigenen separaten Bereich. Die gegenseitige Aufrufbeziehung zwischen Modulen besteht darin, die vom Modul durch den Export bereitgestellte Schnittstelle anzugeben und durch den Import auf die von anderen Modulen bereitgestellten Schnittstellen zu verweisen. Gleichzeitig wird ein Namensraum für das Modul erstellt, um Namenskonflikte von Funktionen zu verhindern.
export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;3. Pfeilfunktion
=> ist nicht nur die Abkürzung der Schlüsselwortfunktion, sie bringt auch andere Vorteile mit sich. Die Pfeilfunktion hat dasselbe mit dem sie umgebenden Code gemeinsam, was Ihnen bei der Lösung des Problems dieser Zeigerfunktion helfen kann. Beispielsweise bezieht sich var self = this; oder var that =this auf den umgebenden Modus this. Aber mit => wird dieses Muster nicht mehr benötigt.
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));4. Vorlagenzeichenfolge
ES6 unterstützt Vorlagenzeichenfolgen, wodurch das Zusammenfügen von Zeichenfolgen prägnanter und intuitiver wird.
() => 1
v => v+1
(a,b) => a+b
() => {
alert("foo");
}
e => {
if (e == 0){
return 0;
}
return 1000/e;
}In ES6 kann die Zeichenfolgenverkettung über ${} abgeschlossen werden, indem Sie die Variablen einfach in geschweifte Klammern setzen. ${}就可以完成字符串的拼接，只需要将变量放在大括号之中。
5、解构赋值
解构赋值语法是 JavaScript 的一种表达式，可以方便的从数组或者对象中快速提取值赋给定义的变量。
//不使用模板字符串
var name = 'Your name is ' + first + ' ' + last + '.'
//使用模板字符串
var name = `Your name is ${first} ${last}.`6、延展操作符
延展操作符…可以在函数调用/数组构造时, 将数组表达式或者 string 在语法层面展开；还可以在构造对象时, 将对象表达式按 key-value 的方式展开。
// 对象
const student = {
name: 'Sam',
age: 22,
sex: '男'
}
// 数组
// const student = ['Sam', 22, '男'];
// ES5；
const name = student.name;
const age = student.age;
const sex = student.sex;
console.log(name + ' --- ' + age + ' --- ' + sex);
// ES6
const { name, age, sex } = student;
console.log(name + ' --- ' + age + ' --- ' + sex);7、Promise
Promise 是异步编程的一种解决方案，比传统的解决方案 callback 更加的优雅。它最早由社区提出和实现的，ES6 将其写进了语言标准，统一了用法，原生提供了 Promise 对象。
//在函数调用时使用延展操作符
function sum(x, y, z) {
return x + y + z
}
const numbers = [1, 2, 3]
console.log(sum(...numbers))
//数组
const stuendts = ['Jine', 'Tom']
const persons = ['Tony', ...stuendts, 'Aaron', 'Anna']
conslog.log(persions)8、let 与 const
在之前 JS 是没有块级作用域的，const与 let 填补了这方便的空白，const与 let 都是块级作用域。
const getJSON = function(url) {
const promise = new Promise(function(resolve, reject){
const handler = function() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
const client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send();
});
return promise;
};
getJSON("/posts.json").then(function(json) {
console.log('Contents: ' + json);
}, function(error) {
console.error('出错了', error);
});1、Array.prototype.includes()
includes() 函数用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回 false。
function f() {
{
let x;
{
// 正确
const x = "sneaky";
// 错误，常量const
x = "foo";
}
// 错误，已经声明过的变量
let x = "inner";
}
}2、指数操作符
在 ES7 中引入了指数运算符 **， **具有与 Math.pow(…)等效的计算结果。使用指数运算符 **，就像 +、- 等操作符一样。
[1, 2, 3].includes(-1) // false [1, 2, 3].includes(1) // true [1, 2, 3].includes(3, 4) // false [1, 2, 3].includes(3, 3) // false [1, 2, NaN].includes(NaN) // true ['foo', 'bar', 'quux'].includes('foo') // true ['foo', 'bar', 'quux'].includes('norf') // false
1、async/await
异步函数返回一个AsyncFunction对象并通过事件循环异步操作。
//之前的版本 Math.pow(5, 2) // ES7 5 ** 2 // 5 ** 2 === 5 * 5
2、Object.values()
Object.values()是一个与 Object.keys()类似的新函数，但返回的是 Object 自身属性的所有值，不包括继承的值。
const resolveAfter3Seconds = function() {
console.log('starting 3 second promsise')
return new Promise(resolve => {
setTimeout(function() {
resolve(3)
console.log('done in 3 seconds')
}, 3000)
})
}
const resolveAfter1Second = function() {
console.log('starting 1 second promise')
return new Promise(resolve => {
setTimeout(function() {
resolve(1)
console.log('done, in 1 second')
}, 1000)
})
}
const sequentialStart = async function() {
console.log('***SEQUENTIAL START***')
const one = await resolveAfter1Second()
const three = await resolveAfter3Seconds()
console.log(one)
console.log(three)
}
sequentialStart();从上述代码中可以看出 Object.values()
5. Destrukturierende Zuweisungssyntax ist ein Ausdruck in JavaScript, der leicht Werte aus Arrays oder Objekten extrahieren und sie definierten Variablen zuweisen kann. const obj = { a: 1, b: 2, c: 3 }
//不使用 Object.values()
const vals = Object.keys(obj).map((key) => obj[key])
console.log(vals)
//使用 Object.values()
const values = Object.values(obj1)
console.log(values)
Der Erweiterungsoperator... kann den Array-Ausdruck oder die Zeichenfolge auf syntaktischer Ebene während des Funktionsaufrufs/der Array-Erstellung erweitern; beim Erstellen des Objekts kann er auch den Objektausdruck erweitern. Erweitern Sie in Form von Wert. //不使用 Object.entries()
Object.keys(obj).forEach((key) => {
console.log('key:' + key + ' value:' + obj[key])
})
//key:b value:2
//使用 Object.entries()
for (let [key, value] of Object.entries(obj1)) {
console.log(`key: ${key} value:${value}`)
}
//key:b value:2
Promise ist eine Lösung für die asynchrone Programmierung, die eleganter ist als der herkömmliche Lösungsrückruf. Es wurde zuerst von der Community vorgeschlagen und implementiert. ES6 hat es in den Sprachstandard geschrieben, seine Verwendung vereinheitlicht und Promise-Objekte nativ bereitgestellt. console.log('0.0'.padStart(4, '10'))
console.log('0.0'.padStart(20))
console.log('0.0'.padEnd(4, '0'))
console.log('0.0'.padEnd(10, '0'))
let myObj = {
property1: 'foo',
property2: 'bar',
property3: 42,
property4: () => console.log('prop4')
}
Object.getOwnPropertyDescriptors(myObj)
/*
{ property1: {…}, property2: {…}, property3: {…}, property4: {…} }
property1: {value: "foo", writable: true, enumerable: true, configurable: true}
property2: {value: "bar", writable: true, enumerable: true, configurable: true}
property3: {value: 42, writable: true, enumerable: true, configurable: true}
property4: {value: ƒ, writable: true, enumerable: true, configurable: true}
__proto__: Object
*/1. Die Funktion Array.prototype.includes()
includes() wird verwendet, um zu bestimmen, ob ein Array einen angegebenen Wert enthält FALSCH.//如果在 async/await中使用循环中去调用异步函数，则不会正常执行
async function demo(arr) {
for (let i of arr) {
await handleDo(i);
}
}
//ES9
async function demo(arr) {
for await (let i of arr) {
handleDo(i);
}
}function doSomething() {
doSomething1()
.then(doSomething2)
.then(doSomething3)
.catch((err) => {
console.log(err)
})
.finally(() => {})
}ES8 neue Funktionen
1. Async/await
Asynchrone Funktion gibt ein AsyncFunction-Objekt zurück und arbeitet asynchron durch die Ereignisschleife.//Rest
let { fname, lname, ...rest } = { fname: "Hemanth", lname: "HM", location: "Earth", type: "Human" };
fname; //"Hemanth"
lname; //"HM"
rest; // {location: "Earth", type: "Human"}
//Spread
let info = {fname, lname, ...rest};
info; // { fname: "Hemanth", lname: "HM", location: "Earth", type: "Human" }Object.values() ist eine neue Funktion ähnlich wie Object.keys(), gibt jedoch alle Werte der eigenen Eigenschaften des Objekts zurück, mit Ausnahme der geerbten Werte.
let arr = ['a', 'b', ['c', 'd']]; let flattened = arr.flat(); console.log(flattened); // => ["a", "b", "c", "d"] arr = ['a', , , 'b', ['c', 'd']]; flattened = arr.flat(); console.log(flattened); // => ["a", "b", "c", "d"] arr = [10, [20, [30]]]; console.log(arr.flat()); // => [10, 20, [30]] console.log(arr.flat(1)); // => [10, 20, [30]] console.log(arr.flat(2)); // => [10, 20, 30] console.log(arr.flat(Infinity)); // => [10, 20, 30]
Wie aus dem obigen Code ersichtlich ist, erspart uns Object.values() den Schritt, Schlüssel zu durchlaufen und Werte basierend auf diesen Schlüsseln zu erhalten.
Die Funktion Object.entries() gibt ein Array von Schlüssel-Wert-Paaren der aufzählbaren Eigenschaften des angegebenen Objekts selbst zurück.
const str = " string "; console.log(str.trimStart()); // => "string " console.log(str.trimEnd()); // => " string"
const myArray = [['one', 1], ['two', 2], ['three', 3]];
const obj = Object.fromEntries(myArray);
console.log(obj); // => {one: 1, two: 2, three: 3}const promise1 = Promise.resolve(3); const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo')); const promises = [promise1, promise2]; Promise.allSettled(promises). then((results) => results.forEach((result) => console.log(result.status))); // expected output: // "fulfilled" // "rejected"
const regexp = /t(e)(st(\d?))/g; const str = 'test1test2'; const array = [...str.matchAll(regexp)]; console.log(array[0]); // expected output: Array ["test1", "e", "st1", "1"] console.log(array[1]); // expected output: Array ["test2", "e", "st2", "2"]
const promise1 = new Promise((resolve, reject) => reject('我是失败的Promise_1'));
const promise2 = new Promise((resolve, reject) => reject('我是失败的Promise_2'));
const promiseList = [promise1, promise2];
Promise.any(promiseList)
.then(values=>{
console.log(values);
})
.catch(e=>{
console.log(e);
});a ||= b //等价于 a = a || (a = b) a &&= b //等价于 a = a && (a = b) a ??= b //等价于 a = a ?? (a = b)
分别去除字符串首尾空白字符
const str = " string "; console.log(str.trimStart()); // => "string " console.log(str.trimEnd()); // => " string"
3、Object.fromEntries()
Object.entries()方法的作用是返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for…in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。
而 Object.fromEntries() 则是 Object.entries() 的反转，Object.fromEntries() 函数传入一个键值对的列表，并返回一个带有这些键值对的新对象。
const myArray = [['one', 1], ['two', 2], ['three', 3]];
const obj = Object.fromEntries(myArray);
console.log(obj); // => {one: 1, two: 2, three: 3}1、Promise.allSettled
Promise.all最大问题就是如果其中某个任务出现异常(reject)，所有任务都会挂掉，Promise 直接进入 reject 状态。
Promise.allSettled在并发任务中，无论一个任务正常或者异常，都会返回对应的的状态（fulfilled 或者 rejected）与结果（业务 value 或者 拒因 reason），在 then 里面通过 filter 来过滤出想要的业务逻辑结果，这就能最大限度的保障业务当前状态的可访问性。
const promise1 = Promise.resolve(3); const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo')); const promises = [promise1, promise2]; Promise.allSettled(promises). then((results) => results.forEach((result) => console.log(result.status))); // expected output: // "fulfilled" // "rejected"
2、String.prototype.matchAll
matchAll() 方法返回一个包含所有匹配正则表达式及分组捕获结果的迭代器。 在 matchAll出现之前，通过在循环中调用 regexp.exec来获取所有匹配项信息（regexp需使用 /g 标志)。如果使用 matchAll，就可以不必使用 while 循环加 exec 方式（且正则表达式需使用／g标志）。使用 matchAll会得到一个迭代器的返回值，配合 for…of, array spread, or Array.from() 可以更方便实现功能。
const regexp = /t(e)(st(\d?))/g; const str = 'test1test2'; const array = [...str.matchAll(regexp)]; console.log(array[0]); // expected output: Array ["test1", "e", "st1", "1"] console.log(array[1]); // expected output: Array ["test2", "e", "st2", "2"]
1、Promise.any
Promise.any() 接收一个Promise可迭代对象，只要其中的一个 promise 成功，就返回那个已经成功的 promise 。如果可迭代对象中没有一个 promise 成功（即所有的 promises 都失败/拒绝），就返回一个失败的 promise。
const promise1 = new Promise((resolve, reject) => reject('我是失败的Promise_1'));
const promise2 = new Promise((resolve, reject) => reject('我是失败的Promise_2'));
const promiseList = [promise1, promise2];
Promise.any(promiseList)
.then(values=>{
console.log(values);
})
.catch(e=>{
console.log(e);
});2、逻辑运算符和赋值表达式
逻辑运算符和赋值表达式，新特性结合了逻辑运算符（&&=，||=，??=）。
a ||= b //等价于 a = a || (a = b) a &&= b //等价于 a = a && (a = b) a ??= b //等价于 a = a ?? (a = b)
3、replaceAll
返回一个全新的字符串，所有符合匹配规则的字符都将被替换掉。
const str = 'hello world'; str.replaceAll('l', ''); // "heo word"
4、数字分隔符
数字分隔符，可以在数字之间创建可视化分隔符，通过_下划线来分割数字，使数字更具可读性。
const money = 1_000_000_000; //等价于 const money = 1000000000; 1_000_000_000 === 1000000000; // true
【相关推荐：javascript学习教程】
Das obige ist der detaillierte Inhalt vonWelche Funktionen bietet Ecmascript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
