Promise.prototype.finallyが実装された - JS.next
概要 プロミスの成功・失敗に関わらず継続して処理を行うためのPromise.prototype.finallyメソッドが実装された 参考記事 Promiseについて - JS.next イメージ 従来、処理が成功しても失敗しても最後に行いたい処理を記述するためには、thenメソッドの２つの引数両方に指定するなどするしかなかった。 showMessage( '読込中……' ) fetchData( 'hoge' ) .then( data => showData( data ) ) .catch( ( ) => showData( null ) ) .then( ( ) => showMessage( '読込完了！' ), ( ) => showMessage( '読込完了！' ) ) それがfinallyメソッドを使うとこう書ける。 showMessage( '読込中……' ) fetch
async関数が実装された - JS.next
概要 非同期な処理を同期的に書ける関数タイプが実装された。 基本 「async」キーワードに続けて関数定義を書くと、async関数となる。 async function afn1() { } afn2 = async () => { } obj = { async afn3() { } } async関数を呼び出すとプロミスが返される。 console.log( afn1() ) // <Promise> このプロミスは、async関数が終了するとその返り値で解決され、例外が起こると棄却される。 async function afn4( flag ) { if ( flag ) return 'Yes' else throw 'No' } afn4( true ).then( v => console.log( v ) ) /// "Yes" afn4( false ).catch( v
String.prototype.pad{Start,End}が実装された - JS.next
概要 対象の文字列の先頭や終わりに、指定した長さになるように、指定した文字列を繰り返して埋めるメソッドが実装された。 例 第一引数に期待する文字列の長さ、第二引数に埋める文字列を指定する（未指定時はスペースが使われる）。 num = 123 ;(''+num).padStart(5, 0) // "00123" str = 'abc' str.padEnd(20, '｡・ﾟ・') // "abc｡・ﾟ・｡・ﾟ・｡・ﾟ・｡・ﾟ・｡" 実装されるバージョン V8 5.1.217
べき乗演算子が実装された - JS.next
概要 Math.pow関数の代わりに新しい演算子「 ** 」でべき乗の演算ができるようになった。 例 これが n = Math.pow(3, 2) console.log(n) // 9 n = Math.pow(n, 2) console.log(n) // 81 こう書ける n = 3 ** 2 console.log(n) // 9 n **= 2 console.log(n) // 81 問題 これはどうなるだろうか？ console.log( - 3 ** 2 ) 答えは『 SyntaxError 』である。 「 - 3 ** 2 」は「 (- 3) ** 2 」と「 - (3 ** 2) 」のどちらで評価されるか予想しづらい。 それは他の単項演算子についても言えるので、べき乗演算子の左辺に単項演算子が用いられた式を置くことは禁止されている。 そのため、左辺に単項マイナス演算子を
末尾呼び出し最適化が実装された - JS.next
概要 ある関数Aから別の関数Bを呼び出すとき、処理系は後で戻って来れるように一旦Aの状態を保存し、関数Bの処理に入る。 これが問題になるのは再帰の時で、数万回程度の再帰でスタックが一杯になり、エラーとなってしまう。 しかし、もし関数B呼び出しの際に、関数Aに戻ってきて処理を続ける必要のない形で呼びだされていれば、 状態の保存を省略して関数Bに移行する最適化が可能であり、ES2015でその詳細が定義されることとなった。 例 具体的には、strictモードの関数で、「 return fn() 」という形での呼び出しについて最適化が有効になる。 最適化が効く例： function fn( n ) { 'use strict' if ( n <= 0 ) { return 'done!' } return fn( n - 1 ) // この関数がする処理はこれ以上ない } fn( 1e6 ) //
Object.{values,entries}が実装された - JS.next
概要 オブジェクトの全ての列挙可能なプロパティの文字列キーの配列を返すObject.keys関数に似た、 値の配列を返すObject.valuesと、キーと値のペアの配列を返すObject.entries関数が実装された。 例 let obj = { a: 1, b: 2, c: 3 } console.log( Object.keys( obj ) ) // [ "a", "b", "c" ] console.log( Object.values( obj ) ) // [ 1, 2, 3 ] console.log( Object.entries( obj ) ) // [ ["a", 1], ["b", 2], ["c", 3] ] 実装されるバージョン V8 4.10.36
デフォルト引数が実装された - JS.next
概要 引数が渡されなかった際のデフォルト値の設定が可能になった。 例 こう書くと function fn( arg = 'default' ) { return arg } これと同じ効果になる。 function fn( arg ) { if ( arg === undefined ) arg = 'default' return arg } また、引数を指定しなかった場合のみならず、undefinedを渡した時にもデフォルト値になる。 fn('hoge') // "hoge" fn() // "default" fn(undefined) // "default" そしてデフォルト値を設定した引数以降はfn.lengthでカウントされない。 var fn = (a, b, c = 0, d, e) => {} fn.length // 2 応用：分割代入との組み合わせ メッセージを一定
分割代入が実装された - JS.next
概要 分割代入を用いると、複数の代入を１つにまとめることが出来る。 配列リテラル調 基本 var a = 1, b = 2, c = 3 // ↓ var [a, b, c] = [1, 2, 3] var b = ary[1] // ↓ var [, b] = ary var a = (ary[0] !== undefined) ? ary[0] : 5 // ↓ var [a = 5] = ary // ※未実装 配列の最初の要素を取り出す val = ary[0] // ↓ [val] = ary 変数の交換 temp = a a = b b = temp [a, b] = [b, a] 関数から複数の値を返す function getTime() { var date = new Date return [date.getHours(), date.getMinutes()] }
Array.{of, from}が実装された - JS.next
概要 配列を作る２つのArrayのスタティックメソッドが実装された。 Array.from(arrayLike, mapfn?, thisArg?) 配列のようなものから配列を作る便利なメソッド。 例 DOMに配列のメソッドを適応したい時、 今までは [].slice.call(document.getElementsByTagNames('p')).map(mapfn, thisArg) これがこう書ける Array.from(document.getElementsByTagNames('p'), mapfn, thisArg) 外部参考リンク Firefox 32 で Array.from が実装された - hogehoge @teramako Array.of(...items) 引数から配列を作るメソッド。 例 Array.of(1) // [1] Array.of(1, 2,
Class構文について - JS.next
概要 待ち焦がれた人も多いことだろう。ES2015の一番の目玉機能とも言えるクラス構文が、ついにV8でサポートされた。 Class構文は、『関数（コンストラクタ）定義』＋『.prototypeへのメソッド定義』の糖衣構文である。 JSで今まで様々に工夫されてきたクラスの書き方を、綺麗に統一してくれる可能性を秘めている。 クラスを作る 従来、Catクラスを作ろうとした場合このように書いてきた。 function Cat(name) { this.name = name } Cat.prototype.meow = function () { alert( this.name + 'はミャオと鳴きました' ) } しかしこの書き方だとどうしても、コンストラクタとメソッドの定義が分離されているため、クラスとしてまとまりがなく分かりづらく感じる。 メソッドが増えてきた時も、Cat.prototyp
@@toStringTagが実装された - JS.next
概要 例えば『Object.prototype.toString.call([])』と呼ぶと、『"[object Array]"』と帰ってくるが、 その「Array」の部分をどういう表記にするか設定できるビルトインシンボルが実装された。 例 function Cat() { } var cat = new Cat console.log( '' + cat ) // "[object Object]" Cat.prototype[Symbol.toStringTag] = 'Cat' console.log( '' + cat ) // "[object Cat]" 一部のビルドインコンストラクタには@@toStringTagが定義されている。 console.log( Map.prototype[Symbol.toStringTag] ) // "Map" 実装されるバージョン V8 3
アロー関数が実装された - JS.next
概要 ES2015を象徴する機能である、アロー関数構文の実装がついにV8で始まった。 無名関数を短く書ける [3.28.31] アロー関数は無名関数の省略記法である。 今までこう書いていたのが、 var fn = function (a, b) { } こうスッキリ書ける。 var fn = (a, b) => { } 「=>」が矢のように見えることから「アロー」関数と言う。 更に短くできる これが、 [1, 2, 3].map( function (v) { return v * v } ) // [1, 4, 9] アロー関数だとこうなるが、 [1, 2, 3].map( (v) => { return v * v } ) // [1, 4, 9] 引数が一つの時には「()」を省略できるので、こう書ける。 [1, 2, 3].map( v => { return v * v } )
イテレータについて - JS.next
概要 V8でES2015のイテレーション周りの実装が進んできたので、解説してみようと思う。 イテレーションとは ここではデータの要素を繰り返して取り出すこと。 例えば配列のforEachメソッドは、要素やインデックスをイテレートするイテレータである。 ただしこれらは（内部的に）繰り返しまで行うイテレータ（内部イテレータ）だが、ES2015では外部イテレーションのための仕組みが入った。 イテレータオブジェクト イテレータオブジェクトは『次の要素』を返すメソッドを備えているオブジェクトである。 つまりイテレーションの『次の要素を取り出す』ことだけを担い、それを繰り返すことは外で行われる（外部イテレータ）。 例 Array.prototype.values()は配列の要素を順番に列挙するイテレータオブジェクトを返す。 var ary = [5, 4, 3] var iter = ary.valu
Map、Setが正しく実装された - JS.next
概要 今までV8ではMap、Setコンストラクタの引数付きの呼び出しが正しく実装されていなかったが、この度正しく実装された。 引数にイテラブル（＝@@iteratorメソッドを持つ）オブジェクトを渡すことで、それを元に初期化させることができる。 例 let iterable = [3, 2, 1, 2, 3] let set = new Set(iterable) set.forEach(function (val) { console.log(val) }) /*log 3 2 1 */ let iterable = [ ['a', 1], ['b', 2], ['c', 3] ] let map = new Map(iterable) map.forEach(function (val, key) { console.log(key, val) }) /*log "a" 1 "b" 2
型付配列に配列と同じメソッドが実装された - JS.next
概要 ES5までは型付配列で配列のようなメソッドを使うことが出来ず、度々不便なこともあったが、 ES2015から多くの配列と同じメソッドが使えるようになった。 実装されるメソッド %TypedArray%. of [3.31.3] from [4.5.6] %TypedArray%.prototype. indexOf [4.5.7] lastIndexOf [4.5.7] sort [4.5.7] reverse [4.5.7] slice [4.5.47] join [4.5.33] toString [4.5.33] toLocaleString [4.5.33] every [4.4.58] some [4.5.10] filter [4.5.10] forEach [3.30.12] map [4.
for文でのlet変数が毎ループ新スコープを持つようになった - JS.next
概要 かつてはfor文初期化句で宣言された変数は、for文の直前で宣言されたように振舞っていたが、各ループでスコープを引きづらないように仕様が変更され、V8も追従した。 例 for (let i = 0; i < 5; i++) { ～～～ } これは今までは次のコードと等価だった。 { let i = 0 for (; i < 5; i++) { ～～～ } } つまりfor文中で関数を定義するとこうなっていた。 let funs = [] for (let i = 0; i < 5; i++) { funs.push(function () { return i }) } funs.map(function (fun) { return fun() }) // [5,5,5,5,5] この結果が[0,1,2,3,4]になるのが今回の変更である。 つまり一番最初のコードはこれと等価になる
ES2015では何が同値とみなされるか まとめ - JS.next
概要 ES2015で導入されるObject.isとCollectionのkeyにおいて、何が「同じ」と見なされるのかをまとめてみる。 Object.is Object.isでは、以下の２点を除き『 === 』演算子と同様に評価される。 ・NaNとNaNは同値とみなされる ・+0 と -0 は特別に区別される NaN === NaN // false Object.is(NaN, NaN) // true +0 === -0 // true Object.is(+0, -0) // false Collectionのkey MapやSetのkeyでは、以下の２点を除き『 === 』演算子と同様に評価される。 ・NaNとNaNは同値とみなされる ・-0 はコレクションに加えられる時 +0 として扱われる m = new Map m.set(NaN, 'ナン') m.set(-0, 'マイゼロ'
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
