JS ES6のポイントまとめ

JS(Java Script)は、正式名称：ECMA Script。そのバージョン６：ES6 のポイントをまとめました。

const 定数

別の値を再代入できない。ただし、代入した配列やオブジェクトの中身は変更可能。

const MY_ARRAY = [10, 20, 30];
  MY_ARRAY[0] = 50;           // ok
  MY_ARRAY = [100, 200, 300]  // NG

const OBJ = { x:10 };
  OBJ.x = 100;        // ok
  OBJ = { y:200 };    // NG

定数なのに変更可能なのは、気持ち悪い。数や文字列の代入に使おうかな。

{ブロックスコープ}と let

即時関数が不要に

(function (){
  var x=1; // 即時関数内に変数スコープ限定
}());

変数のスコープが{let x=1;}内に限定されるから。

let 宣言の重複不可

let x=1;
let x=2; // 宣言の重複エラー

連想配列 Map

オブジェクトと異なり

キーに文字列以外も利用可能。オブジェクトや関数などもok
デフォルトプロパティ無し

let m = new Map();
m.set('js','Java Script'); // データ格納
m.get('js'); 　　　　　　　// データ取得
m.size;                    // データ個数を取得

let n = new Map([
 ['js','Java Script'],
 ['json','JavaScript Object Notation']
]);

データの重複なし Set

let s = new Set();
s.add('js');
s.add('js'); // 重複データなので無視される
s.has('js'); // true

forループがシンプル表記に for of

上記 Map を代入した変数 n を for ループ

for(let d of n){
  console.log(d);
}
// 実行結果
 ['js','Java Script']
 ['json','JavaScript Object Notation']

分割代入

let [x, y, z] = ['赤', '白', '黄'];
console.log(y); // 白

`...` は、演算子

let [a, b, c, ...other] = [1, 2, 3, 4, 5, 6, 7];
console.log(other); // [4,5,6,7]

変数の入れ替え

let a = 'apple',
    b = 'melon';
[b, a] = [a, b];
console.log(a); // melon

引数のデフォルト値

function abc(a=1,b=2){}

可変長引数 ...

function sum(...args){
  let result = 0;
  for(let arg of args){
    result += arg;
  }
  return result;
}
sum(1,2,3); // 6

名前付き引数：引数を{}で囲む

function dialog({
  content,
  height,
  width,
  modeless,
  resizable }){}
dialog({content:'ダイアログ', height:300, width:200, modeless:true, resizable:false})

わかりやすいが、面倒くさい。。

アロー関数：( 引数, )=>{ 本体 }

不記載：function, return
() や {} は、省略可能な場合あり。v => alert( v );
引数なしは、()必須。()=> alert( 'ok' );

startsWith, endsWith, includes

console.log( 'abc'.startsWith( 'a' ) ); // true
console.log( 'abc'.endsWith( 'a' ) );   // false
console.log( 'abc'.includes( 'b' ) );   // true

テンプレート文字列：`${}`

`（バッククォート：shift + ＠キー）

let a='hello', b='world';
console.log( `${a} ${b}.
こんにちは、世界。${1+1}` );

// 結果。変数や式は評価。空白や改行も表示通りに反映
hello world.
こんにちは、世界。2

モジュールのインポート

一般的なオブジェクト指向の import と同じ

// * 全クラス, as 別名
import * as Car from '../carbland';

// carbland.js の中身
export class Toyota {} // 外部利用ok
class Nissan {}        // import 不可

Car.Toyota // インポート先での利用法

デフォルト：1ファイルに1クラスか、1関数のみ

export default class {}
import Abc from './something';
let xyz = new Abc();

Promise 非同期処理

複数の非同期処理を同時実行。総ての処理が完了時、後続処理を実行。といったコードを簡潔に書ける。が、長くなるので略。