Bilakah sintaks es6 dikeluarkan?

Sintaks ES6 telah dikeluarkan pada Jun 2015. es6 ialah standard bahasa JavaScript yang dikeluarkan secara rasmi pada Jun 2015. Ia secara rasmi dipanggil ECMAScript2015 (ES2015 Ia adalah versi keenam ECMAScript). Matlamat es6 adalah untuk membolehkan bahasa JavaScript digunakan untuk menulis aplikasi berskala besar yang kompleks dan menjadi bahasa pembangunan peringkat perusahaan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Pengenalan kepada es6

Nama penuh es6 ialah ECMAScript6 (versi ke-6 ECMAScript Ia adalah standard untuk bahasa JavaScript yang dikeluarkan secara rasmi pada bulan Jun 2015). Ia secara rasmi dipanggil ECMAScript 2015 (ES2015). Matlamatnya adalah untuk membolehkan bahasa JavaScript digunakan untuk menulis aplikasi berskala besar yang kompleks dan menjadi bahasa pembangunan peringkat perusahaan.

ECMAScript 6 pada asasnya telah menjadi standard industri, dan popularitinya jauh lebih pantas daripada ES5 Sebab utama ialah penyemak imbas moden menyokong ES6 dengan cepat, terutamanya pelayar Chrome dan Firefox, yang sudah menyokong kebanyakan ciri.

ECMAScript ialah bahasa skrip universal yang dilaksanakan mengikut piawai ECMA-262 Piawaian ECMA-262 terutamanya menetapkan sintaks, jenis, pernyataan, kata kunci, perkataan terpelihara, operator, objek, dll. bahasa ini. Beberapa bahagian, versi terkini ECMAScript ialah ECMAScript6 (pendek kata "ES6".

Setiap kali anda melihat ES diikuti dengan nombor, ia adalah versi ECMAScript yang berbeza.

ECMAScript6 ialah versi ke-6 ECMAScript, jadi ia boleh dirujuk sebagai es6.

Sejarah Pembangunan ECMAScript 6

Pada tahun 2000, ECMAScript 4.0 mula dihasilkan. Versi ini tidak lulus pada akhirnya, tetapi kebanyakan kandungannya diwarisi oleh ECMAScript6. Oleh itu, titik permulaan untuk perumusan ECMAScript6 sebenarnya adalah 2000.

Pada Oktober 2007, draf ECMAScript 4.0 telah dikeluarkan, dan versi rasmi pada asalnya dijangka dikeluarkan pada Ogos 2008. Walau bagaimanapun, terdapat perbezaan yang serius antara pihak sama ada untuk menerima pakai piawaian ini. Syarikat besar, yang diketuai oleh Yahoo, Microsoft dan Google, menentang peningkatan besar kepada JavaScript dan menyokong perubahan kecil Mozilla, diketuai oleh pencipta JavaScript Brendan Eich, menegaskan draf semasa.

Pada Julai 2008, kerana terdapat terlalu banyak perbezaan antara parti dan perdebatan terlalu sengit tentang fungsi yang perlu disertakan dalam versi seterusnya, ECMA memutuskan untuk menggantung pembangunan ECMAScript 4.0 dan mengalih keluar beberapa ciri-ciri yang melibatkan penambahbaikan kepada fungsi sedia ada Sebahagian kecil dikeluarkan sebagai ECMAScript 3.1, manakala idea-idea radikal lain telah dikembangkan dan dimasukkan ke dalam versi yang lebih baru Disebabkan suasana persidangan itu, nama kod projek versi ini ialah Harmony. Tidak lama selepas mesyuarat, ECMAScript 3.1 telah dinamakan semula ECMAScript 5.

Pada Disember 2009, ECMAScript 5.0 telah dikeluarkan secara rasmi. Projek Harmony dibahagikan kepada dua lagi beberapa idea yang boleh dilaksanakan dinamakan JavaScript.next dan terus dibangunkan, dan kemudiannya berkembang menjadi ECMAScript 6 beberapa idea yang kurang matang dianggap sebagai JavaScript.next.next dan akan dibangunkan pada masa hadapan Pertimbangkan untuk melancarkan semula.

Pada tahun 2011, selepas keluaran ECMAScript 5.1, pembangunan versi 6.0 bermula.

Pada Mac 2013, draf ECMAScript 6 telah dibekukan dan tiada ciri baharu ditambahkan. Fungsi baharu dijangka dimasukkan ke dalam ECMAScript 7.

Pada Disember 2013, draf ECMAScript 6 telah dikeluarkan. Ini kemudiannya akan diikuti dengan tempoh perbincangan selama 12 bulan untuk mendengar maklum balas daripada semua pihak. Oleh kerana versi ini memperkenalkan terlalu banyak ciri tatabahasa, dan semasa proses penggubalan, banyak organisasi dan individu terus menyerahkan ciri baharu. Jawatankuasa piawaian akhirnya memutuskan bahawa piawaian itu akan dikeluarkan secara rasmi sekali setiap Jun sebagai versi rasmi tahun itu. Pada masa berikutnya, perubahan akan dibuat berdasarkan versi ini Sehingga Jun tahun depan, draf itu akan menjadi versi tahun baharu.

Pada bulan Jun 2015, ECMAScript 6 (ES6) telah diterima pakai secara rasmi dan menjadi piawaian antarabangsa. Nama rasmi ialah "ECMAScript 2015" (pendek kata ES2015).

Versi pertama ES6 dikeluarkan pada Jun 2015. Nama rasmi ialah "ECMAScript 2015 Standard" (dirujuk sebagai ES2015). Pada bulan Jun 2016, "ECMAScript 2016 Standard" yang disemak sedikit (pendek kata ES2016) telah dikeluarkan seperti yang dijadualkan Versi ini boleh dianggap sebagai versi ES6.1, kerana perbezaan antara kedua-duanya adalah sangat kecil (hanya kaedah dan indeks yang disertakan. daripada contoh tatasusunan ditambah) operator), pada asasnya standard yang sama.

