Ecma6 の新機能
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
Ecma6 はいろいろありすぎて なにがあったっけ? と思うことがあるので使ってみたのを中心にリストにしていこうと思います
全部コンプリートできるかはわからないです
全部コンプリートできるかはわからないです
Arrow Function
=> で無名関数が作れる機能こういうの
[1,2,3].map(e=>e*2) // [2, 4, 6]
書くのがすごく楽になるけど 複雑になってくると function よりわかりづらいかもしれないthis と arguments の扱いが function リテラルで作った無名関数と違うので 使い分けをしないとダメ
詳しくはこっちを
Chromeでアロー関数とPromiseが使えた
``
テンプレートストリング だったっけ?ヒアドキュメントみたいなの
改行入れたりそのまま文字列にしたいときに使える
でも
${} で式を評価できるので変数展開できる
\n は改行になる
など全くそのままということじゃない
くわしくはこっち
JavaScriptのヒアドキュメント
関数の後に `` をリテラルで書くと関数が特別な形で実行される
String.raw `\n` だと \n のまま維持される
テンプレートストリングで関数実行 を参照
Promise
非同期処理を便利にしてくれる機能まだ軽くしか使ってない
ここで軽く触れてる
Chromeでアロー関数とPromiseが使えた
Arrayメソッド
fill, copyWithin, keys, entries, findイテレータを返す関数などが増えた
くわしくは
配列のメソッドが増えてた
toArray な関数もできてた
Array.from と Array.of なんてのがあった
for of
イテレータに対してこんな使い方for(var x of [1,2,3].keys()){
console.log(x)
}
// 0 1 2
for in だとこれはできないfor in のように
for(var x of [1,2,3]){
console.log(x)
}
// 1 2 3
もできるでも オブジェクトでやるとエラー
for(var x of {a:1}){
console.log(x)
}
// Uncaught TypeError: undefined is not a function(…)
map, set, weakmap, weakset
まだ使ったことないです名前からして map はオブジェクトみたいな キー・バリューでデータを保存するもの
オブジェクトと違って好きな型をキーにできる
set は集合なので同じ値を2つ入れられない配列みたいなもの
だけど 配列と違って順番はなし
だと思う
使い方は違うと思うけど 前に map や set が欲しくて自分で作った経験から 仕組み的に複雑なものじゃないはず
weak の方は同じデータ という判定がゆるい == なのかなと思ってるけど これまでの JavaScript で書き換えできないらしいと聞いたので もっと別なものかもしれない
spread operator
var args = [...arguments].slice(1)
arr = [...arr, ...args]
fn(...arr)
こういうの配列を展開できる
関数の引数を書くところでもできる
可変引数に apply を書かなくて済むようになる
詳しくはこっち
Chrome46 で spread operator が使える!
...引数
引数受け取りでfunction fn(head, ...tail){}
こういうことができるtail に入る値は [...arguments].slice(1) これと一緒
配列展開と同じく 「...」
ここで軽く触れてる
Chrome46 で spread operator が使える!
Generator
yield 使うイテレータ用の関数だった気がするかなり昔に見た記憶を頼りにテキトーに書いたらなんか動いた
function* a(){
yield 1
yield 2
yield 10
}
for(var x of a()){
console.log(x)
}
// 1 2 10
最初は for of に a を直接渡してエラーでたり 無限ループしないかと for of 文に10回で break するようなコード書いてたりしたけどねyield まで実行して値を返して 次はその続きから実行されるよう
yield がなくなるとそこでおしまい
もっと詳しく
yield 使ってみる
分割代入
[a,b] = [1,2]
みたいな 他の言語で見かける書き方で複数の変数にまとめて代入できるようになるやつだったと思うChorme だとまだ未実装みたい
const
「定数」だけど 他の言語にあるような定数や一部の型のリテラルだけという制限はなし式で初期化できるから変数使えるし関数を定数化することもできる
var と基本同じで 上書きしても値が変わらないだけと考えてよさそう
定数というよりイミュータブル変数みたい
PHP などの定数と違って 変更するつもりがない変数は var じゃなくて const にすればよさそう
ただ const って言う名前がそう気軽に使うイメージじゃないので scala みたいに val がよかった
val を変数名に使ってるコードがすごく多そうで予約語に変更するのは難しいからこうなったのかな
let
ブロックスコープを作る var基本的に var で困ってないけど let 使うのが推奨されていきそうな気がする
var と違ってスコープの一番上で undefined 初期化はされないので temporary dead space という変数にアクセス出来ない空間ができる
定義する行までは上のスコープを見て欲しいけどできないみたい
もう少し詳しくはコッチ
temporary dead zone というのがあるらしい
デフォルト引数
function fn(a = 1){}
こういうの1 のところに 関数の実行も書けるらしい
JavaScriptのこの自由さが好き
クラス
クラスは敵ですということで知らないです
クラスライクな構文ができるらしい ということくらい
Proxy
新しいオブジェクトを作る機能作られるオブジェクトには Object.create みたいにいろいろなオプションを設定できる
require
Node.js の require みたいなことができるようになるんだと思ってるけど詳しくはわかってないオブジェクトリテラルの省略形
var obj = {
a:a,
b:b,
c:c
}
これを
var obj = {a,b,c}
と省略して書けるちょっと楽になる
キーに式が使える
var k = "key"
var obj = {
[k + "1"]: "value"
}
// Object {key: "value"}
こんなのちょっと便利
Reflect
Proxy 関係らしいProxy のハンドラのメソッドがある
get とか apply とかあえてコレを通す必要はあるのかよくわからない
まだ増えるかも?