es6 構文はいつリリースされましたか?

es6 文法は 2015 年 6 月にリリースされました。 es6 は、2015 年 6 月に正式にリリースされた JavaScript 言語標準で、正式には ECMAScript2015 (ES2015) と呼ばれ、ECMAScript の 6 番目のバージョンです。 es6 の目標は、JavaScript 言語を使用して複雑な大規模アプリケーションを作成できるようにし、エンタープライズ レベルの開発言語になることです。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

es6 の概要

es6 の正式名称は ECMAScript6 (ECMAScript の 6 番目のバージョン) で、2015 年 6 月に正式にリリースされた JavaScript 言語の標準です。正式には ECMAScript.2015 (ES2015) と呼ばれます。その目標は、JavaScript 言語を使用して複雑な大規模アプリケーションを作成できるようにし、エンタープライズ レベルの開発言語になることです。

ECMAScript 6 は基本的に業界標準になっており、その人気は ES5 よりもはるかに速いです。主な理由は、最新のブラウザ、特に Chrome ブラウザと Firefox ブラウザはすでに ES6 のほとんどの機能をサポートしているためです。

ECMAScript は、ECMA-262 標準に従って実装されたユニバーサル スクリプト言語です。ECMA-262 標準では、主に、スクリプト言語の構文、型、ステートメント、キーワード、予約語、演算子、オブジェクトなどが規定されています。この言語のいくつかの部分では、ECMAScript の最新バージョンは ECMAScript6 (「ES6」と呼ばれます) です。

ES の後に数字が表示される場合は、それは異なるバージョンの ECMAScript です。

ECMAScript6 は ECMAScript の 6 番目のバージョンであるため、es6 と呼ばれます。

ECMAScript 6 の開発の歴史

2000 年に ECMAScript 4.0 の作成が開始されました。このバージョンは最終的には合格しませんでしたが、その内容のほとんどは ECMAScript6 に継承されました。したがって、ECMAScript6 の策定の開始点は実際には 2000 年でした。

2007 年 10 月に ECMAScript 4.0 のドラフトがリリースされ、正式バージョンは当初 2008 年 8 月にリリースされる予定でした。しかし、この基準を採用するかどうかについては、当事者間に重大な意見の相違があります。 Yahoo、Microsoft、Google を筆頭とする大企業は JavaScript の大幅なアップグレードに反対し、マイナーな変更を主張していますが、JavaScript の作成者である Brendan Aich 氏が率いる Mozilla は現在の草案を主張しています。

2008 年 7 月、当事者間にあまりにも多くの相違があり、次のバージョンにどの機能を含めるべきかについての議論があまりにも激しかったため、ECMA は会議で ECMAScript 4.0 の開発を一時停止し、削除することを決定しました。既存の機能の改善に関係するいくつかの側面が含まれています。小さな部分は ECMAScript 3.1 としてリリースされましたが、他の根本的なアイデアは拡張され、後のバージョンに組み込まれました。カンファレンスの雰囲気により、このバージョンのプロジェクト コードネームは Harmony でした。会議の直後、ECMAScript 3.1 は ECMAScript 5 に名前変更されました。

2009 年 12 月に、ECMAScript 5.0 が正式にリリースされました。 Harmony プロジェクトは 2 つに分割され、より実現可能ないくつかのアイデアは JavaScript.next と名付けられ、開発が続けられ、その後 ECMAScript 6 に進化しました。いくつかのあまり成熟していないアイデアは JavaScript.next.next とみなされ、将来開発される予定です。再度起動することを検討してください。

2011 年、ECMAScript 5.1 のリリース後、バージョン 6.0 の開発が始まりました。

2013 年 3 月、ECMAScript 6 ドラフトは凍結され、新しい機能は追加されませんでした。新しい機能は ECMAScript 7 に組み込まれることが想定されています。

2013 年 12 月に、ECMAScript 6 ドラフトがリリースされました。その後、すべての関係者からのフィードバックを聞くために 12 か月の議論期間が続きます。このバージョンでは文法上の機能が多すぎるため、策定プロセス中に多くの組織や個人が新しい機能を提出し続けています。標準委員会は最終的に、この標準を毎年 6 月にその年の正式バージョンとして正式にリリースすることを決定しました。次回以降はこのバージョンをベースに修正が加えられ、翌年6月までは当然新年版となります。

2015 年 6 月に ECMAScript 6 (ES6) が正式に採用され、国際標準となりました (正式名称は「ECMAScript 2015」(略称 ES2015))。

ES6 の最初のバージョンは 2015 年 6 月にリリースされ、正式名称は「ECMAScript 2015 Standard」(略称 ES2015) です。 2016 年 6 月に、予定通り若干改訂された「ECMAScript 2016 Standard」（略称 ES2016）がリリースされましたが、両者の違いは非常に小さいため（include メソッドとインデックスのみ）、このバージョンは ES6.1 バージョンとみなしてください。配列インスタンスの追加) 演算子)、基本的には同じ規格です。