Oleh itu, ES6 ialah istilah sejarah dan istilah umum Ia bermaksud standard generasi seterusnya JavaScript selepas versi 5.1, meliputi ES2015, ES2016, ES2017, dsb., dan ES2015 ialah nama rasmi, khususnya merujuk. kepada Versi rasmi standard bahasa yang dikeluarkan pada tahun itu. Apabila ES6 disebut dalam buku ini, ia biasanya merujuk kepada standard ES2015, tetapi kadangkala ia juga merujuk kepada "bahasa JavaScript generasi seterusnya" secara umum.

Spesifikasi sintaks ES6

Bincangkan cara menggunakan sintaks baharu ES6 kepada amalan pengekodan dan gabungkannya dengan sintaks JavaScript tradisional untuk menulis yang munasabah, Kod yang mudah dibaca dan mengekalkan.

Skop peringkat blok

(1) mari menggantikan var

ES6 mencadangkan dua Dua arahan baharu untuk mengisytiharkan pembolehubah: let dan const. Antaranya, let boleh menggantikan sepenuhnya var, kerana semantik kedua-duanya adalah sama, dan let tidak mempunyai kesan sampingan.

'use strict';

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

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

Jika var digunakan dan bukannya let dalam kod di atas, dua pembolehubah global sebenarnya diisytiharkan, yang jelas bukan niat. Pembolehubah seharusnya hanya sah dalam blok kod di mana ia diisytiharkan Perintah var tidak boleh melakukan ini. Perintah

var mempunyai kesan promosi berubah-ubah, tetapi perintah let tidak mempunyai masalah ini.

'use strict';

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

Jika kod di atas menggunakan var dan bukannya let, baris console.log tidak akan melaporkan ralat, tetapi akan mengeluarkan undefined, kerana pengisytiharan pembolehubah dinaikkan ke kepala daripada blok kod. Ini melanggar prinsip pembolehubah yang diisytiharkan dahulu dan digunakan kemudian.

Oleh itu, adalah disyorkan untuk tidak lagi menggunakan perintah var tetapi sebaliknya menggunakan arahan let.

(2) Pemalar global dan keselamatan benang

Antara let dan const, disyorkan untuk menggunakan const terlebih dahulu, terutamanya dalam persekitaran global , Pembolehubah tidak boleh ditetapkan, hanya pemalar.

const lebih baik daripada let atas beberapa sebab. Satu ialah const boleh mengingatkan orang yang membaca program bahawa pembolehubah ini tidak boleh diubah; hanya mencipta nilai baharu, dan ini juga bermanfaat untuk operasi edaran masa hadapan ;Sebab terakhir ialah pengkompil JavaScript akan mengoptimumkan const, jadi menggunakan const lebih banyak akan membantu meningkatkan kecekapan program , perbezaan penting antara const dan let sebenarnya di dalam pengkompil dikendalikan secara berbeza. 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];

Mengisytiharkan pemalar juga mempunyai dua faedah Pertama, orang yang membaca kod akan segera menyedari bahawa nilai itu tidak boleh diubah suai. Kedua, ia menghalang ralat yang disebabkan oleh mengubah suai nilai pembolehubah secara tidak sengaja. const

Semua fungsi hendaklah ditetapkan kepada pemalar.

Dalam jangka masa panjang, JavaScript mungkin mempunyai pelaksanaan berbilang benang (seperti projek seperti Intel's River Trail Pada masa ini, pembolehubah yang diwakili oleh

seharusnya hanya muncul dalam kod yang dijalankan dalam satu urutan). , ia tidak boleh dikongsi oleh berbilang benang, yang akan membantu memastikan keselamatan benang. let

