JavaSriptでeachしてみた

最近ずっとRubyを書いていて、久しぶりにJavaScriptを書くとまず;を忘れる。

今回はこんなことをしてて焦った。

[code.high.num]
var arr = new Array();

arr = ["ruby", "perl", "javascript", "jquery"];

arr.each(function(value) {
    console.log(value);
});

// Uncaught TypeError: Object ruby,perl,javascript,jquery has no method 'each'

forで書けるけど、Rubyになれるとforを使うのに気が進まない…。いつの間にか…。

調べてみるとjQueryをrequireじゃなくて…srcするとeachが使えるみたい。

[code.high.num]
var arr = new Array();

arr = ["ruby", "perl", "javascript", "jquery"];

$.each(arr, function(index, value) {
    console.log(index + ":" + value);
});

// 0:ruby
// 1:perl
// 2:javascript
// 3:jquery

あとjQueryにstrip的なのがあったからメモ。

[code.high.num]
var str = " \nRuby \n\t";
str.trim(); // => "Ruby"

JavaScriptはRubyとまた違ったオブジェクト指向でやりやすかったり、やりにくかったり。プロトタイプとかがまたややこしいと思ったり。オブジェクト作るのがめんどくさかったり。

たりたり。

追記（2013/03/19）

それ、forEachメソッドでできるよ。（というか断然こっちのほうが良い・・・）

[code.num.high]
var arr = ["ruby", "perl", "javascript", "jquery"];

arr.forEach(function(value, index) {
    console.log(index + ":" + value);
});

というかこっちのほうがRubyに近いですね。

jQueryと違ってvalueとindexが逆になっているので注意です。また、forEachはArrayのインスタンスですのでオブジェクトには使えません。オブジェクトのときはjQueryを使うか、for each…in文を使いましょう。

[code.num.high]
for each (var value in obj) {
    value.method(value.key);
}

Chromeは未実装なのか動きません。for each…in文はjavascript1.8からです。

他にもObjectのプロトタイプをいじるという手もありそうですが、それはあまり良くないでのしたくないですね…。

オブジェクトの場合は素直にjQuery使ったほうが良さそうです。

また、forEachはこんな引数も持ちます。

[code.num.high]
arr.forEach(function(value, index) {
    this.method(index, value);
}, obj)

こんな感じでforEach文のなかで参照できるオブジェクトを指定することが可能。未指定の場合はundefinedです。

コンストラクタ内で使うときはthisの指すものが変わると厄介なのでobjにthisを指定してあげれば全く問題ないですね。

ちなみにjQueryのeachでのthisでは、インスタンスからeachで参照されたものをオブジェクトとして返します。（インスタンスって言っていいのかな...）

jQuery.each() jQuery API Documentation

The value can also be accessed through the this keyword, but Javascript will always wrap the this value as an Object even if it is a simple string or number value.

[code.num.high]
var arr = ["ruby", "perl", "javascript", "jquery"];

$.each(arr, function() {
    console.log(this);
});

// String {1: "r", 2: "u", 3: "b", 4: "y"}
// String {1: "p", 2: "e", 3: "r", 4: "l"}
// ...

blog comments powered by Disqus

Published

15 February 2013

追記（2013/03/19）

Published

Tags