したがって、ES6 は歴史的な用語であると同時に一般的な用語でもあり、ES2015、ES2016、ES2017 などを含むバージョン 5.1 以降の JavaScript の次世代標準を意味しますが、ES2015 は正式名称であり、具体的には以下のことを指します。その年にリリースされた言語標準の正式バージョン。本書で ES6 について言及する場合、通常は ES2015 標準を指しますが、「次世代 JavaScript 言語」一般を指す場合もあります。

ES6 文法仕様

ES6 の新しい構文をコーディングの実践に適用し、従来の JavaScript 構文と組み合わせて合理的で読みやすいコードを作成する方法について話し合います。そして維持します。

ブロックレベルのスコープ

(1)let replaces var

ES6 は 2 つを提案します。変数を宣言するための 2 つの新しいコマンド、let と const です。このうち、let は var を完全に置き換えることができます。これは、この 2 つのセマンティクスが同じであり、let には副作用がないためです。

'use strict';

if (true) {
  let x = 'hello';
}

for (let i = 0; i < 10; i++) {
  console.log(i);
}

上記のコードで let の代わりに var を使用すると、実際には 2 つのグローバル変数が宣言されますが、これは明らかに意図したものではありません。変数は、変数が宣言されているコード ブロック内でのみ有効である必要がありますが、var コマンドではこれを行うことはできません。

var コマンドには変数昇格効果がありますが、let コマンドにはこの問題はありません。

'use strict';

if (true) {
  console.log(x); // ReferenceError
  let x = 'hello';
}

上記のコードで let の代わりに var が使用されている場合、console.log 行はエラーを報告しませんが、変数宣言がコード ブロックの先頭に巻き上げられるため、 unknown が出力されます。これは、変数が最初に宣言され、後で使用されるという原則に違反します。

したがって、var コマンドを使用せず、代わりに let コマンドを使用することをお勧めします。

(2) グローバル定数とスレッド セーフティ

let と const の間では、## を使用することをお勧めします。最初の #const、特にグローバル環境では、変数を設定せず、定数のみを設定する必要があります。

const は、いくつかの理由から let よりも優れています。 1 つは const で、プログラムを読む人にこの変数を変更すべきではないことを思い出させることができます。もう 1 つは 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定数を宣言することには 2 つの利点があります。第一に、コードを読む人は値を変更すべきではないことがすぐにわかります。第二に、変数を不注意に変更することによって引き起こされるエラーを防ぐことができます。値の間違い。

すべての関数は定数に設定する必要があります。

長期的には、JavaScript はマルチスレッド実装になる可能性があります (インテルの 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);

オブジェクト

オブジェクトは 1 行で定義され、最後のメンバーはカンマで終わりません。複数行で定義されたオブジェクトの場合、最後のメンバーはカンマで終わります。

// 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 を作成するときにこの属性を他の属性と一緒に定義することをお勧めします。このようにして、すべてのプロパティが 1 か所で定義されます。

さらに、オブジェクトのプロパティとメソッドは、記述しやすくするために、できるだけ簡潔に表現する必要があります。

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;
  },
};

Array

スプレッド演算子 (...) を使用して配列をコピーします。

// 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);

Function

即時実行関数はアロー関数の形式で記述できます。

(() => {
  console.log('Welcome to the Internet.');
})();

匿名関数がパラメータとして使用される状況では、代わりにアロー関数を使用してみてください。これはより簡潔であり、これを拘束するためです。

// 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);

Arrow 関数は

Function.prototype.bind を置き換えます。これをバインドするために self/_this/that を使用する必要はなくなりました。

// 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);

単純で単一行の再利用不可能な関数の場合は、アロー関数を使用することをお勧めします。関数本体が複雑で行数が多い場合は、従来の関数記述方法を使用する必要があります。

すべての設定項目は 1 つのオブジェクトに集中し、最後のパラメータとして配置する必要があります。ブール値をパラメータとして直接使用することはできません。

// bad
function divide(a, b, option = false ) {
}

// good
function divide(a, b, { option = false } = {}) {
}

関数本体内で引数変数を使用せず、代わりに残り演算子 (...) を使用してください。 REST 演算子は引数を取得することを明示的に示しており、引数は配列のようなオブジェクトであるため、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 = {}) {
  // ...
}

マップ構造

オブジェクトとマップを区別するための注意: オブジェクトは、現実世界のエンティティ オブジェクトをシミュレートする場合にのみ使用してください。

key:value のデータ構造のみが必要な場合は、Map 構造を使用します。 Map にはトラバーサル メカニズムが組み込まれているためです。

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 &#39;react&#39;;

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视频教程、编程视频】

以上がes6 構文はいつリリースされましたか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。