BETA

ES6の様々な新しい書き方

投稿日:2020-01-27
最終更新:2020-01-28

最近知った、ES6の新しい書き方をまとめます。

セミコロンがいらない

セミコロンを付けなくてもちゃんと動作する。
ただし以下のような場合だけエラーが出る。

const a = 42  
["a", "b"].forEach(x => console.log(x))  

前後がつながって42["a", "b"].forEachと解釈されてしまう。

正直これに気をつければいいだけなら、セミコロンない方が楽な気がする。

letとconst

変数はlet、定数はconstで宣言する。
基本は全部constで書いて、どうしても後から変えたいという値だけletにする。

// let  
let name = 'bruno';  
console.log(name); // => bruno  


name = 'Bruno'; // 再代入  
console.log(name); // => Bruno  

let name = 'SOARFLAT'; // 再宣言するとエラー  

// const  
const NAME = 'bruno';  
console.log(NAME); // => bruno  

NAME = 'BRUNO'; // 再代入するとエラー  

アロー関数

無名関数の新しい書き方。
短く書くこともできる。

// ES5  
function (num) {  
  return num + 10  
}  

// アロー関数  
num => num + 10  

for...in と for...of

for...inは配列のインデックスやオブジェクトのプロパティ等を処理できるのに対し、for...ofは配列の値(要素)等を処理できる。

const array = [10, 20, 30, 40]  

for (let i in array) {  
  console.log(i)  
}  
// => 0  
// => 1  
// => 2  
// => 3  

for (let i of array) {  
  console.log(i)  
}  
// => 10  
// => 20  
// => 30  
// => 40  

分割代入

const person = {  
  name: 'bruno',  
  age: 21  
}  
const {name, country} = person  

console.log(name) // => bruno  
console.log(age) // => 21  

オブジェクトの書き方

const obj = {  
    // Home: Homeの略  
    Home,  
    // 名前付きメソッド  
    data() {  
      return {  
        number: 0,  
      }  
    },  
}  

テンプレートリテラル

const str = `We are the world`  

// 複数行  
const str = `We are  
the world`  

// 文字列展開  
const name = "Bruno", time = "today";  
console.log(`Hello ${name}, how are you ${time}?`)  
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

BЯunoの技術ブログ。日々学んだことを記録していくよ。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう