Woher kommt es6?

es6 wurde im Juni 2015 veröffentlicht. Der vollständige Name von es6 ist „ECMAScript6“. Es handelt sich um den im Juni 2015 offiziell veröffentlichten JavaScript-Sprachstandard. Da es sich um die 6. Version von ECMAScript handelt, kann es als es6 bezeichnet werden.

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

Einführung in „es“

es, der vollständige Name von „ECMAScript“, ist eine universelle Skriptsprache, die gemäß dem ECMA-262-Standard implementiert ist. Der ECMA-262-Standard legt hauptsächlich die Syntax, Typen und Anweisungen fest , Schlüsselwörter, reservierte Wörter, Operatoren, Objekte und andere Teile, die neueste Version von ECMAScript ist ECMAScript6 (als „ES6“ bezeichnet).

Jedes Mal, wenn Sie ES gefolgt von einer Zahl sehen, handelt es sich um eine andere Version von ECMAScript.

es6/ ES2015

es6 steht für ECMAScript6 (die 6. Version von ECMAScript), die offiziell im Juni 2015 veröffentlicht wurde. Sie heißt offiziell ECMAScript 2015 (ES2015). Ziel ist es, die Verwendung der JavaScript-Sprache zum Schreiben komplexer Großanwendungen zu ermöglichen und sie zu einer Entwicklungssprache auf Unternehmensebene zu machen.

ECMAScript 6 hat sich im Grunde viel schneller als ES5 durchgesetzt. Der Hauptgrund dafür ist, dass moderne Browser ES6 sehr schnell unterstützen, insbesondere Chrome- und Firefox-Browser, die bereits die meisten Funktionen in ES6 unterstützen.

Neue Funktionen von ES6:

1. let-, const- und block-Bereiche

let ermöglicht die Erstellung von Bereichen auf Blockebene anstelle von var:

var a = 2;
{
  let a = 3;
  console.log(a); // 3
}
console.log(a); // 2

Ein weiterer Die Methode zur Variablendeklaration, die auch auf Blockebene gültig ist, ist const, mit der eine Konstante deklariert werden kann. In ES6 ähnelt die von const deklarierte Konstante einem Zeiger, was bedeutet, dass diese „Konstante“ nicht unveränderlich ist, wie zum Beispiel:

{
  const ARR = [5,6];
  ARR.push(7);
  console.log(ARR); // [5,6,7]
  ARR = 10; // TypeError
}

Es sind einige Punkte zu beachten:

• let Die Die durch das Schlüsselwort deklarierte Variable ist nicht statisch. Bei variablen Hebefunktionen sind Let- und Const-Deklarationen nur im nächsten Block (innerhalb geschweifter Klammern) gültig. Wenn Sie Konstanten-Const-Deklarationen verwenden, verwenden Sie bitte Variablen in Großbuchstaben, z. B. CAPITAL_CASING. Const Bei der Deklaration muss ein Wert zugewiesen werden
• 2. Pfeilfunktionen
• In ES6 ist die Pfeilfunktion eine Kurzform der Funktion. Sie verwendet Klammern, um die Parameter einzuschließen, gefolgt von einem =>, gefolgt von Funktionskörper:

var getPrice = function() {
  return 4.55;
};
 
// Implementation with Arrow Function
var getPrice = () => 4.55;

Es ist zu beachten, dass die Pfeilfunktion getPrice im obigen Beispiel einen prägnanten Funktionskörper verwendet, der keine Return-Anweisung erfordert. Das folgende Beispiel verwendet einen normalen Funktionskörper:

let arr = ['apple', 'banana', 'orange'];
 
let breakfast = arr.map(fruit => {
  return fruit + 's';
});
 
console.log(breakfast); // apples bananas oranges

Natürlich Pfeilfunktionen Tun Sie mehr, als nur den Code prägnant zu gestalten. Dieser ist in einer Funktion immer gebunden und zeigt immer auf das Objekt selbst. Einzelheiten finden Sie in den folgenden Beispielen:

