Inhaltsverzeichnis
Was ist ECMAScript?
Die Beziehung zwischen ES6 und ECMAScript 2015
Neue Funktionen in jeder Version von ECMAScript
Neue Funktionen in ES6
ES11新增特性
ES12新增特性
Heim Web-Frontend Front-End-Fragen und Antworten Welche Funktionen bietet Ecmascript?

Welche Funktionen bietet Ecmascript?

Jan 05, 2022 am 11:13 AM
ecmascript javascript

Die Funktionen von Ecmascript sind: 1. Modularität; „**“; 10. „async/await“ und so weiter.

Welche Funktionen bietet Ecmascript?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Was ist ECMAScript?

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.

ECMAScript Beziehung zu JavaScript

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.

Die Beziehung zwischen ES6 und ECMAScript 2015

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.

ECMAScript Geschichte von

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.

Neue Funktionen in jeder Version von ECMAScript

Neue Funktionen in ES6

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."
Nach dem Login kopieren

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;
Nach dem Login kopieren
rrree

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));
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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}.`
Nach dem Login kopieren

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);
Nach dem Login kopieren

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)
Nach dem Login kopieren

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);
});
Nach dem Login kopieren

ES7新增特性

1、Array.prototype.includes()

includes() 函数用来判断一个数组是否包含一个指定的值,如果包含则返回 true,否则返回 false。

function f() {
  {
    let x;
    {
      // 正确
      const x = "sneaky";
      // 错误,常量const
      x = "foo";
    }
    // 错误,已经声明过的变量
    let x = "inner";
  }
}
Nach dem Login kopieren

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
Nach dem Login kopieren

ES8新增特性

1、async/await

异步函数返回一个AsyncFunction对象并通过事件循环异步操作。

//之前的版本
Math.pow(5, 2)

// ES7
5 ** 2
// 5 ** 2 === 5 * 5
Nach dem Login kopieren

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();
Nach dem Login kopieren

从上述代码中可以看出 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)
Nach dem Login kopieren

6. Erweiterungsoperator

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
Nach dem Login kopieren

7. Promise

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'))
Nach dem Login kopieren

8. let und const

Früher hatte JS keinen Gültigkeitsbereich auf Blockebene und sowohl const als auch let füllten diese Lücke.
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
*/
Nach dem Login kopieren

ES7 neue Funktionen

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);
  }
}
Nach dem Login kopieren
2. Exponentialoperator

Der in ES7 eingeführte Exponentialoperator ** hat Berechnungsergebnisse, die Math.pow(…) entsprechen. Verwenden Sie den Potenzierungsoperator **, genau wie die Operatoren +, - usw.

function doSomething() {
  doSomething1()
    .then(doSomething2)
    .then(doSomething3)
    .catch((err) => {
      console.log(err)
    })
    .finally(() => {})
}
Nach dem Login kopieren

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" }
Nach dem Login kopieren
2. Object.values()

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]
Nach dem Login kopieren

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.

3. Object.entries()

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"
Nach dem Login kopieren
Nach dem Login kopieren
🎜🎜4. String-Padding🎜🎜🎜In ES8 hat String zwei neue Instanzfunktionen hinzugefügt, String.prototype.padStart und String.prototype.padEnd, mit denen leere Strings oder andere Strings am Anfang des ursprünglichen Strings hinzugefügt werden können . oder das Ende. 🎜
const myArray = [['one', 1], ['two', 2], ['three', 3]];
const obj = Object.fromEntries(myArray);

console.log(obj);    // => {one: 1, two: 2, three: 3}
Nach dem Login kopieren
Nach dem Login kopieren
🎜🎜5. Object.getOwnPropertyDescriptors()🎜🎜🎜Die Funktion Object.getOwnPropertyDescriptors() wird verwendet, um die Deskriptoren aller eigenen Eigenschaften eines Objekts abzurufen. Neue Funktionen von ES9 🎜
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"
Nach dem Login kopieren
Nach dem Login kopieren
🎜🎜2. Promise.finally()🎜🎜🎜Eine Promise-Aufrufkette erreicht entweder erfolgreich die letzte .then() oder löst .catch() nicht aus. In einigen Fällen möchten Sie denselben Code ausführen, unabhängig davon, ob das Versprechen erfolgreich ausgeführt wird oder fehlschlägt, z. B. beim Löschen, Löschen der Konversation, Schließen der Datenbankverbindung usw. Mit 🎜🎜.finally() können Sie die endgültige Logik angeben. 🎜
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"]
Nach dem Login kopieren
Nach dem Login kopieren
🎜🎜3. Rest-/Spread-Attribute🎜🎜🎜Rest: Die verbleibenden Attribute der Objektdestrukturierungszuweisung. 🎜🎜Spread: Spread-Attribut der Objektdestrukturierungszuweisung. 🎜
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);
});
Nach dem Login kopieren
Nach dem Login kopieren
🎜🎜ES10 neue Funktionen🎜🎜🎜🎜1. Die flat()-Methode und die flatMap()-Methode des Arrays🎜🎜🎜flat()-Methode durchqueren das Array rekursiv entsprechend einer vorgebbaren Tiefe und durchqueren alle Elemente bis zu den Elementen im Unterarrays werden zu einem neuen Array zusammengefasst und zurückgegeben. Die Methode 🎜🎜flatMap() ordnet zunächst jedes Element mithilfe einer Zuordnungsfunktion zu und komprimiert das Ergebnis dann in ein neues Array. Es ist fast identisch mit „map“ und „flat“ mit einem Tiefenwert von 1, aber „flatMap“ ist in der Regel etwas effizienter, wenn es in einer Methode kombiniert wird. 🎜
a ||= b
//等价于
a = a || (a = b)

a &&= b
//等价于
a = a && (a = b)

a ??= b
//等价于
a = a ?? (a = b)
Nach dem Login kopieren
Nach dem Login kopieren
🎜🎜2. Die trimStart()-Methode und die trimEnd()-Methode von String🎜🎜

分别去除字符串首尾空白字符

const str = "   string   ";

console.log(str.trimStart());    // => "string   "
console.log(str.trimEnd());      // => "   string"
Nach dem Login kopieren
Nach dem Login kopieren

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}
Nach dem Login kopieren
Nach dem Login kopieren

ES11新增特性

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"
Nach dem Login kopieren
Nach dem Login kopieren

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"]
Nach dem Login kopieren
Nach dem Login kopieren

ES12新增特性

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);
});
Nach dem Login kopieren
Nach dem Login kopieren

2、逻辑运算符和赋值表达式

逻辑运算符和赋值表达式,新特性结合了逻辑运算符(&&=,||=,??=)。

a ||= b
//等价于
a = a || (a = b)

a &&= b
//等价于
a = a && (a = b)

a ??= b
//等价于
a = a ?? (a = b)
Nach dem Login kopieren
Nach dem Login kopieren

3、replaceAll

返回一个全新的字符串,所有符合匹配规则的字符都将被替换掉。

const str = 'hello world';
str.replaceAll('l', ''); // "heo word"
Nach dem Login kopieren

4、数字分隔符

数字分隔符,可以在数字之间创建可视化分隔符,通过_下划线来分割数字,使数字更具可读性。

const money = 1_000_000_000;
//等价于
const money = 1000000000;

1_000_000_000 === 1000000000; // true
Nach dem Login kopieren

【相关推荐: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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript Dec 17, 2023 pm 02:54 PM

So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten Lösung entwickelt. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie

Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Dec 17, 2023 pm 12:09 PM

Einführung in die Verwendung von JavaScript und WebSocket zur Implementierung eines Online-Bestellsystems in Echtzeit: Mit der Popularität des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, können wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Im Echtzeit-Online-Bestellsystem, wenn der Benutzer Gerichte auswählt und eine Bestellung aufgibt

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript Dec 17, 2023 am 09:39 AM

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Dec 17, 2023 pm 05:13 PM

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest

So verwenden Sie insertBefore in Javascript So verwenden Sie insertBefore in Javascript Nov 24, 2023 am 11:56 AM

Verwendung: In JavaScript wird die Methode insertBefore() verwendet, um einen neuen Knoten in den DOM-Baum einzufügen. Diese Methode erfordert zwei Parameter: den neuen Knoten, der eingefügt werden soll, und den Referenzknoten (d. h. den Knoten, an dem der neue Knoten eingefügt wird).

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Bildverarbeitungssystems JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Bildverarbeitungssystems Dec 17, 2023 am 08:41 AM

JavaScript ist eine in der Webentwicklung weit verbreitete Programmiersprache, während WebSocket ein Netzwerkprotokoll für die Echtzeitkommunikation ist. Durch die Kombination der leistungsstarken Funktionen beider können wir ein effizientes Echtzeit-Bildverarbeitungssystem erstellen. In diesem Artikel wird erläutert, wie dieses System mithilfe von JavaScript und WebSocket implementiert wird, und es werden spezifische Codebeispiele bereitgestellt. Zunächst müssen wir die Anforderungen und Ziele des Echtzeit-Bildverarbeitungssystems klären. Angenommen, wir haben ein Kameragerät, das Bilddaten in Echtzeit sammeln kann

See all articles