ES 6の新特性一覧

10629 ワード
Nick JusticeはGitHub開発者計画の一員です.ES 6言語標準が発表される前から、彼はBabelのような変換器と最新バージョンのブラウザを使って自分のプロジェクトでES 6特性を使用しています.彼はES 6の新しい特性がJavaScriptの編纂方法を大きく変えると考えています.
ES 6(ECMAScript 6)は、まもなく到来する新しいバージョンJavaScript言語の標準であり、コード・ハモニー(調和の意味で、わが国の歩みについては明らかに追いついていません.私たちはすでに中国の夢バージョンに入りました).前回の標準制定はまだ2009年に発表されたES 5です.現在ES 6の標準化作業が進められており、14年12月に正式決定版がリリースされる予定です.しかし、ほとんどの標準が完了し、各ブラウザのES 6へのサポートも実現されています.
技術の発展が早いですが、私達は勉強のペースを止めないと、新しい技術に淘汰されません.
矢印操作子
もしあなたがC〓〓またはJavaができるならば、あなたはきっとlambada表現を知っていて、ES 6の中で新たに増加する矢印の操作符=>は異なった曲があります.関数の表記を簡略化しました.オペレータの左は入力パラメータで、右は操作と戻り値Input=>outputtsです.
JSでのコールバックはよくあることを知っていますが、普通のコールバックは匿名の関数として現れます.毎回functionを書く必要があります.とても煩わしいです.矢印操作子を導入すると簡単に折り返しができます.次の例を見てください.

var array = [1,2,3];
//       
array.forEach(function(v) {
console.log(v);
});
// ES6  
array.forEach(v => console.log(v));
クラスのサポート
ES 6にはクラスへのサポートが追加され、クラスのキーワードが導入されました.JS自体は対象に向けていますが、ES 6で提供されるクラスは実際にはJSモデルのパッケージにすぎません.オリジナルのクラスのサポートを提供すると、オブジェクトの作成、継承がより直感的になり、父のメソッドの呼び出し、実用化、静的な方法やコンストラクションなどの概念がよりイメージ化されます.
以下のコードはES 6でのクラスの使用を示しています.

//     
class Animal {
// ES6      
constructor(name) {
this.name = name;
}
//     
sayName() {
console.log('My name is ' + this.name);
}
}
//     
class Programmer extends Animal {
constructor(name) {
//               
super(name);
}
program() {
console.log("I'm coding...");
}
}
//       
var animal = new Animal('dummy'),
wayou = new Programmer('wayou');
animal.sayName(); //    'My name is dummy'
wayou.sayName(); //    'My name is wayou'
wayou.program(); //    'I'm coding...'
拡張対象文字数
相手の字面の量が強くなり、書き方がより簡潔で柔軟になり、同時に相手を定義する時にできることが多くなりました.具体的な表現は:
1.対象の字面量に原型を定義することができます.
2.定義方法はfunctionキーワードを使わなくてもいいです.
3.直接親メソッドを呼び出す
これにより、対象の字面量は前述の類概念とよりよく一致し、対象に向けたJavaScriptを作成する際に、より楽になります.