function Person() {
  this.age = 0;
 
  setInterval(function growUp() {
    // 在非严格模式下，growUp() 函数的 this 指向 window 对象
    this.age++;
  }, 1000);
}
var person = new Person();

Wir müssen häufig eine Variable verwenden, um dies zu speichern, und dann in der GrowUp-Funktion darauf verweisen:

function Person() {
  var self = this;
  self.age = 0;
 
  setInterval(function growUp() {
    self.age++;
  }, 1000);
}

Die Verwendung von Pfeilfunktionen kann diesen Ärger ersparen:

function Person(){
  this.age = 0;
 
  setInterval(() => {
    // |this| 指向 person 对象
    this.age++;
  }, 1000);
}
 
var person = new Person();

3 . Funktionsparameter sind Standardwerte

ES6 ermöglicht das Festlegen von Standardwerten für Funktionsparameter:

let getFinalPrice = (price, tax=0.7) => price + price * tax;
getFinalPrice(500); // 850

4. Spread/Rest-Operator bezieht sich auf ..., egal ob es sich um Spread oder handelt Der Rest hängt vom Kontext des Sprachgebiets ab.

Bei Verwendung in Iteratoren ist es ein Spread-Operator:

function foo(x,y,z) {
  console.log(x,y,z);
}
 
let arr = [1,2,3];
foo(...arr); // 1 2 3

Bei Verwendung in Funktionsparametern ist es ein Rest-Operator:

