Was sind es6 und es5?

ECMAScript ist eine von Ecma International durch ECMA-262 standardisierte Skriptprogrammiersprache. Der vollständige Name von es6 ist ECMAScript 6, die sechste Version von ECMAScript. Der vollständige Name von es5 ist ECMAScript 5, die fünfte Version von ECMAScript .

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

ECMAScript ist eine von Ecma International durch ECMA-262 standardisierte Skript-Programmiersprache. Diese Sprache ist im World Wide Web weit verbreitet und wird oft als JavaScript oder JScript bezeichnet, sodass sie als Standard für JavaScript verstanden werden kann. Tatsächlich handelt es sich bei den beiden letztgenannten um Implementierungen und Erweiterungen des ECMA-262-Standards.

Was ist ES5? Als fünfte Version von ECMAScript (die vierte Version wurde aufgegeben, weil sie zu komplex war) ist die Browserunterstützung im ersten Bild zu sehen. Die hinzugefügten Funktionen sind wie folgt.

1. Strikter Modus

Strikter Modus, bestimmte Verwendung einschränken, „strikt verwenden“;

2. Methode zum Hinzufügen von Arrays

hinzugefügt: every, some, forEach, filter, indexOf, lastIndexOf, isArray, map, Reduce, ReduceRight-Methode PS: Es gibt andere Methoden Function.prototype.bind, String.prototype.trim, Date.now

3. Objektmethode

Object.getPrototypeOf

Object.create

Object.getOwnPropertyNames

Object.defineProperty

Object.getOwnPropertyDescriptor

Object.defineProperties

Object.keys

Object.preventExtensions / Object.isExtensible

Object.seal / Object.isSealed

Object.freeze / Object.isFrozen.

PS: Nur Sprechen Sie darüber, was da ist, nicht darüber, was es ist.

Was ist ES6? ECMAScript6 bietet eine große Anzahl neuer Funktionen und gewährleistet gleichzeitig die Abwärtskompatibilität: ES6-Funktionen sind wie folgt:

1. Schlüsselwort let auf Blockebene, konstant

2. Eigenschaftswertkürzel für Objektliterale

var obj = {
    // __proto__
    __proto__: theProtoObj,
    // Shorthand for ‘handler: handler’
    handler,
    // Method definitions
    toString() {
    // Super calls
    return "d " + super.toString();
    },
    // Computed (dynamic) property names
    [ 'prop_' + (() => 42)() ]: 42
};

3. Zuweisungsdekonstruktion

let singer = { first: "Bob", last: "Dylan" };
let { first: f, last: l } = singer; // 相当于 f = "Bob", l = "Dylan"
let [all, year, month, day] =  /^(dddd)-(dd)-(dd)$/.exec("2015-10-25");
let [x, y] = [1, 2, 3]; // x = 1, y = 2

4. Funktionsparameter – Standardwert, Parameterverpackung, Array-Erweiterung (Standard, Rest, Spread)

//Default
function findArtist(name='lu', age='26') {
    ...
}
//Rest
function f(x, ...y) {
  // y is an Array
  return x * y.length;
}
f(3, "hello", true) == 6
//Spread
function f(x, y, z) {
  return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6

5 . Pfeilfunktionen

(1) Vereinfachte die Codeform und gibt standardmäßig das Ausdrucksergebnis zurück. (2) Binden Sie die Semantik automatisch, d. h. this, wenn Sie eine Funktion definieren. Wie im obigen Beispiel wird dies im anonymen Funktionsparameter von forEach verwendet.

6. Vorlagenzeichenfolgen

var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
// return "Hello Bob, how are you today?"

7. Der Iterator hat eine nächste Methode und der Aufruf gibt Folgendes zurück:

(1) Gibt eines der Iterationsobjekte zurück : false, Wert: elem }

(2). hat Konstruktor, Extens und Super, ist aber im Wesentlichen syntaktischer Zucker (es hat keinen Einfluss auf die Funktionalität der Sprache, ist aber für Programmierer bequemer zu verwenden).

for (var n of ['a','b','c']) {
  console.log(n);
}
// 打印a、b、c

10.Module

