JavaScriptES 6構文のまとめ

-
ES 6文法まとめ
機能の整理
コールバック関数:

  //ES6
  array.forEach(v = > console.log(v));

親構築メソッドの書き換え(機能多重化):

//           
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...'

配列の自動解析:

var [x,y]=getVal(),//        
 [name,,age]=['wayou','male','secrect'];//    

function getVal() {
 return [ 1, 2 ];
}

console.log('x:'+x+', y:'+y);//  ：x:1, y:2 
console.log('name:'+name+', age:'+age);//  ： name:wayou, age:secrect

パラメータ値:

1.既定のパラメータ

 function sayHello(name){
   //            
   var name=name||'dude';
   console.log('Hello '+name);
}
//  ES6     
function sayHello2(name='dude'){
  console.log(`Hello ${name}`);
}
sayHello();//  ：Hello dude
sayHello('Wayou');//  ：Hello Wayou
sayHello2();//  ：Hello dude
sayHello2('Wayou');//  ：Hello Wayou

2.不定パラメータ

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

3.拡張パラメータ

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         ，      ，
ES6     for of      ，
                   。

iterator, generator:

           ，        。        。
iterator:        ，    next  ，          {done,value}，          ，       done       value
iterable:         ，    obj[@@iterator]  ，        iterator
generator:        iterator。  next                        （generator function）。generator      throw  
generator   :  generator     。        yield   。 yield         generator next throw        。generator      function*    
yield    ：          ，              

モジュール:ES 6規格では、JavaScriptオリジナルがmoduleをサポートしています

// 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:

          ，                ，        hasOwnProperty                       。  ，                get，set   。
// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
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               ，                  。                    ，              
eg:
//          
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 ，            ，                  ，       。

Symbols:

 Symbol           ，         symbol       

Math,Number,String,Objectの新しいAPI:

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false

Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2

"abcde".contains("cd") // true
"abc".repeat(3) // "abcabcabc"

Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1,2,3].findIndex(x => x == 2) // 1
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"

Object.assign(Point, { origin: new Point(0,0) })

Promises:

             ，            ，  jQuery deferred   。          ，    .when(), .done()        ，       promise  。