function foo(...args) {
  console.log(args);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

5. Objektlexikalische Erweiterung

ES6 ermöglicht die Verwendung von Kurzschriftsyntax bei der Deklaration von Objektliteralen Initialisieren Sie die Definitionsmethoden von Attributvariablen und -funktionen und ermöglichen Sie Berechnungsoperationen in Objektattributen:

function getCar(make, model, value) {
  return {
    // 简写变量
    make,  // 等同于 make: make
    model, // 等同于 model: model
    value, // 等同于 value: value
 
    // 属性可以使用表达式计算值
    ['make' + make]: true,
 
    // 忽略 `function` 关键词简写对象函数
    depreciate() {
      this.value -= 2500;
    }
  };
}
 
let car = getCar('Barret', 'Lee', 40000);
 
// output: {
//     make: 'Barret',
//     model:'Lee',
//     value: 40000,
//     makeBarret: true,
//     depreciate: [Function: depreciate]
// }

6. Binäre und oktale Literale

ES6 unterstützt binäre und oktale Literale können durch Hinzufügen von 0o oder 0O in oktale Werte umgewandelt werden vor der Zahl:

let oValue = 0o10;
console.log(oValue); // 8
 
let bValue = 0b10; // 二进制使用 `0b` 或者 `0B`
console.log(bValue); // 2

7. Objekt- und Array-Destrukturierung

Durch die Destrukturierung kann die Generierung von Zwischenvariablen während der Objektzuweisung vermieden werden:

function foo() {
  return [1,2,3];
}
let arr = foo(); // [1,2,3]
 
let [a, b, c] = foo();
console.log(a, b, c); // 1 2 3
 
function bar() {
  return {
    x: 4,
    y: 5,
    z: 6
  };
}
let {x: x, y: y, z: z} = bar();
console.log(x, y, z); // 4 5 6

8. Objekt-Superklasse

ES6 ermöglicht die Verwendung der Super-Methode in Objekten:

var parent = {
  foo() {
    console.log("Hello from the Parent");
  }
}
 
var child = {
  foo() {
    super.foo();
    console.log("Hello from the Child");
  }
}
 
Object.setPrototypeOf(child, parent);
child.foo(); // Hello from the Parent
             // Hello from the Child

9. Vorlagensyntax und Trennzeichen

In ES6 gibt es eine sehr übersichtliche Möglichkeit, eine Reihe von Zeichenfolgen und Variablen zusammenzustellen.

${ ... } wird verwendet, um eine Variable

` als Trennzeichen darzustellen

let user = 'Barret';
console.log(`Hi ${user}!`); // Hi Barret!

10 for...of VS for...in

• for...of wird verwendet Traverse a Iteratoren wie Arrays:

let nicknames = ['di', 'boo', 'punkeye'];
nicknames.size = 3;
for (let nickname of nicknames) {
  console.log(nickname);
}
// 结果: di, boo, punkeye

• for...in werden verwendet, um die Eigenschaften in Objekten zu durchlaufen:

let nicknames = ['di', 'boo', 'punkeye'];
nicknames.size = 3;
for (let nickname in nicknames) {
  console.log(nickname);
}
Result: 0, 1, 2, size

11. Map und WeakMap

Es gibt zwei neue Sätze von Datenstrukturen in ES6: Map und Schwache Karte. Tatsächlich kann jedes Objekt als Karte betrachtet werden.

Ein Objekt besteht aus mehreren Schlüssel-Wert-Paaren. Als Schlüssel des Objekts kann jeder Typ verwendet werden, z. B.:

var myMap = new Map();
 
var keyString = "a string",
    keyObj = {},
    keyFunc = function () {};
 
// 设置值
myMap.set(keyString, "value 与 'a string' 关联");
myMap.set(keyObj, "value 与 keyObj 关联");
myMap.set(keyFunc, "value 与 keyFunc 关联");
 
myMap.size; // 3
 
// 获取值
myMap.get(keyString);    // "value 与 'a string' 关联"
myMap.get(keyObj);       // "value 与 keyObj 关联"
myMap.get(keyFunc);      // "value 与 keyFunc 关联"

WeakMap

WeakMap ist eine Map, aber alle ihre Schlüssel sind schwache Referenzen bedeutet, dass die Dinge in WeakMap bei der Speicherbereinigung nicht berücksichtigt werden, sodass Sie sich bei der Verwendung keine Sorgen über Speicherverluste machen müssen.

另一个需要注意的点是，WeakMap 的所有 key 必须是对象。它只有四个方法 delete(key),has(key),get(key) 和set(key, val)：

let w = new WeakMap();
w.set('a', 'b'); 
// Uncaught TypeError: Invalid value used as weak map key
 
var o1 = {},
    o2 = function(){},
    o3 = window;
 
w.set(o1, 37);
w.set(o2, "azerty");
w.set(o3, undefined);
 
w.get(o3); // undefined, because that is the set value
 
w.has(o1); // true
w.delete(o1);
w.has(o1); // false

12. Set 和 WeakSet

Set 对象是一组不重复的值，重复的值将被忽略，值类型可以是原始类型和引用类型：

let mySet = new Set([1, 1, 2, 2, 3, 3]);
mySet.size; // 3
mySet.has(1); // true
mySet.add('strings');
mySet.add({ a: 1, b:2 });

可以通过 forEach 和 for...of 来遍历 Set 对象：

mySet.forEach((item) => {
  console.log(item);
    // 1
    // 2
    // 3
    // 'strings'
    // Object { a: 1, b: 2 }
});
 
for (let value of mySet) {
  console.log(value);
    // 1
    // 2
    // 3
    // 'strings'
    // Object { a: 1, b: 2 }
}

Set 同样有 delete() 和 clear() 方法。

WeakSet

类似于 WeakMap，WeakSet 对象可以让你在一个集合中保存对象的弱引用，在 WeakSet 中的对象只允许出现一次：

var ws = new WeakSet();
var obj = {};
var foo = {};
 
ws.add(window);
ws.add(obj);
 
ws.has(window); // true
ws.has(foo);    // false, foo 没有添加成功
 
ws.delete(window); // 从结合中删除 window 对象
ws.has(window);    // false, window 对象已经被删除

13. 类

ES6 中有 class 语法。值得注意是，这里的 class 不是新的对象继承模型，它只是原型链的语法糖表现形式。

函数中使用 static 关键词定义构造函数的的方法和属性：

class Task {
  constructor() {
    console.log("task instantiated!");
  }
 
  showId() {
    console.log(23);
  }
 
  static loadAll() {
    console.log("Loading all tasks..");
  }
}
 
console.log(typeof Task); // function
let task = new Task(); // "task instantiated!"
task.showId(); // 23
Task.loadAll(); // "Loading all tasks.."

类中的继承和超集：

class Car {
  constructor() {
    console.log("Creating a new car");
  }
}
 
class Porsche extends Car {
  constructor() {
    super();
    console.log("Creating Porsche");
  }
}
 
let c = new Porsche();
// Creating a new car
// Creating Porsche

extends 允许一个子类继承父类，需要注意的是，子类的constructor 函数中需要执行 super() 函数。

当然，你也可以在子类方法中调用父类的方法，如super.parentMethodName()。

在 这里 阅读更多关于类的介绍。

有几点值得注意的是：

• 类的声明不会提升（hoisting)，如果你要使用某个 Class，那你必须在使用之前定义它，否则会抛出一个 ReferenceError 的错误
• 在类中定义函数不需要使用 function 关键词

14. Symbol

Symbol 是一种新的数据类型，它的值是唯一的，不可变的。ES6 中提出 symbol 的目的是为了生成一个唯一的标识符，不过你访问不到这个标识符：

var sym = Symbol( "some optional description" );
console.log(typeof sym); // symbol

注意，这里 Symbol 前面不能使用 new 操作符。

如果它被用作一个对象的属性，那么这个属性会是不可枚举的：

var o = {
    val: 10,
    [ Symbol("random") ]: "I'm a symbol",
};
 
console.log(Object.getOwnPropertyNames(o)); // val

如果要获取对象 symbol 属性，需要使用Object.getOwnPropertySymbols(o)。

15. 迭代器（Iterators）

迭代器允许每次访问数据集合的一个元素，当指针指向数据集合最后一个元素时，迭代器便会退出。它提供了 next() 函数来遍历一个序列，这个方法返回一个包含 done 和 value 属性的对象。

ES6 中可以通过 Symbol.iterator 给对象设置默认的遍历器，无论什么时候对象需要被遍历，执行它的 @@iterator 方法便可以返回一个用于获取值的迭代器。

数组默认就是一个迭代器：

var arr = [11,12,13];
var itr = arr[Symbol.iterator]();
 
itr.next(); // { value: 11, done: false }
itr.next(); // { value: 12, done: false }
itr.next(); // { value: 13, done: false }
 
itr.next(); // { value: undefined, done: true }

你可以通过 [Symbol.iterator]() 自定义一个对象的迭代器。

16. Generators

Generator 函数是 ES6 的新特性，它允许一个函数返回的可遍历对象生成多个值。

在使用中你会看到 * 语法和一个新的关键词 yield:

function *infiniteNumbers() {
  var n = 1;
  while (true){
    yield n++;
  }
}
 
var numbers = infiniteNumbers(); // returns an iterable object
 
numbers.next(); // { value: 1, done: false }
numbers.next(); // { value: 2, done: false }
numbers.next(); // { value: 3, done: false }

每次执行 yield 时，返回的值变为迭代器的下一个值。

17. Promises

ES6 对 Promise 有了原生的支持，一个 Promise 是一个等待被异步执行的对象，当它执行完成后，其状态会变成 resolved 或者rejected。

var p = new Promise(function(resolve, reject) {  
  if (/* condition */) {    // fulfilled successfully
    resolve(/* value */);  
  } else {    // error, rejected
    reject(/* reason */);  
  }});

每一个 Promise 都有一个 .then 方法，这个方法接受两个参数，第一个是处理 resolved 状态的回调，一个是处理 rejected 状态的回调：

p.then((val) => console.log("Promise Resolved", val),
       (err) => console.log("Promise Rejected", err));

【相关推荐：javascript视频教程、web前端】

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