🍿 🥘 😰 JavaScriptの次のバージョンであるECMAScript 6の概要 🐹 ↙️ 🏉

手始めに、教育プログラムといくつかの事実：

ECMAScriptは公式のJavaScript言語標準です（Javaという言葉はSunの商標だったため、JavaScriptの言葉は使用できませんでした） JavaScriptはECMAScript標準の実装です。
TC39は、ECMAScript標準を開発し、それに機能を含めることを決定する委員会です。
ECMAScript標準は多数あります。最も人気のあるのはECMA-262です。
ECMAScript 5は、ECMA-262標準の最新版（2009年に承認済み）です。
ECMA-262標準の以前のバージョンは次のとおりでした（非常に古いバージョンについては言及しません）。
- ECMAScript 3-ほとんどのブラウザーでサポート（1999年に承認）。
- ECMAScript 4-標準へのあまりに急激な変更は考慮されません。 2008年7月の後半に、機能が削減されたバージョン（ただし、ECMAScript 3よりもはるかに豊富）では、新しいECMAScript Harmonyプロジェクトが作成されました。
ECMAScript 6（コード名ECMAScript.next）は、2013年末までに承認される必要があります。

それでは、JavaScriptの新しいバージョンで何が待っているのでしょうか？

ブロックスコープ

JavaScript . , , c var

, ( ):

function f(a) {
   if (a < 0) {
      var i = 3;
   }

  console.log(i); // 3
}

f(-1)

let

, :

function f(a) {
   if (a < 0) {
      let i = 3;
   }

   console.log(i); // ReferenceError: i is not defined
}

f(-1)

function setLevel(newLevel = 0) {
   ...
}

setLevel(); // newLevel = 0
setLevel(5); // newLevel = 5
setLevel(undefined); // newLevel = 0

function foo({ from, to = 10 }) {
   ...
}

foo({ from: 1, to: 5 });
foo({ to: 5, from: 1 });
foo({ from: 1 });

( ):

function foo(positional, { named1, named2 }) {
   ...
}

foo(123, { named1: 'abc', named2: 'def' })
foo(123, { named2: 'def', named1: 'abc' })

Destructuring assignment

ECMAScript 6 :

let { first: f, last: l } = { first: 'Jane', last: 'Doe' };
console.log(f); // 'Jane'
console.log(l); // 'Doe'

, ( ) .

refutable ( , ). .. - , :

let { first: f, last: l } = { first: 'Jane' };  //

, , irrefutable ?:

let { first: f, last?: l } = { first: 'Jane' };  // ok
console.log(l);  // undefined

let { first: f, last: l = 'Unknown' } = { first: 'Jane' };  // ok
console.log(l);  // 'Unknown'

, - undefined

:

let { a: x = 1 } = { a: undefined }
console.log(x);  // 1

, , irrefutable, ? :

let { foo: f }? = anything;  //  ok

f

undefined

, anything

undefined

, null

foo

.

( tmp

):

{ foo: foo, bar: bar } = { foo: bar, bar: foo};

[ foo, bar ] = [ bar, foo ];

ECMAScript 6 :

// Supertype
class Person {
   constructor(name) {
      this.name = name;
   }

   describe() {
      return "Person called " + this.name;
   }
}

// Subtype
class Employee extends Person {
   constructor(name, title) {
      super.constructor(name);
      this.title = title;
   }

   describe() {
      return super.describe() + " (" + this.title + ")";
   }
}

let jane = new Employee("Jane", "CTO");
jane instanceof Person; // true
jane instanceof Employee; // true
jane.describe(); // 'Person called Jane (CTO)'

// Supertype
function Person(name) {
   this.name = name;
}

Person.prototype.describe = function () {
   return "Person called " + this.name;
};

// Subtype
function Employee(name, title) {
   Person.call(this, name);
   this.title = title;
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
Employee.prototype.describe = function () {
   return Person.prototype.describe.call(this) + " (" + this.title + ")";
};

, ECMAScript 6 — .

:

class Point {
   constructor(x, y) {
      this.x = x;
      this.y = y;
   }
   
   static zero() {
      return new Point(0, 0);
   }
}

( , ECMAScript 6). . .

JavaScript - :

module Math {
   export function sum(x, y) {
      return x + y;
   }

   export var pi = 3.141593;

   //   
   function internal() {
      ...
   }
}

import Math.{sum, pi}; 
alert("2π = " + sum(pi, pi));

*

, :

import Math.*; 
alert("2π = " + sum(pi, pi));

module Widgets {
   module Button { ... }
   module Alert { ... }
   module TextArea { ... }
   ...
}

import Widgets.Alert.{messageBox, confirmDialog};
...

module JSON = require('http://json.org/modules/json2.js'); // web
import JSON.*;

module File = require('io/File'); // file system

import require("bar.js").y; // file system

.

.

`for-of`

, for-in

JavaScript ( ). .. , :

let arr = [ "blue", "green" ];
arr.notAnIndex = 123;
Array.prototype.protoProp = 456;

for(var x in arr) {
   console.log(x); //  blue, green, notAnIndex, protoProp
}

ECMAScript 6 for-of

, :

for(var x of arr) {
   console.log(x); //   blue, green
}

, , yield

, .

Arrow-

ECMAScript 6 arrow functions:

let squares = [ 1, 2, 3 ].map(x => x * x);

let squares = [ 1, 2, 3 ].map(function (x) { return x * x });

Arrow- . , arrow- this

. ..

let jane = {
   name: "Jane",
        
   sayHello: function (friends) {
      friends.forEach(friend => { console.log(this.name + " says hello to " + friend) });
   }
}

jane.sayHello([ 'Mark', 'John' ]);

Jane says hello to Mark
Jane says hello to John

let jane = {
   name: "Jane",
        
   sayHello: function (friends) {
      friends.forEach(function(friend) { console.log(this.name + " says hello to " + friend) });
   }
}

 says hello to Mark
 says hello to John

, this

function(friend) { ... })

this

. , , var self = this

bind

:

var jane = {
   name: "Jane",
        
   sayHello: function (friends) {
      friends.forEach(function (friend) {
         console.log(this.name + " says hello to " + friend)
       }.bind(this));
   }
}

.. arrow functions — :

(x, y) => x + y + this.z

function (x, y) { return x + y + this.z }.bind(this)

arrow- :

arrow- (new (() => {})

)
Arrow- arguments

( )

arrow- . , , typeof

instanceof

:

typeof () => {}; // 'function'
() => {} instanceof Function; // true

, ECMAScript 6. , - , , . , , , — . , TC39. (2013) .

Axel' Rauschmayer'a, CodeFest .

PS. 2GIS !

JavaScriptの次のバージョンであるECMAScript 6の概要

ブロックスコープ

Destructuring assignment

for-of (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

Arrow-

More articles:

`for-of`