ES6

for文

for...of

配列などを順に処理する際に使用する。
ES5のforループも同じ役割です。

const iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

// 同様
for (let i = 0; i < iterable.lengh; i++) {
  console.log(iterable[i]);
}

for...in

連想配列（オブジェクト）からプロパティを取り出す際に使用する。

const information = {
  name: 'taro',
  age: 20,
  sex: 'female'
}

for(const item in information){
  console.log(item);
}
// name
// age
// sex

配列操作のメソッド

forEach

配列の要素に対して、処理をしたい時に実行する。
処理を実行するだけなので、返値はない。
forEachは万能なので、他に適した配列メソッドがない時に使用すると良い。

array.forEach(element => console.log(element));

map

配列の要素に対して、処理を行い、新しい配列を返す。
returnを忘れずに。
使い所は、連想配列のソートをし、新しい配列を作るなど。

const doubled = array.map(element => element * 2)

filter

配列の要素に対して、条件に一致する要素を絞り込み、新しい配列を返す。

const newArray = array.filter(element => element.type === 'new')

find

配列の要素に対して、条件に一致する最初の要素を返します。

const found = array.find(element => element > 10);

every

配列の要素に対して、条件を用意し、真偽値の論理積を返します。
テストにすべてが合格するかの確認ができます。

let flag = array.every(element => element.age >= 20);

some

配列の要素に対して、条件を用意し、真偽値の論理和を返します。
テストに少なくとも一つが合格するかの確認ができます。

let flag = array.some(element => element.age >= 20);

reduce

配列の要素に対して、処理を行います。
返値はコールバック関数の計算結果であり、次の要素に渡します。

array.reduce((previousValue, currentValue, index, array) => {
  return previousValue + currentValue;
}, initialValue);

アロー関数

使い方

1. functionを削除し、引数と本体の開始中括弧の間に矢印を記述
2. 本体の中括弧を削除し、 returnを削除
3. 引数が一つの場合、引数の括弧を削除

// 従来の関数
function (a){
  return a + 100;
}

// アロー関数
a => a + 100;

通常の関数との違い

アロー関数は自身のthisを持ちません。アロー関数は、定義されているコンテキストの thisをキャプチャして関数内で使用をします。呼び出し元に関係なく、関数が定義された段階で、thisを確定しています。
レキシカルなthisであり、アロー関数を書く場所によって、構文的にthisが決定されます。

const obj = { 
  i: ['taro', 'hanako'],
  b: () => console.log(this.i),
  c: function() {
    console.log(this.i);
  }
}

obj.b(); // undefined
obj.c(); // ['taro', 'hanako']

objectリテラル式を返す場合

処理式を、丸括弧()で記述する事で、returnを省略できます。

const Html = ({ props }) => (
  <div>
    {props}
  </div>
);

演算子

Rest演算子

関数内で引数に記述すると、可変調の値を渡して、配列として使用できる。
配列にまとめるイメージ。

function add(...numbers) {
  return numbers.reduce((sum, number) => {
    return sum + number;
  })
}

add(1, 2, 3); // 6

Spread演算子

反対にまとまっているものを広げるイメージ。
配列の中身を展開します。

const colors1 = ['赤', '青'];
const colors2 = ['イエロー', 'グリーン'];

const unionColors = [...colors1, ...colors2]; // ['赤', '青', 'イエロー', 'グリーン']

オブジェクトリテラル

リテラルは文字列や数字などの値のことを指します。
オブジェクトリテラルは、オブジェクトの値というニュアンスです。

使い方

・プロパティのkeyと値が同じ場合、省略できる
・メソッドに対して、:とfunctionを省略できる

// 通常のコード
function adjustProduct(products) {
  return {
    products: products,
    totalPrice: function() {
      return this.products.reduce((sum, product) => sum + product.price, 0)
    },
    priceForName: function(target) {
      return this.products.find(product => target === product.name).price;
    }
  }
}

//　オブジェクトリテラルを使って、リファクタ
function adjustProduct(products) {
  return {
    //　プロパティのkeyと値が同じなので、省略
    products,
    //メソッドの`:`と`function`を省略
    totalPrice() {
      return this.products.reduce((sum, product) => sum + product.price, 0)
    },
    priceForName(target) {
      return this.products.find(product => target === product.name).price;
    }
  }
}

const products = [
  {name: 'banana', price: 500},
  {name: 'orange', price: 200}
]

const result = adjustProduct(products);

分割代入

オブジェクトにあるプロパティを抽出

const products = {
  name: 'banana',
  price: 500
}

// オブジェクの場合は中括弧`{…} `
const { name,  price} = products;

// リファクタ前のコード
const name = products.name;
const price = products.price;

中括弧{…} は、オブジェクトのプロパティを抽出する。

配列の要素を抽出

const fruit = ['banana', 'apple', 'orange'];

// 配列の場合は、大括弧`[…]`
const [ item1,  item2] = fruit;

item1; // 'banana'
item2; // 'apple'

大括弧[…]は、配列の要素を抽出する。

Promise

Promiseオブジェクトは、非同期処理の完了 (もしくは失敗) の結果およびその結果の値を表します。
引数はresolveとrejectを持つ。

状態がfulfilled

thenメソッドが呼ばれ、中の処理を実行する。

let promise = new Promise((resolve) => {
  resolve();
}).then(() => {
  console.log('処理が完了しました')
})

状態がreject

catchメソッドが呼ばれ、中の処理を実行する。

let promise = new Promise((reject) => {
  resolve();
}).then(() => {
  console.log('処理が失敗しました')
})

Promiseチェーン

Promiseに登録されているthenが全て、実行される。

Promise.resolve(123)
    .then((res) => {
        console.log(res); // 123
        return 456;
    })
    .then((res) => {
        console.log(res); // 456
    })

fetch

ネットワークからリソースを取得するプロセスを開始し、レスポンスが利用できるようになったらfulfilledプロミスを返します。
外部ライブラリをインストールしなくても、promiseを使えます。

const url= 'https://hogehoge';
fetch(url)
  .then(response => console.log(response))
  .catch(error => console.log(error));

ネットワークのリクエストが失敗した時のみ、catchが実行される。

ES8の文法になりますが以下追記

Async/await

Async

Asyncを使って宣言された関数は、Promiseを返します。

Await

Promiseを返却する関数の非同期処理が完了するまで待つ。
Awaitで受けれるのは、Promiseのインスタンスです。

function sleep(val) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(val++);
      resolve(val);
    }, 1000);
  })
}

async function init() {
  let val = await sleep(0);
  console.log(val); // '1'
}

init();