Es 6常用文法まとめ

矢印関数
矢印関数は、それを囲むコードと同じthisを共有し、thisの指向性問題をうまく解決できます.経験のあるJavaScriptの開発者はvar self=thisなどをよく知っています.またはvar that=thisという外周thisを参照するパターンです.しかし、このパターンは必要ありません.

const f = v => v

上のコードは

const f = function(v) {
     
  return v
}

矢印関数のコードブロック部分が文より多い場合、大かっこでそれらをまとめ、return文で返します.

const sum = (num1, num2) => {
      return num1 + num2 }

大かっこはコードブロックとして解釈されるので、矢印関数が直接オブジェクトに戻る場合は、対象外に括弧を加えなければなりません.

const getTempItem = id => ({
      id: id, name: "Temp" })

使用上の注意点

関数内のthisオブジェクトは、使用時のオブジェクトではなく、定義時のオブジェクトです.

は構造関数として使用できません.つまり、newコマンドを使用してはいけません.そうでないと、エラーが発生します.

は、関数内に存在しないアーグメンントオブジェクトを使用してはいけません.使うなら、Restパラメータで代替できます.

拡張演算子
1.分配値

let {
     x,y,...z} = {
     x:1,y:2,a:3,b:4};
  x //1
  y //2
  z //{a:3,b:4}
  
let a = {
      ...'hello', ...'wa'}
a = {
      0: w, 1: a, 2: l, 3: l, 4: o }

let b = {
      ...'javascript', ...'javd', ...[1, 2, 3] }
b = {
      0: 1, 1: 2, 2: 3, 4: d, 4: s, 5: c, 6: r, 7: i, 8: p: 9: t }

2.拡張演算子

let z = {
     a:1,b:2};
let n = {
     ...z};
n // {a:1, b:2}

これはObject.assignの使用に相当します.

let aClone = {
     ...a};
//   
let aClone = Object.assign({
     },a)

拡張演算子のパラメータがnullまたはundefinedの場合、この2つの値は無視され、エラーが発生しません.

let obj = {
     ...null,...undefined}; //   

テンプレート文字列

テンプレート文字列を使用しない

const name = 'Your name is ' + first + ' ' + last + '.'

テンプレート文字列

を使用する.

const name = `Your name is ${
       first} ${
       last}.`

モジュール化(Module)
ES 5は原生のモジュール化に対応しておらず、ES 6ではモジュールが重要な構成部分として追加されています.モジュール機能は主に二つのコマンドで構成されています.

exportコマンドは、モジュールを規定する対外インターフェース

に使用される.

importコマンドは、他のモジュールが提供する機能を導入するために使用されます.

エクスポート(export)

導出変数

export const name = 'Rainbow'

導出関数

export function myFunction(arg) {
     
	return arg
}

モジュールの出力を定義して導入すれば、別のモジュールでimportで参照できます.

import {
     myModule} from 'myModule';// main.js
import {
     name,age} from 'test';// test.js

プロミス

promise            

はes 6を使わない

です.

setTimeout(function()
{
     
    console.log('Hello'); // 1    "Hello"
    setTimeout(function()
    {
     
        console.log('Hi'); // 2    "Hi"
    }, 1000);
}, 1000);

S 6

を使用します.

var waitSecond = new Promise(function(resolve, reject)
{
     
    setTimeout(resolve, 1000);
});

waitSecond
    .then(function()
    {
     
      console.log("Hello"); // 1    "Hello"
      return waitSecond;
    })
    .then(function()
    {
     
        console.log("Hi"); // 2    "Hi"
    });

letとconstコマンド
letとvarの違い

var a = [];
for (var i = 0; i < 10; i++) {
     
  a[i] = function () {
     
    console.log(i);
  };
}
a[6](); // 10

上のコードでは変数iはvarで宣言されていますが、全体の範囲で有効ですので、大域的には変数iしかありません.循環ごとに変数iの値が変わりますが、循環内に配列aに割り当てられたfunctionが動作しているときに、この同じ変数iをクローズドで読みます.最後に出力されるのは最後のラウンドのiの値、つまり10です.
また、letを使用すると、宣言された変数はブロックレベルの作用領域でのみ有効であり、最後に出力されるのは6である.

var a = [];
for (let i = 0; i < 10; i++) {
     
  a[i] = function () {
     
    console.log(i);
  };
}
a[6](); // 6

上記のコードの中で、変数iはletで宣言されています.現在のiはサイクルのみで有効ですので、サイクル毎のiは実は新しい変数なので、最後に出力されるのは6です.
変数アップグレードvarコマンドが存在しないと発生します.変数は声明の前に使用できます.値はundefinedです.このような現象は多かれ少なかれおかしいです.一般的な論理に従って、変数はステートメントの後に使用するべきです.
この現象を訂正するために、letコマンドは文法的な行動を変えました.宣言された変数は必ず声明の後で使います.

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

// let    
console.log(bar); //   ReferenceError
let bar = 2;

letとconstで定義される変数は、ブロックレベルのスコープです.

{
     
  let a = 10;
}

console.log(a); //-1 or Error“ReferenceError: a is not defined”