ES 6ノート

ES 6の機能は本当にとても強くて、それに対してもっと良い学習の体得の過程があるため、それを漸進的なノートにしたいと思って、便利にいっしょに学習を交流します.
変数、定数
ES 5ではvarを使用しています  変数を宣言しますが、新しいES 6には定数の宣言が追加されています.letとconstを使用して変数と定数を宣言します.

var a = 1;   //ES5
let b = 2;   //ES6   
const c = 3;  //ES6   

ここでは,2つの名詞変数の昇格と一時的なデッドゾーンに注意する.
変数昇格はES 5の奇妙な特性であり、宣言されていない変数は使用時に「undefined」に割り当てられる.

// var    
console.log(foo); //   undefined
var foo = 2;

一時的なデッドゾーンはES 6落札で注意しなければならない点です.ブロックレベルの役割ドメイン内にlet(const)コマンドが存在する限り、宣言された変数(定数)はこの領域を「バインド」し、let(const)宣言を使用する前に変数は使用できません.そうしないと、エラーが発生します.

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

アクティブドメイン
ES 5ではグローバル役割ドメインと関数役割ドメインしかありません.これにより、カウントに使用される循環変数がグローバル変数に漏洩するなど、多くの不合理な状況が発生します.

var s = 'hello';

for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}

console.log(i); // 5

 
ES 6でブロック・ドメインを使用すると、変数の漏洩をより回避でき、従来のES 5で使用されていた即時実行関数は不要になります.
 

//       
(function () {
  var tmp = ...;
  ...
}());

//        
{
  let tmp = ...;
  ...
}

矢印関数
さらにES 6に矢印関数を追加し、基本的な使い方を定義します.

//ES5
function full () {
  var a = 1;
  ......
}
//ES6
const full = () => { let a = 1;}

匿名関数は、次のように書くこともできます.

() => {}

パラメータが「()」を1つだけ省略でき、関数内式の値が戻り値の場合は「{}」を省略できます.以下のようになります.

//ES5
function full (v) {
  return v + 1;
}
//ES6
const full = v => v + 1;

既定のパラメータ
ES 6には関数のデフォルトパラメータ設定が追加され、パラメータ検出に便利になりました.基本的な設定は以下の通りです.

//ES5          
function log(x, y) {
  y = y || 'World';
  console.log(x, y);
}
log('Hello')   // Hello World

//ES6
function log(x, y = 'World') {
  console.log(x, y);
}
log("Hello")   // Hello World 

また、この機能を使用して、必須パラメータの検出を行うこともできます.

//ES6  
function required () {  
  return new Error("x is required !");  
}  
function log(x = required(), y = 'World') {  
  console.log(x, y);  
}  
log()   // x is required ! 

 

解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

let [a, b, c] = [1, 2, 3];
a  // 1
b  // 2
c  // 3

本質的に、この書き方は「パターンマッチング」に属し、等号の両側のパターンが同じであれば、左側の変数に対応する値が与えられる.次の例を示します.

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

ES 6は強力な新しい特性と機能を持っており、以上は氷山の一角にすぎないが、学習の過程の順序が漸進的で、実際の使用の中で学習するのは精髄を把握しやすい.