es6-Grammatik wurde im Juni 2015 veröffentlicht. es6 ist der im Juni 2015 offiziell veröffentlichte JavaScript-Sprachstandard. Er heißt offiziell ECMAScript2015 (ES2015) und ist die sechste Version von ECMAScript. Das Ziel von es6 besteht darin, die Verwendung der JavaScript-Sprache zum Schreiben komplexer Großanwendungen zu ermöglichen und eine Entwicklungssprache auf Unternehmensebene zu werden.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.
es6, der vollständige Name von ECMAScript6 (die 6. Version von ECMAScript), ist ein im Juni 2015 offiziell veröffentlichter Standard für die JavaScript-Sprache mit dem offiziellen Namen 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.
ECMAScript ist eine universelle Skriptsprache, die gemäß dem ECMA-262-Standard implementiert ist. Der ECMA-262-Standard legt hauptsächlich die Syntax, Typen, Anweisungen, Schlüsselwörter, reservierten Wörter, Operatoren, Objekte und andere Teile dieser Sprache fest Die neueste Version ist ECMAScript6 (kurz „ES6“).
Jedes Mal, wenn Sie ES gefolgt von einer Zahl sehen, handelt es sich um eine andere Version von ECMAScript.
ECMAScript6 ist die 6. Version von ECMAScript und kann daher als es6 bezeichnet werden.
Entwicklungsgeschichte von ECMAScript 6
Im Jahr 2000 begann die Entwicklung von ECMAScript 4.0. Diese Version wurde am Ende nicht bestanden, aber der Großteil ihres Inhalts wurde von ECMAScript6 geerbt. Daher war der Ausgangspunkt für die Formulierung von ECMAScript6 tatsächlich das Jahr 2000.
Im Oktober 2007 wurde der ECMAScript 4.0-Entwurf veröffentlicht, und die offizielle Version sollte ursprünglich im August 2008 veröffentlicht werden. Es bestehen jedoch gravierende Meinungsverschiedenheiten zwischen den Parteien darüber, ob dieser Standard übernommen werden soll. Große Unternehmen, angeführt von Yahoo, Microsoft und Google, lehnen größere Upgrades von JavaScript ab und befürworten kleinere Änderungen. Mozilla, angeführt vom JavaScript-Erfinder Brendan Eich, besteht auf dem aktuellen Entwurf.
Im Juli 2008 beschloss ECMA aufgrund zu vieler Unterschiede und heftiger Debatten darüber, welche Funktionen in die nächste Version aufgenommen werden sollten, die Entwicklung von ECMAScript 4.0 auszusetzen und einen kleinen Teil davon mit Verbesserungen bestehender Funktionen für ECMAScript 3.1 zu veröffentlichen Andere radikale Ideen wurden erweitert und in spätere Versionen eingearbeitet. Aufgrund der Atmosphäre der Konferenz lautete der Projektcodename dieser Version. Kurz nach dem Treffen wurde ECMAScript 3.1 in ECMAScript 5 umbenannt.
Im Dezember 2009 wurde ECMAScript 5.0 offiziell veröffentlicht. Das Harmony-Projekt wurde in zwei Teile geteilt, die den Namen JavaScript.next erhielten und später weiterentwickelt wurden. Einige weniger ausgereifte Ideen wurden als JavaScript.next.next bezeichnet und werden in Zukunft weiterentwickelt . Erwägen Sie einen erneuten Start.
Im Jahr 2011, nach der Veröffentlichung von ECMAScript 5.1, begann die Entwicklung der Version 6.0.
Im März 2013 wurde der ECMAScript 6-Entwurf eingefroren und es wurden keine neuen Funktionen hinzugefügt. Es ist geplant, neue Funktionen in ECMAScript 7 zu integrieren.
Im Dezember 2013 wurde der ECMAScript 6-Entwurf veröffentlicht. Anschließend folgt eine 12-monatige Diskussionsphase, in der das Feedback aller Beteiligten eingeholt wird. Da diese Version zu viele grammatikalische Funktionen einführt und viele Organisationen und Einzelpersonen während des Formulierungsprozesses weiterhin neue Funktionen einreichen. Der Normenausschuss entschied schließlich, dass der Standard einmal im Juni als offizielle Version des Jahres offiziell veröffentlicht werden sollte. In der Folgezeit werden auf Basis dieser Version Änderungen vorgenommen. Bis Juni des nächsten Jahres wird der Entwurf selbstverständlich zur Neujahrsversion.
Im Juni 2015 wurde ECMAScript 6 (ES6) offiziell übernommen und wurde zum internationalen Standard. Der offizielle Name ist „ECMAScript 2015“ (kurz ES2015).
Die erste Version von ES6 wurde im Juni 2015 veröffentlicht und ihr offizieller Name ist „ECMAScript 2015 Standard“ (kurz ES2015). Im Juni 2016 wurde wie geplant der leicht überarbeitete „ECMAScript 2016 Standard“ (kurz ES2016) veröffentlicht. Diese Version kann als ES6.1-Version angesehen werden, da der Unterschied zwischen den beiden sehr gering ist (nur die Includes-Methode und der Index). der Array-Instanz werden hinzugefügt) Operator), grundsätzlich der gleiche Standard.
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. Wenn in diesem Buch ES6 erwähnt wird, bezieht es sich normalerweise auf den ES2015-Standard, manchmal bezieht es sich aber auch auf die „JavaScript-Sprache der nächsten Generation“ im Allgemeinen.
Besprechen Sie, wie Sie die neue Syntax von ES6 auf die Codierungspraxis anwenden und sie mit der traditionellen JavaScript-Syntax kombinieren können, um vernünftigen, leicht lesbaren und zu wartenden Code zu schreiben.
Geltungsbereich auf Blockebene
(1)let ersetzt var
ES6 schlägt zwei neue Befehle zum Deklarieren von Variablen vor: let和const。其中，let完全可以取代var，因为两者语义相同，而且letKeine Nebenwirkungen.
'use strict';
if (true) {
let x = 'hello';
}
for (let i = 0; i < 10; i++) {
console.log(i);
}Wenn im obigen Code var anstelle von let verwendet wird, werden tatsächlich zwei globale Variablen deklariert, was offensichtlich nicht beabsichtigt ist. Variablen sollten nur innerhalb des Codeblocks gültig sein, in dem sie deklariert sind. Der Befehl var kann dies nicht tun. var替代let，实际上就声明了两个全局变量，这显然不是本意。变量应该只在其声明的代码块内有效，var命令做不到这一点。
var命令存在变量提升效用，let命令没有这个问题。
'use strict';
if (true) {
console.log(x); // ReferenceError
let x = 'hello';
}上面代码如果使用var替代let，console.log那一行就不会报错，而是会输出undefined，因为变量声明提升到代码块的头部。这违反了变量先声明后使用的原则。
所以，建议不再使用var命令，而是使用let命令取代。
（2）全局常量和线程安全
在let和const之间，建议优先使用const，尤其是在全局环境，不应该设置变量，只应设置常量。
const优于let有几个原因。一个是const可以提醒阅读程序的人，这个变量不应该改变；另一个是const比较符合函数式编程思想，运算不改变值，只是新建值，而且这样也有利于将来的分布式运算；最后一个原因是 JavaScript 编译器会对const进行优化，所以多使用const，有利于提高程序的运行效率，也就是说let和const的本质区别，其实是编译器内部的处理不同。
// bad var a = 1, b = 2, c = 3; // good const a = 1; const b = 2; const c = 3; // best const [a, b, c] = [1, 2, 3];
const声明常量还有两个好处，一是阅读代码的人立刻会意识到不应该修改这个值，二是防止了无意间修改变量值所导致的错误。
所有的函数都应该设置为常量。
长远来看，JavaScript 可能会有多线程的实现（比如 Intel 公司的 River Trail 那一类的项目），这时let表示的变量，只应出现在单线程运行的代码中，不能是多线程共享的，这样有利于保证线程安全。
字符串
静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号。
// bad
const a = "foobar";
const b = 'foo' + a + 'bar';
// acceptable
const c = `foobar`;
// good
const a = 'foobar';
const b = `foo${a}bar`;解构赋值
使用数组成员对变量赋值时，优先使用解构赋值。
const arr = [1, 2, 3, 4]; // bad const first = arr[0]; const second = arr[1]; // good const [first, second] = arr;
函数的参数如果是对象的成员，优先使用解构赋值。
// bad
function getFullName(user) {
const firstName = user.firstName;
const lastName = user.lastName;
}
// good
function getFullName(obj) {
const { firstName, lastName } = obj;
}
// best
function getFullName({ firstName, lastName }) {
}如果函数返回多个值，优先使用对象的解构赋值，而不是数组的解构赋值。这样便于以后添加返回值，以及更改返回值的顺序。
// bad
function processInput(input) {
return [left, right, top, bottom];
}
// good
function processInput(input) {
return { left, right, top, bottom };
}
const { left, right } = processInput(input);对象
单行定义的对象，最后一个成员不以逗号结尾。多行定义的对象，最后一个成员以逗号结尾。
// bad
const a = { k1: v1, k2: v2, };
const b = {
k1: v1,
k2: v2
};
// good
const a = { k1: v1, k2: v2 };
const b = {
k1: v1,
k2: v2,
};对象尽量静态化，一旦定义，就不得随意添加新的属性。如果添加属性不可避免，要使用Object.assign方法。
// bad
const a = {};
a.x = 3;
// if reshape unavoidable
const a = {};
Object.assign(a, { x: 3 });
// good
const a = { x: null };
a.x = 3;如果对象的属性名是动态的，可以在创造对象的时候，使用属性表达式定义。
// bad
const obj = {
id: 5,
name: 'San Francisco',
};
obj[getKey('enabled')] = true;
// good
const obj = {
id: 5,
name: 'San Francisco',
[getKey('enabled')]: true,
};上面代码中，对象obj的最后一个属性名，需要计算得到。这时最好采用属性表达式，在新建obj的时候，将该属性与其他属性定义在一起。这样一来，所有属性就在一个地方定义了。
另外，对象的属性和方法，尽量采用简洁表达法，这样易于描述和书写。
var ref = 'some value';
// bad
const atom = {
ref: ref,
value: 1,
addValue: function (value) {
return atom.value + value;
},
};
// good
const atom = {
ref,
value: 1,
addValue(value) {
return atom.value + value;
},
};数组
使用扩展运算符（...）拷贝数组。
// bad
const len = items.length;
const itemsCopy = [];
let i;
for (i = 0; i < len; i++) {
itemsCopy[i] = items[i];
}
// good
const itemsCopy = [...items];使用 Array.from 方法，将类似数组的对象转为数组。
const foo = document.querySelectorAll('.foo'); const nodes = Array.from(foo);
函数
立即执行函数可以写成箭头函数的形式。
(() => {
console.log('Welcome to the Internet.');
})();那些使用匿名函数当作参数的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this。
// bad
[1, 2, 3].map(function (x) {
return x * x;
});
// good
[1, 2, 3].map((x) => {
return x * x;
});
// best
[1, 2, 3].map(x => x * x);箭头函数取代Function.prototype.bind，不应再用 self/_this/that 绑定 this。
// bad
const self = this;
const boundMethod = function(...params) {
return method.apply(self, params);
}
// acceptable
const boundMethod = method.bind(this);
// best
const boundMethod = (...params) => method.apply(this, params);简单的、单行的、不会复用的函数，建议采用箭头函数。如果函数体较为复杂，行数较多，还是应该采用传统的函数写法。
所有配置项都应该集中在一个对象，放在最后一个参数，布尔值不可以直接作为参数。
// bad
function divide(a, b, option = false ) {
}
// good
function divide(a, b, { option = false } = {}) {
}不要在函数体内使用 arguments 变量，使用 rest 运算符（...）代替。因为 rest 运算符显式表明你想要获取参数，而且 arguments 是一个类似数组的对象，而 rest 运算符可以提供一个真正的数组。
// bad
function concatenateAll() {
const args = Array.prototype.slice.call(arguments);
return args.join('');
}
// good
function concatenateAll(...args) {
return args.join('');
}使用默认值语法设置函数参数的默认值。
// bad
function handleThings(opts) {
opts = opts || {};
}
// good
function handleThings(opts = {}) {
// ...
}Map 结构
注意区分 Object 和 Map，只有模拟现实世界的实体对象时，才使用 Object。如果只是需要key: value
var hat einen Variablen-Promotion-Effekt, aber der Befehl let hat dieses Problem nicht. 🎜let map = new Map(arr);
for (let key of map.keys()) {
console.log(key);
}
for (let value of map.values()) {
console.log(value);
}
for (let item of map.entries()) {
console.log(item[0], item[1]);
}var anstelle von let verwenden, wird in der Zeile console.log kein Fehler gemeldet, sondern ausgegeben undefiniert , da Variablendeklarationen an den Kopf des Codeblocks gehoben werden. Dies verstößt gegen den Grundsatz, dass Variablen zuerst deklariert und später verwendet werden. 🎜🎜Daher wird empfohlen, den Befehl var nicht mehr zu verwenden, sondern stattdessen den Befehl let zu verwenden. 🎜🎜(2) Globale Konstanten und Thread-Sicherheit🎜🎜Zwischen let und const wird die Verwendung von const</code empfohlen Erstens: Insbesondere in der globalen Umgebung sollten keine Variablen, sondern nur Konstanten festgelegt werden. 🎜🎜<code>const ist aus mehreren Gründen besser als let. Zum einen kann const Leute, die das Programm lesen, daran erinnern, dass diese Variable nicht geändert werden sollte. Zum anderen entspricht const eher der Idee der funktionalen Programmierung Die Operation ändert den Wert nicht, sondern erstellt nur einen neuen Wert. Der letzte Grund ist, dass der JavaScript-Compiler const optimiert mehr wird dazu beitragen, die Laufeffizienz des Programms zu verbessern, das heißt, der wesentliche Unterschied zwischen let und const ist tatsächlich die unterschiedliche interne Verarbeitung Compiler. 🎜// bad
function Queue(contents = []) {
this._queue = [...contents];
}
Queue.prototype.pop = function() {
const value = this._queue[0];
this._queue.splice(0, 1);
return value;
}
// good
class Queue {
constructor(contents = []) {
this._queue = [...contents];
}
pop() {
const value = this._queue[0];
this._queue.splice(0, 1);
return value;
}
}const Das Deklarieren von Konstanten hat auch zwei Vorteile: Erstens wird den Leuten, die den Code lesen, sofort klar, dass der Wert nicht geändert werden sollte. Zweitens werden Fehler vermieden, die durch versehentliches Ändern des Variablenwerts verursacht werden. 🎜🎜Alle Funktionen sollten auf Konstanten eingestellt sein. 🎜🎜Auf lange Sicht verfügt JavaScript möglicherweise über Multithread-Implementierungen (z. B. Intels River Trail-Projekte). Zu diesem Zeitpunkt sollten die durch let dargestellten Variablen nur in der Single-Thread-Ausführung angezeigt werden kann nicht von mehreren Threads gemeinsam genutzt werden, was zur Gewährleistung der Thread-Sicherheit beiträgt. 🎜🎜String🎜🎜Statische Strings verwenden immer einfache Anführungszeichen oder Backticks, keine doppelten Anführungszeichen. Dynamische Strings verwenden Backticks. 🎜// bad
const inherits = require('inherits');
function PeekableQueue(contents) {
Queue.apply(this, contents);
}
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function() {
return this._queue[0];
}
// good
class PeekableQueue extends Queue {
peek() {
return this._queue[0];
}
}// bad
const moduleA = require('moduleA');
const func1 = moduleA.func1;
const func2 = moduleA.func2;
// good
import { func1, func2 } from 'moduleA';// commonJS的写法
var React = require('react');
var Breadcrumbs = React.createClass({
render() {
return <nav />;
}
});
module.exports = Breadcrumbs;
// ES6的写法
import React from 'react';
class Breadcrumbs extends React.Component {
render() {
return <nav />;
}
};
export default Breadcrumbs;// bad import * as myObject from './importModule'; // good import myObject from './importModule';
function makeStyleGuide() {
}
export default makeStyleGuide;Object.assign. 🎜const StyleGuide = {
es6: {
}
};
export default StyleGuide;$ npm install --save-dev eslint
obj berechnet werden. Zu diesem Zeitpunkt ist es am besten, Attributausdrücke zu verwenden. Wenn Sie ein neues obj erstellen, definieren Sie dieses Attribut zusammen mit anderen Attributen. Auf diese Weise werden alle Eigenschaften an einer Stelle definiert. 🎜🎜Versuchen Sie außerdem, prägnante Ausdrücke für die Eigenschaften und Methoden von Objekten zu verwenden, damit diese leicht zu beschreiben und zu schreiben sind. 🎜$ npm install --save-dev eslint-config-airbnb $ npm install --save-dev eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
{
"extends": "eslint-config-airbnb"
}var unused = 'I have no purpose!';
function greet() {
var message = 'Hello, World!';
console.log(message);
}
greet();$ npx eslint index.js index.js 1:1 error Unexpected var, use let or const instead no-var 1:5 error unused is defined but never used no-unused-vars 4:5 error Expected indentation of 2 characters but found 4 indent 4:5 error Unexpected var, use let or const instead no-var 5:5 error Expected indentation of 2 characters but found 4 indent ✖ 5 problems (5 errors, 0 warnings)
Function.prototype.bind und sollte nicht mehr self/_this/that verwenden, um dies zu binden. 🎜rrreee🎜Für einfache, einzeilige und nicht wiederverwendbare Funktionen wird die Verwendung von Pfeilfunktionen empfohlen. Wenn der Funktionskörper komplex ist und viele Zeilen enthält, sollte die herkömmliche Methode zum Schreiben von Funktionen verwendet werden. 🎜🎜Alle Konfigurationselemente sollten in einem Objekt konzentriert sein und als letzter Parameter platziert werden. Boolesche Werte können nicht direkt als Parameter verwendet werden. 🎜rrreee🎜Verwenden Sie nicht die Argumentvariable im Funktionskörper, sondern stattdessen den Restoperator (...). Da der Rest-Operator explizit angibt, dass Sie Argumente abrufen möchten, und es sich bei arguments um ein Array-ähnliches Objekt handelt, kann der Rest-Operator ein echtes Array bereitstellen. 🎜rrreee🎜 Legen Sie Standardwerte für Funktionsparameter mithilfe der Standardwertsyntax fest. 🎜rrreee🎜Kartenstruktur🎜🎜Achten Sie auf die Unterscheidung zwischen Objekt und Karte, wenn Sie Entitätsobjekte in der Realität simulieren Welt. Wenn Sie nur die Datenstruktur von key: value benötigen, verwenden Sie die Map-Struktur. Weil Map über einen integrierten Traversalmechanismus verfügt. 🎜let map = new Map(arr);
for (let key of map.keys()) {
console.log(key);
}
for (let value of map.values()) {
console.log(value);
}
for (let item of map.entries()) {
console.log(item[0], item[1]);
}Class
总是用 Class，取代需要 prototype 的操作。因为 Class 的写法更简洁，更易于理解。
// bad
function Queue(contents = []) {
this._queue = [...contents];
}
Queue.prototype.pop = function() {
const value = this._queue[0];
this._queue.splice(0, 1);
return value;
}
// good
class Queue {
constructor(contents = []) {
this._queue = [...contents];
}
pop() {
const value = this._queue[0];
this._queue.splice(0, 1);
return value;
}
}使用extends实现继承，因为这样更简单，不会有破坏instanceof运算的危险。
// bad
const inherits = require('inherits');
function PeekableQueue(contents) {
Queue.apply(this, contents);
}
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function() {
return this._queue[0];
}
// good
class PeekableQueue extends Queue {
peek() {
return this._queue[0];
}
}模块
首先，Module 语法是 JavaScript 模块的标准写法，坚持使用这种写法。使用import取代require。
// bad
const moduleA = require('moduleA');
const func1 = moduleA.func1;
const func2 = moduleA.func2;
// good
import { func1, func2 } from 'moduleA';使用export取代module.exports。
// commonJS的写法
var React = require('react');
var Breadcrumbs = React.createClass({
render() {
return <nav />;
}
});
module.exports = Breadcrumbs;
// ES6的写法
import React from 'react';
class Breadcrumbs extends React.Component {
render() {
return <nav />;
}
};
export default Breadcrumbs;如果模块只有一个输出值，就使用export default，如果模块有多个输出值，就不使用export default，export default与普通的export不要同时使用。
不要在模块输入中使用通配符。因为这样可以确保你的模块之中，有一个默认输出（export default）。
// bad import * as myObject from './importModule'; // good import myObject from './importModule';
如果模块默认输出一个函数，函数名的首字母应该小写。
function makeStyleGuide() {
}
export default makeStyleGuide;如果模块默认输出一个对象，对象名的首字母应该大写。
const StyleGuide = {
es6: {
}
};
export default StyleGuide;ESLint 的使用
ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。
首先，在项目的根目录安装 ESLint。
$ npm install --save-dev eslint
然后，安装 Airbnb 语法规则，以及 import、a11y、react 插件。
$ npm install --save-dev eslint-config-airbnb $ npm install --save-dev eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
最后，在项目的根目录下新建一个.eslintrc文件，配置 ESLint。
{
"extends": "eslint-config-airbnb"
}现在就可以检查，当前项目的代码是否符合预设的规则。
index.js文件的代码如下。
var unused = 'I have no purpose!';
function greet() {
var message = 'Hello, World!';
console.log(message);
}
greet();使用 ESLint 检查这个文件，就会报出错误。
$ npx eslint index.js index.js 1:1 error Unexpected var, use let or const instead no-var 1:5 error unused is defined but never used no-unused-vars 4:5 error Expected indentation of 2 characters but found 4 indent 4:5 error Unexpected var, use let or const instead no-var 5:5 error Expected indentation of 2 characters but found 4 indent ✖ 5 problems (5 errors, 0 warnings)
上面代码说明，原文件有五个错误，其中两个是不应该使用var命令，而要使用let或const；一个是定义了变量，却没有使用；另外两个是行首缩进为 4 个空格，而不是规定的 2 个空格。
【相关推荐：javascript视频教程、编程视频】
Das obige ist der detaillierte Inhalt vonWann wurde die ES6-Syntax veröffentlicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