//            
var human = { 
breathe() {
console.log('breathing...');
}
};
var worker = { 
__proto__: human, //          human,      human
company: 'freelancer',
work() {
console.log('working...');
}
};
human.breathe(); //    'breathing...'
//       breathe  
worker.breathe(); //    'breathing...'
文字列テンプレート
文字列テンプレートは比較的簡単で分かりやすいです.ES 6では、アンチクォーテーションマーク`を使用して文字列を作成することができます.この方法で作成された文字列には、ドル記号と括弧で包まれた変数が含まれます.C〓〓などのバックエンドの強いタイプの言語を使ったことがあるならば、この機能はよく知らないはずです.

//        
var num = Math.random();
//         console 
console.log(`your num is ${num}`);
構成を解く
自動解析配列またはオブジェクトの値.例えば、関数が複数の値を返す場合、通常はオブジェクトを返し、各値をこのオブジェクトの属性として返します.しかし、ES 6においては、この特性を利用して、直接に1つの配列に戻ることができ、その後、配列の値は自動的にその値を受信する変数に解析される.

function getVal() {
return[1,2];
}
var [x,y] = getVal(), //         
console.log('x:' + x + ', y:' + y); //   ：x:1, y:2
[name,,age] = ['wayou','male','secrect']; //     
console.log('name:' + name + ', age:' + age); //  ：name:wayou, age:secrect
パラメータのデフォルト値、パラメータ、拡張パラメータ
デフォルトのパラメータ値
今は関数を定義する時にパラメータのデフォルト値を指定できます.以前のように論理やオペレータを通して目的を達成する必要はありません.

function sayHello(name) {
//             
var name = name || 'dude';
console.log('Hello ' + name);
} 
sayHello(); //   ：Hello dude
sayHello('Wayou'); //   ：Hello Wayou
//   ES6     
function sayHello2(name = 'dude') {
console.log(`Hello${name}`);
}
sayHello2(); //   ：Hello dude
sayHello2('Wayou'); //   ：Hello Wayou
不定パラメータ
不定パラメータは、関数でネーミングパラメータを使用して不定数を同時に受信する名前のないパラメータです.これは文法飴の一種で、以前のJavaScriptコードの中で、argments変数を通じてこの目的を達成することができます.不定パラメータの書式は、3つのピリオドと、すべての不定パラメータを表す変数名です.
例えば、以下の例では、…xは、すべての着信add関数のパラメータを表している.

//           
function add(...x) {
return x.reduce((m,n) => m+n);
}
//          
console.log(add(1,2,3)); //   ：6
console.log(add(1,2,3,4,5)); //   ：15
パラメータを開拓
拡張パラメータは、別の形式のシンタックス飴であり、配列またはクラスの配列を直接関数として使用することができます.

var people = ['Wayou','John','Sherlock'];
// sayHello               ，     
function sayHello(people1, people2, people3) {
console.log(`Hello${people1}, ${people2}, ${people3}`);
}
//                    ，               
sayHello(...people); //   ：Hello Wayou,John,Sherlock
//     ，           ，         apply  
sayHello.apply(null, people); //   ：Hello Wayou,John,Sherlock
letとconstキーワード
letをvarと見なすことができますが、定義された変数は特定の範囲に限定されています.この範囲を離れると無効です.constは直感的で、定数を定義するために使用されます.すなわち、値を変更できない変数です.

for (let i=0; i<2; i++) {
console.log(i); //   : 0,1
}
console.log(i); //   ：undefined,
for of値巡回
for inサイクルは配列を巡回するために使われることを知っています.クラス配列やオブジェクト、ES 6に新しく導入されたfor ofサイクル機能は似ています.違いはサイクル毎にシーケンス番号ではなく値が提供されます.

var someArray = ["a","b","c"];
for (v of someArray) {
console.log(v); //    a,b,c
}
iterator、generator
1.iterator:next方法を持つオブジェクトです.この方法はオブジェクトに戻ります.このオブジェクトは二つの属性、一つのブールタイプのdoneと任意の値を含むvalueを含みます.
2.iterable:これはこのような対象で、obj[@iterator]の方法を持っています.この方法はiteratorに戻ります.
3.ゲナート:それは特殊なテラーです.逆next法はパラメータを受信し、その構成関数によって戻ります.generatorは同時に一つのthrow方法を持っています.
4.generator関数:つまりgeneratorの構造関数です.この関数では、yieldキーが使用できます.yieldが出現したところでは、generatorのnextまたはthrowの方法で値を外部に伝えることができます.generator関数はfunction*で宣言されています.
5.yieldキーワード:関数の実行を一時停止できます.その後、関数に進んで実行を続けます.
モジュール
ES 6規格では、JavaScript原生はmoduleをサポートしています.このJSコードを異なる機能に分割した小さい塊をモジュール化するという概念は、いくつかの三者規範において流行してきたものであり、例えば、CommonJSとAMDモードである.
異なる機能のコードをそれぞれ異なるファイルに記入し、各モジュールは共通インターフェース部分を導出し、モジュールの導入によって他のところで使用できます.

// point.js
module "point" {
export class Point {
constructor(x,y) {
public x=x;
public y=y;
}
}
}
// myapp.js
//         
module point from "/point.js";
//       ，          ，                 
import Point from "point";
var origin = new Point(0,0);
console.log(origin); 
Map，Set   WeakMap，WeakSet
これらは新しく追加されたセットタイプで、より便利に属性値を取得する方法を提供しています.以前のようにハスOwnPropertyで、ある属性がプロトタイプチェーンに属するのか、それとも現在のオブジェクトに属するのかを確認する必要はありません.また、属性値の追加と取得には専用のget、set方法があります.

// Sets 
var s = new Set();
s.add("hello").add("goodbye");
s.size === 2;
s.has("hello") === true;
// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34; 
                        ，                                    ，          。 WeakMap,WeakSet      ，                       ，        ，         ：
// Weak Maps
var wm = new WeakMap();
wm.set(s, {extra: 42});
wm.size === undefined //      
// Weak Sets
var ws = new WeakSet();
ws.add({data: 42}); //      ws                ，  ws       ，               
Proxies
Proxy               ，                  。                    ，              。
//           
var engineer = {name: 'Joe Sixpack', salary: 50};
//       
var interceptor = {set: function(receiver, property, value) {
console.log(property, 'is changed to', value);
receiver[property] = value;
}
};
//          
engineer = Proxy(engineer, interceptor);
//          
engineer.salary = 60; //      ：salary is changed to 60
上のコードにコメントを入れました.ここでさらに説明します.処理プログラムに対しては、聞き込み対象に該当するイベントが発生した後、処理プログラム内の方法が呼び出されます.上記の例ではsetの処理関数を設定しています.私たちが聞き出したオブジェクトの属性が変更されたら、setされます.この処理プログラムは呼び出されます.また、どの属性が変更されたかをパラメータで知ることができます.どのような値に変更しますか?
Symbools
私たちは対象がキーのセットであることを知っています.キーは通常文字列です.現在は文字列以外にも、smbolという値を対象としたキーを使うことができます.Symbolは基本的なタイプで、数字、文字列、ブールのように対象ではありません.Symbolは、smbol関数を呼び出すことによって生成され、この関数が返したsmbolは唯一である任意の名前パラメータを受信する.後はこの戻り値を対象とするキーが使えます.Symbolはまた、プライベート属性を作成するために使用されてもよく、外部から直接にsmbolをキーとする属性値にアクセスできません.

(function() {
//    symbol
var key = Symbol("key");
function MyClass(privateData) {
this[key] = privateData;
}
MyClass.prototype = {
doStuff: function() {
...this[key]...
}
};
})();
var c = new MyClass("hello");
c["key"] === undefined //       ，       
Math，Number，String，Object   API
 Math,Number,String  Object        API。
// Number
//      Number       
Number.EPSILON
//        
Number.isInteger(Infinity) // false
//         
Number.isNaN("NaN") // false
// Math
Math.acosh(3) // 1.762747174039086
Math.hypot(3,4) // 5
Math.imul(Math.pow(2,32)-1, Math.pow(2,32)-2) // 2
// String
"abcde".contains("cd") // true
"abc".repeat(3) // "abcabcabc"
// Array
//                       
Array.from(document.querySelectorAll('*'))
//                       
Array.of(1,2,3)
//                  ,                  
[0,0,0].fill(7,1) // [0,7,7]
//                ,           ,     -1
[1,2,3].findIndex(x => x == 2) // 1
//      Array Iterator   ，                 
["a","b","c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
//             
["a","b","c"].keys() // iterator 0, 1, 2
//        Array Iterator   ，             
["a","b","c"].values() // iterator "a", "b", "c"
// Object
Object.assign(Point, {origin: new Point(0,0)}) 
Promises
Promises            ，            ，  jQuery deferred   。          ，    .when(), .done()        ，       promise  。
//    promise
var promise = new Promise(function(resolve,reject) {
//            
if(/*     */) {
resolve("Stuff worked!");
} else {
reject(Error("It broke"));
}
});
//       
promise.then(function(result) {
// promise         
console.log(result); // "Stuff worked!"
}, function(err) {
// promise       
console.log(err); // Error: "It broke"
});
ES 6の新しい特性について、皆さんに紹介します.
AST抽象文法ツリー