Die integrierten Modulfunktionen von ES6 nutzen die jeweiligen Vorteile von CommonJS und AMD: (1). Es weist die Merkmale der optimierten Syntax, der einzelnen Exporte und der zyklischen Abhängigkeiten auf. (2) Ähnlich wie AMD unterstützt es asynchrones Laden und konfigurierbares Laden von Modulen.

class Artist {
    constructor(name) {
        this.name = name;
    }
    perform() {
        return this.name + " performs ";
    }
}
class Singer extends Artist {
    constructor(name, song) {
        super.constructor(name);
        this.song = song;
    }
    perform() {
        return super.perform() + "[" + this.song + "]";
    }
}
let james = new Singer("Etta James", "At last");
james instanceof Artist; // true
james instanceof Singer; // true
james.perform(); // "Etta James performs [At last]"

11.Map + Set + WeakMap + WeakSet Vier Sammlungstypen: WeakMap- und WeakSet-Objekte als Eigenschaftsschlüssel werden recycelt und freigegeben, wenn keine anderen Variablen auf sie verweisen.

// lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;
// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));
// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));
Module Loaders:
// Dynamic loading – ‘System’ is default loader
System.import('lib/math').then(function(m) {
  alert("2π = " + m.sum(m.pi, m.pi));
});
// Directly manipulate module cache
System.get('jquery');
System.set('jquery', Module({$: $})); // WARNING: not yet finalized

12.Math + Number + String + Array + Object APIs Einige neue APIs

// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;
// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;
//WeakMap
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined
// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });//Because the added object has no other references, it will not be held in the set

13.Verwenden Sie einen Proxy, um die Operation des Objekts abzuhören, und dann können Sie einige entsprechende Dinge tun.

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false
Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2
"abcde".includes("cd") // true
"abc".repeat(3) // "abcabcabc"
Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1, 2, 3].find(x => x == 3) // 3
[1, 2, 3].findIndex(x => x == 2) // 1
[1, 2, 3, 4, 5].copyWithin(3, 0) // [1, 2, 3, 1, 2]
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"
Object.assign(Point, { origin: new Point(0,0) })

Operationen, die überwacht werden können: get, set, has, deleteProperty, apply, construction, getOwnPropertyDescriptor, defineProperty, getPrototypeOf, setPrototypeOf, enumerate, ownKeys, präventExtensions, isExtensible.

14.Symbole Symbol ist ein Grundtyp. Das Symbol wird durch Aufrufen der Symbolfunktion generiert, die einen optionalen Namensparameter erhält. Das von dieser Funktion zurückgegebene Symbol ist eindeutig.

var target = {};
var handler = {
  get: function (receiver, name) {
    return `Hello, ${name}!`;
  }
};
var p = new Proxy(target, handler);
p.world === 'Hello, world!';

15. Versprechen

Versprechen sind Objekte, die asynchrone Vorgänge verarbeiten. Nach der Verwendung von Promise-Objekten können Sie den Code mit einer Kettenaufrufmethode organisieren, um den Code intuitiver zu gestalten (ähnlich dem verzögerten Objekt von jQuery).

var key = Symbol("key");
var key2 = Symbol("key");
key == key2  //false

Zusammenfassung

Für ES6 wird es komplizierter, ob es die Fehler von ES4 in gewisser Weise wiederholt, oder ob die Akzeptanzfähigkeit aller nach ein paar Jahren stärker wird, und ich denke, das sollte der Fall sein. Ich denke, es ist ziemlich gut, weil sie abwärtskompatibel sind. Auch wenn Sie die komplexe Syntax nicht kennen, können Sie dennoch die Methoden verwenden, mit denen Sie vertraut sind, und der syntaktische Zucker, den sie bieten, ist recht praktisch. Dieser Artikel ist etwas lang, deshalb beende ich ihn hier. Ziel dieses Artikels ist es, darüber zu sprechen, was vorhanden ist, und er sollte den größten Teil des Inhalts abdecken. Es gibt jedoch keine detaillierte Analyse. Einige Inhalte stammen aus Online-Materialien, daher werde ich sie nicht einzeln auflisten.

Empfohlenes Lernen: JS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWas sind es6 und es5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!