Rentetan

Rentetan statik sentiasa menggunakan petikan tunggal atau tanda belakang, bukan petikan berganda. Rentetan dinamik menggunakan kutu belakang.

// bad
const a = "foobar";
const b = 'foo' + a + 'bar';

// acceptable
const c = `foobar`;

// good
const a = 'foobar';
const b = `foo${a}bar`;

Memusnahkan tugasan

Apabila memberikan nilai kepada pembolehubah menggunakan ahli tatasusunan, tugasan memusnahkan lebih diutamakan.

const arr = [1, 2, 3, 4];

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

Jika parameter fungsi ialah ahli objek, tugasan memusnahkan lebih diutamakan.

// 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 }) {
}

Jika fungsi mengembalikan berbilang nilai, tugasan memusnahkan objek lebih diutamakan berbanding tugasan memusnahkan tatasusunan. Ini memudahkan untuk menambah nilai pulangan kemudian dan menukar susunan nilai pulangan.

// bad
function processInput(input) {
  return [left, right, top, bottom];
}

// good
function processInput(input) {
  return { left, right, top, bottom };
}

const { left, right } = processInput(input);

Objek

Objek yang ditakrifkan dalam satu baris, ahli terakhir tidak diakhiri dengan koma. Untuk objek yang ditakrifkan pada berbilang baris, ahli terakhir berakhir dengan koma.

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

Objek hendaklah statik yang mungkin Setelah ditentukan, atribut baharu tidak boleh ditambah sesuka hati. Jika penambahan atribut tidak dapat dielakkan, gunakan kaedah

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

Jika nama atribut objek adalah dinamik, anda boleh menggunakan ungkapan atribut untuk mentakrifkannya semasa mencipta objek.

// bad
const obj = {
  id: 5,
  name: 'San Francisco',
};
obj[getKey('enabled')] = true;

// good
const obj = {
  id: 5,
  name: 'San Francisco',
  [getKey('enabled')]: true,
};

Dalam kod di atas, nama atribut terakhir objek

perlu dikira. Pada masa ini, lebih baik menggunakan ungkapan atribut Apabila mencipta obj baharu, tentukan atribut ini bersama-sama atribut lain. Dengan cara ini, semua sifat ditakrifkan di satu tempat. obj

Selain itu, cuba gunakan ungkapan ringkas untuk sifat dan kaedah objek, supaya mudah untuk diterangkan dan ditulis.

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

Salin tatasusunan menggunakan operator spread (...).

// bad
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

// good
const itemsCopy = [...items];

Gunakan kaedah Array.from untuk menukar objek seperti tatasusunan kepada tatasusunan.

const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);

Fungsi

Fungsi pelaksanaan segera boleh ditulis dalam bentuk fungsi anak panah.

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

Dalam situasi di mana fungsi tanpa nama digunakan sebagai parameter, cuba gunakan fungsi anak panah. Kerana ini lebih ringkas dan mengikat ini.

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

fungsi anak panah menggantikan

dan seharusnya tidak lagi mengikat ini dengan diri/_ini/itu. Function.prototype.bind

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

Untuk fungsi mudah, satu baris dan tidak boleh digunakan semula, adalah disyorkan untuk menggunakan fungsi anak panah. Sekiranya badan fungsi kompleks dan mempunyai bilangan baris yang banyak, kaedah penulisan fungsi tradisional harus digunakan.

Semua item konfigurasi harus ditumpukan dalam satu objek dan diletakkan sebagai parameter terakhir tidak boleh digunakan secara langsung sebagai parameter.

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

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

Jangan gunakan pembolehubah argumen di dalam badan fungsi, sebaliknya gunakan operator selebihnya (...). Oleh kerana pengendali selebihnya secara eksplisit menyatakan bahawa anda ingin mendapatkan hujah, dan hujah ialah objek seperti tatasusunan, pengendali selebihnya boleh menyediakan tatasusunan sebenar.

// bad
function concatenateAll() {
  const args = Array.prototype.slice.call(arguments);
  return args.join('');
}

// good
function concatenateAll(...args) {
  return args.join('');
}

Gunakan sintaks nilai lalai untuk menetapkan nilai lalai untuk parameter fungsi.

// bad
function handleThings(opts) {
  opts = opts || {};
}

// good
function handleThings(opts = {}) {
  // ...
}

Struktur peta

Beri perhatian untuk membezakan antara Objek dan Peta Gunakan Objek hanya apabila mensimulasikan objek entiti di dunia nyata. Jika anda hanya memerlukan struktur data

, gunakan struktur Peta. Kerana Map mempunyai mekanisme traversal terbina dalam. key: value

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

Atas ialah kandungan terperinci Bilakah sintaks es6 dikeluarkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!