जावास्क्रिप्ट के अगले संस्करण ECMAScript 6 का अवलोकन

शुरुआत, शैक्षिक कार्यक्रम और कुछ तथ्यों के लिए:

• ECMAScript आधिकारिक जावास्क्रिप्ट भाषा मानक है (जावास्क्रिप्ट शब्द का उपयोग नहीं किया जा सकता क्योंकि जावा शब्द सन का ट्रेडमार्क था) जावास्क्रिप्ट ECMAScript मानक का कार्यान्वयन है।
• TC39 एक समिति है जो ECMAScript मानक विकसित करती है और इसमें विशेषताओं को शामिल करने का निर्णय लेती है।
• ECMAScript मानक कई हैं। उनमें से सबसे लोकप्रिय ECMA-262 है।
• ECMAScript 5 ECMA-262 मानक (2009 में अनुमोदित) का नवीनतम संस्करण है।
• ECMA-262 मानक के पिछले संस्करण थे (मैं बहुत पुराने लोगों का उल्लेख नहीं करता):
  
  • ECMAScript 3 - अधिकांश ब्राउज़रों द्वारा समर्थित (1999 में अनुमोदित)।
  • ECMAScript 4 - मानक में बहुत अधिक क्रांतिकारी बदलावों पर ध्यान नहीं दिया गया। बाद में जुलाई 2008 में, एक स्ट्रिप-डाउन संस्करण (लेकिन अभी भी ECMAScript 3 की तुलना में बहुत समृद्ध) में, इसके परिणामस्वरूप एक नया ECMAScript हार्मनी प्रोजेक्ट बना।
  
  
• ECMAScript 6 (कोडनाम ECMAScript.next) को 2013 के अंत से पहले अनुमोदित किया जाना चाहिए।

तो, जावास्क्रिप्ट के नए संस्करण में हमें क्या इंतजार है?

ब्लॉक स्कोप

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 !