Zusammenfassung der neuen Funktionen von JS--ES 2015/6

ES 2015/6 hat ziemlich viele neue Inhalte. Hier ist nur eine grobe (nicht unbedingt umfassende) Liste dieser Funktionen. Tatsächlich wird in jedem Punkt, auf den Sie eingehen, viel Wissen enthalten sein. Dieser Artikel zielt darauf ab, ihn zusammenzufassen, sodass er keine eingehende Diskussion und Untersuchung dieser Merkmale durchführt. Wenn ich dann Zeit habe, werde ich ein paar separate Blogs schreiben, um mich eingehender mit häufig verwendeten Punkten zu befassen und einen intensiven Austausch mit allen zu führen.

Pfeilfunktion

Die Pfeilfunktion, eine Kurzform einer Funktion, die durch die =>-Syntax implementiert wird, hat eine ähnliche Syntax in C#/JAVA8/CoffeeScript. Im Gegensatz zu Funktionen haben Pfeilfunktionen dasselbe this mit ihrem Ausführungskontext. Wenn eine Pfeilfunktion innerhalb eines Funktionsobjekts erscheint, teilt sie die Variable arguments mit der Funktion.

// Expression bodiesvar odds = evens.map(v => v + 1);var nums = evens.map((v, i) => v + i);// Statement bodiesnums.forEach(v => {
  if (v % 5 === 0)    fives.push(v);});// Lexical thisvar bob = {
  _name: "Bob",
  _friends: ['jim'],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f)); // Bob knows jim
  }};// Lexical argumentsfunction square() {
  let example = () => {
    let numbers = [];
    for (let number of arguments) {
      numbers.push(number * number);
    }

    return numbers;
  };

  return example();}square(2, 4, 7.5, 8, 11.5, 21); // returns: [4, 16, 56.25, 64, 132.25, 441]

Klasse Klasse

Javascript 类 führt kein neues objektorientiertes Objektvererbungsmodell ein , sondern syntaktischer Zucker basierend auf prototypischer Vererbung. Es bietet eine einfachere und klarere Syntax für die Erstellung von Objekten und die Handhabung der Vererbung. Die Klasse

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }}

erklärt keine Beförderung, Sie müssen vor dem Anruf sicherstellen, dass sie deklariert wurde.

Konstruktor constructor ist eine spezielle Methode zum Erstellen und Initialisieren von Instanzen einer Klasse.

Statische Methodestatic Schlüsselwort wird verwendet, um eine statische Methode zu deklarieren.

Erstellen einer Unterklasseextends Schlüsselwort wird verwendet, um eine Unterklasse zu erstellen. Bitte beachten Sie hier: „extends“ kann nicht zum Erweitern regulärer Objekte (nicht) verwendet werden -constructible/non-constructible), wenn Sie von einem regulären Objekt erben möchten, verwenden Sie Object.setPrototypeOf().

Superklasse aufrufensuper Schlüsselwort kann zum Aufrufen von Methoden in der übergeordneten Klasse verwendet werden

Mix-ins Gemischt

Erweitertes Objektliteral

Das ist möglich in Form von Literalen implementiert werden, um Prototypen, Schlüssel-Wert-Paar-Abkürzungen, Definitionsmethoden usw. und dynamische Attributnamen zu definieren.

var obj = {
    // Sets the prototype. "__proto__" or '__proto__' would also work.
    __proto__: theProtoObj,
    // Computed property name does not set prototype or trigger early error for
    // duplicate __proto__ properties.
    ['__proto__']: somethingElse,
    // Shorthand for ‘handler: handler’
    handler,
    // Methods
    toString() {
     // Super calls
     return "d " + super.toString();
    },
    // Computed (dynamic) property names
    [ "prop_" + (() => 42)() ]: 42};

Vorlagenzeichenfolge

Vorlagenzeichenfolge bietet syntaktischen Zucker zum Erstellen von Zeichenfolgen, in Prel/ Ähnliche Funktionen sind auch in Python und anderen Sprachen verfügbar.

// Basic literal string creation
`This is a pretty little template string.`

