Was ist neu in es6?

ES6 neue Funktionen: 1. Verwenden Sie const und let, um Variablen zu deklarieren. 2. Vorlagenzeichenfolge, die Syntax „string“ kann das Zusammenfügen von Zeichenfolgen präziser gestalten Lösen Sie das Problem dieses Zeigens. 4. Erweiterungsoperator, der das iterierbare Objekt in seine einzelnen Elemente erweitert.

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

ECMAScript 6 (ES6) ist im Grunde genommen zum Industriestandard geworden. Der Hauptgrund dafür ist, dass moderne Browser ES6 sehr schnell unterstützen, insbesondere Chrome- und Firefox-Browser, die bereits die meisten Funktionen von ES6 unterstützen.

Im Folgenden werden die häufig verwendeten neuen ES6-Funktionen einzeln erläutert:

1 Verschiedene Variablendeklarationen: const und let

In der Vergangenheit hatte JS keinen Gültigkeitsbereich auf Blockebene und const und let füllten diesen Komfort aus. Leerzeichen, const und let sind allesamt Bereiche auf Blockebene.

ES6 empfiehlt die Verwendung von let zum Deklarieren lokaler Variablen im Vergleich zur vorherigen Variablen (unabhängig davon, wo sie deklariert ist, wird sie als oben in der Funktion deklariert betrachtet). Der Unterschied zwischen let- und var-Deklarationen:

var x = '全局变量';
{
  let x = '局部变量';
  console.log(x); // 局部变量
}
console.log(x); // 全局变量

let bedeutet die Deklaration von Variablen, während const die Deklaration von Konstanten bedeutet. Bei beiden handelt es sich um von const deklarierte Variablen, die als Konstanten betrachtet werden, was bedeutet, dass ihre Werte nach ihnen festgelegt werden sind gesetzt. Kann nicht mehr geändert werden:

const a = 1
a = 0 //报错

Wenn const ein Objekt ist, kann der im Objekt enthaltene Wert geändert werden. Abstrakt ausgedrückt reicht es aus, dass sich die Adresse, auf die das Objekt zeigt, nicht geändert hat:

const student = { name: 'cc' }

student.name = 'yy';// 不报错
student  = { name: 'yy' };// 报错

Es sind einige Punkte zu beachten:

• Mit dem Schlüsselwort let deklarierte Variablen verfügen nicht über die Funktion zum Heben von Variablen
• Nur Let- und Const-Deklarationen. Gültig im nächsten Block (in geschweiften Klammern).
• Bei Verwendung einer Konstanten-Const-Deklaration verwenden Sie bitte Variablen in Großbuchstaben, wie zum Beispiel: CAPITAL_CASING.
• const muss zum Zeitpunkt der Deklaration ein Wert zugewiesen werden

2. Vorlagenzeichenfolge

Vor ES6 haben wir Vorlagenzeichenfolgen häufig so gehandhabt: Erstellen Sie Vorlagen über „“ und „+“

$("body").html("This demonstrates the output of HTML \
content to the page, including student's\
" + name + ", " + seatNumber + ", " + sex + " and so on.");

Und für ES6

• grundlegende Zeichenfolgenformatierung. Betten Sie Ausdrücke zur Verkettung in Zeichenfolgen ein. Verwenden Sie ${} zum Definieren.

• ES6-Backtick (``) kann direkt ausgeführt werden.

ES6 unterstützt Vorlagenzeichenfolgen, wodurch das Zusammenfügen von Zeichenfolgen prägnanter und intuitiver wird.

$("body").html(`This demonstrates the output of HTML content to the page, 
including student's ${name}, ${seatNumber}, ${sex} and so on.`);

3. Pfeilfunktionen

Dies ist eine der aufregendsten Funktionen in ES6. => ist nicht nur eine Abkürzung für die Schlüsselwortfunktion, sondern bringt auch andere Vorteile mit sich. Die Pfeilfunktion teilt dies mit dem sie umgebenden Code, was Ihnen bei der Lösung des Zeigeproblems dabei helfen kann. Erfahrene JavaScript-Entwickler sind mit Mustern wie var self = this; oder var that = this vertraut, die sich auf die Umgebung von this beziehen. Aber mit => wird dieses Muster nicht mehr benötigt. =>不只是关键字function的简写，它还带来了其它好处。箭头函数与包围它的代码共享同一个this,能帮你很好的解决this的指向问题。有经验的JavaScript开发者都熟悉诸如var self = this;或var that = this这种引用外围this的模式。但借助=>，就不需要这种模式了。

箭头函数最直观的三个特点。

• 不需要 function 关键字来创建函数
• 省略 return 关键字
• 继承当前上下文的 this 关键字

// ES5
var add = function (a, b) {
    return a + b;
};
// 使用箭头函数
var add = (a, b) => a + b;

// ES5
[1,2,3].map((function(x){
    return x + 1;
}).bind(this));
    
// 使用箭头函数
[1,2,3].map(x => x + 1);

细节：当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return；

