JavaScriptの楽しい(?)ところの解説
Qiitaに「JavaScriptの楽しい(?)ところ」という記事を投稿したので、その内容をちょっとだけ解説してみます。
JavaScriptの奇奇怪怪な仕様については理解できている自信がないので、嘘書いているかもしれません。
配列の添え字
|
1 2 3 |
var a = ["hello", "world", "hoge"]; a[0] //->"hello" a["0"] //->"hello" |
Javascriptの配列では添え字を数値で指定しても文字で指定しても同じ値が返ってきます。
添え字の加算や文字結合などもできます。
|
1 2 3 4 |
var a = ["zero","one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve"] a[1+1] //-> "two" a["1"+"1"] //->"eleven" |
JavaScriptではオブジェクトもある意味連想配列なので、メソッドも配列の添え字として呼び出せます。
|
1 2 |
["hello", "world", "hoge"].pop() //->"hoge" ["hello", "world", "hoge"]['pop']() //->"hoge" |
不思議ですね。
valueOfメソッド
|
1 2 3 |
var a = {}; a.valueOf = function(){ alert('valueOfメッソドが呼ばれたよ！')} a + 1 //->alert実行 |
valueOfメソッドは、オブジェクトの暗黙の型変換が行われる際によびだされます。
その特性を使って、暗黙の型変換を抑制するテクニックもあるそうです。
実用的かどうかはわかりませんが……
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var obj = {} "test" + obj //-> "test[object Object]" var fnc = function(){} "test" + fnc //-> "testfunction (){}" //暗黙の型変換を抑制 Object.prototype.valueOf = function () { throw new Error('型が違ってるよ！'); }; "test" + obj //-> Uncaught Error: 型が違ってるよ！ "test" + fnc //-> Uncaught Error: 型が違ってるよ！ |
評価されるたびにランダムで値を返す配列というわけのわからないものもつくってみました。
|
1 2 3 4 5 6 7 8 9 10 11 |
var a = ["hello", "world", "hoge", "xxx", "test", "boo"]; var b = {}; b.valueOf = function(){ return Math.floor(Math.random() * 5) } a[b+0] //->"world" a[b+0] //->"test" a[b+0] //->"xxx" a[b+0] //->"test" |
Qiitaのコメント欄で教えていただいたのですが、toStringメソッドを上書きする方がきれいに書けます。
|
1 2 3 4 5 |
var a = ["hello", "world", "hoge", "xxx", "test", "boo"]; var b = {}; b.toString = function(){return ~~(Math.random() * 5); }; a[b] //->"world" |
配列の添え字にオブジェクトを指定するとtoStringが呼ばれるみたいです。知らなかった。JavaScript奥が深い……
添え字で三項演算子
添え字の中で三項演算子も使えます。
|
1 2 3 4 5 6 7 8 |
a = ["aaa", "bbb" , "ccc", "ddd"]; flag = true; a[flag ? 'shift' : 'pop'](); //->"aaa" flag = false; a[flag ? 'shift' : 'pop'](); //->"ddd" |
添え字でメソッドの呼び出しができるので、三項演算子と組み合わせて使うことができます。
使いどころがわかりませんが……
JavaScriptってホント楽しいですね!