// Multiline strings
`In ES5 this is
 not legal.`

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

// Unescaped template strings
String.raw`In ES5 "\n" is a line-feed.`

// Construct an HTTP request prefix is used to interpret the replacements and construction
GET`http://foo.org/bar?a=${a}&b=${b}
    Content-Type: application/json
    X-Credentials: ${credentials}
    { "foo": ${foo},
      "bar": ${bar}}`(myOnReadyStateChangeHandler);

Destrukturierungszuweisung

Die Destrukturierungsmethode ist ein Javascript-Ausdruck, der es ermöglicht, einen Wert aus einem Array oder eine Eigenschaft aus einem zu extrahieren Objekt in eine andere variable Mitte.

// list matching
var [a, ,b] = [1,2,3];
a === 1;
b === 3;

// object matching (用新变量名赋值)
var { op: a, lhs: { op: b }, rhs: c }
       = getASTNode()

// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {op, lhs, rhs} = getASTNode()

// Can be used in parameter position
function g({name: x}) {
  console.log(x);
}
g({name: 5})

// Fail-soft destructuring
var [a] = [];
a === undefined;

// Fail-soft destructuring with defaults
var [a = 1] = [];
a === 1;

// 变量可以先赋予默认值。当要提取的对象没有对应的属性，变量就被赋予默认值。
var {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5

// Destructuring + defaults arguments
function r({x, y, w = 10, h = 10}) {
  return x + y + w + h;
}
r({x:1, y:2}) === 23

// 对象属性计算名和解构
let key = "z";
let { [key]: foo } = { z: "bar" };

console.log(foo); // "bar"

Default + Rest + Spread

Bietet Standardwerte für Funktionsparameter & ...Feste Anzahl von Parametern

function f(x, y=12) {
  // y is 12 if not passed (or passed as undefined)
  return x + y;
}
f(3) == 15


function f(x, ...y) {
  // y is an Array
  return x * y.length;
}
f(3, "hello", true) == 6



function f(x, y, z) {
  return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6

Let + Const

let wird verwendet, um Bereichsvariablen auf Blockebene zu deklarieren. const wird zum Deklarieren von Konstanten verwendet.

function f() {
  {
    let x;
    {
      // this is ok since it's a block scoped name
      const x = "sneaky";
      // error, was just defined with `const` above
      x = "foo";
    }
    // this is ok since it was declared with `let`
    x = "bar";
    // error, already declared above in this block
    let x = "inner";
  }
}

Iterator

Benutzerdefinierte Iteratoren können über symbol.iterator erstellt werden.

let fibonacci = {
  [Symbol.iterator]() {
    let pre = 0, cur = 1;
    return {
      next() {
        [pre, cur] = [cur, pre + cur];
        return { done: false, value: cur }
      }
    }
  }
}

for (var n of fibonacci) {
  // truncate the sequence at 1000
  if (n > 1000)
    break;
  console.log(n);
}

Generatoren

Normale Funktionen verwenden Funktionsdeklarationen, während Generatorfunktionen Funktions*-Deklarationen verwenden.

Innerhalb der Generatorfunktion gibt es eine Return-ähnliche Syntax: das Schlüsselwort yield. Der Unterschied zwischen den beiden besteht darin, dass eine normale Funktion nur einmal zurückgeben kann, während eine Generatorfunktion mehrmals nachgeben kann (natürlich kann sie auch nur einmal nachgeben). Während der Ausführung des Generators wird dieser sofort angehalten, wenn er auf einen Yield-Ausdruck trifft, und der Ausführungsstatus kann später wieder aufgenommen werden.

function* quips(name) {
  yield "你好 " + name + "!";
  yield "希望你能喜欢这篇介绍ES6的译文";
  if (name.startsWith("X")) {
    yield "你的名字 " + name + "  首字母是X，这很酷！";
  }
  yield "我们下次再见！";
}

Unicode

// wie ES5.1
"

Das obige ist der detaillierte Inhalt vonZusammenfassung der neuen Funktionen von JS--ES 2015/6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!