4. 函数的参数默认值

在ES6之前，我们往往这样定义参数的默认值：

// ES6之前，当未传入参数时，text = 'default'；
function printText(text) {
    text = text || 'default';
    console.log(text);
}

// ES6；
function printText(text = 'default') {
    console.log(text);
}

printText('hello'); // hello
printText();// default

5.延展操作符(Spread operator)

延展操作符 … 是ES6中引入的，将可迭代对象展开到其单独的元素中，所谓的可迭代对象就是任何能用for of循环进行遍历的对象，例如：数组、字符串、Map 、Set 、DOM节点等。

延展操作符...

Die drei intuitivsten Funktionen von Pfeilfunktionen.

Sie benötigen das Schlüsselwort „function“ nicht, um eine Funktion zu erstellen.

Lassen Sie das Schlüsselwort „return“ weg. Es ist möglich, die Klammern wegzulassen. Wenn Ihre Funktion nur einen Ausdruck zurückgibt, können Sie {} weglassen und

4 zurückgeben. Standardwerte von Funktionsparametern

Vor ES6 haben wir häufig die Standardwerte von Parametern wie definiert Dies:

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

5. Spread-Operator (Spread-Operator)

Der Spread-Operator … wird in ES6 eingeführt, der das iterierbare Objekt in seine einzelnen Elemente erweitert Spread-Operator Ein iterierbares Objekt ist jedes Objekt, das mit einer for-of-Schleife durchlaufen werden kann, z. B. Arrays, Strings, Maps, Sets, DOM-Knoten usw. Erweiterungsoperator... kann Array-Ausdrücke oder Zeichenfolgen auf der Syntaxebene während Funktionsaufrufen/Array-Erstellung erweitern; er kann auch Objektausdrücke nach Schlüsselwert erweitern, wenn Objekte auf die Art und Weise erweitert werden, wie sie zu erweitern sind.

Bei Verwendung in Iteratoren ist es ein Spread-Operator:

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

Bei Verwendung in Funktionsparametern ist es ein Rest-Operator: Bei Verwendung in Funktionsparametern ist es eine Rest-Operation. Symbol:

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

6 und Oktalliterale

🎜🎜🎜ES6 unterstützt Binär- und Oktalliterale, die durch Hinzufügen von 0o oder 0O vor der Zahl in Oktalwerte umgewandelt werden können: 🎜🎜

// 对象
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. Objekt- und Array-Destrukturierung🎜🎜🎜

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

🎜🎜🎜8. Objekt-Superklasse🎜🎜🎜🎜ES6 ermöglicht die Verwendung der Super-Methode in Objekten: 🎜

let letter = ['a', 'b', 'c'];
letter.size = 3;
for (let letter of letters) {
  console.log(letter);
}
// 结果: a, b, c

🎜🎜🎜9 wird verwendet, um einen Iterator zu durchlaufen, beispielsweise ein Array: 🎜

let letter = ['a', 'b', 'c'];
letter.size = 3;
for (let letter of letters) {
  console.log(letter);
}
// 结果: a, b, c

for...in 用来遍历对象中的属性：

let stu = ['Sam', '22', '男'];
stu.size = 3;
for (let stu in stus) {
  console.log(stu);
}
// 结果: Sam, 22, 男

10.ES6中的类

ES6 中支持 class 语法，不过，ES6的class不是新的对象继承模型，它只是原型链的语法糖表现形式。

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

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."

类中的继承和超集：

class Phone {
  constructor() {
    console.log("I'm a phone.");
  }
}
 
class MI extends Phone {
  constructor() {
    super();
    console.log("I'm a phone designed by xiaomi");
  }
}
 
let mi8 = new MI();

extends 允许一个子类继承父类，需要注意的是，子类的constructor 函数中需要执行 super() 函数。 当然，你也可以在子类方法中调用父类的方法，如super.parentMethodName()。 在 这里 阅读更多关于类的介绍。

有几点值得注意的是：

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

11、模块化(Module)

ES5不支持原生的模块化，在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域，模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口，通过import来引用其它模块提供的接口。同时还为模块创造了命名空间，防止函数的命名冲突。

导出(export)

ES6允许在一个模块中使用export来导出多个变量或函数。

导出变量

//test.js
export var name = 'Rainbow'

心得：ES6不仅支持变量的导出，也支持常量的导出。 export const sqrt = Math.sqrt;//导出常量

ES6将一个文件视为一个模块，上面的模块通过 export 向外输出了一个变量。一个模块也可以同时往外面输出多个变量。

 //test.js
 var name = 'Rainbow';
 var age = '24';
 export {name, age};

导出函数

// myModule.js
export function myModule(someArg) {
  return someArg;
}

导入(import)

定义好模块的输出以后就可以在另外一个模块通过import引用。

import {myModule} from 'myModule';// main.js
import {name,age} from 'test';// test.js

心得:一条import 语句可以同时导入默认函数和其它变量。import defaultMethod, { otherMethod } from 'xxx.js';

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

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