javascriptで配列やオブジェクトを操作する「比較的」高速で簡単で効率的な方法まとめ

公開日: : 最終更新日:2011/07/01 javascript

javascript書いていますかー!?私はガリガリ書いています。
大規模Javascriptアプリケーションを毎日手塩に育てて書いていますが・・・。
日々、「これが最良の方法なのか?」と問い続けながら書いています。

オライリーのあんな本こんな本を読んでいて、「確かにこれなら早いけど覚えらんないし、ここまでしなくても・・・」と思うことも。

要は「高速化は重要だけど、コードの可視性も担保しつつ早くしたい」って話です。
で、色々とここ数カ月コーディングをしていてなんとなく体系的にまとまってきたのでちょっと書いてみます。

でもまだJavascript本格的に勉強して数ヶ月の身ですので、何か間違ってる所などあれば、是非指摘してください・・・!
(Twitterの @manji6 に送ってもらえると助かります!)

オブジェクト編

まぁ何でもオブジェクトだからわかりにくい話ですが・・・。ここではいわゆるデータ管理として使うオブジェクトのことです。

(function(){
  var obj = {
      key: "MacbookPro",
      price: 120000,
      category: "PC",
      tags: ["pc","mac","macbook"]
  }
})();

こんなやつです。これを色々操作するときのベストプラクティス。

オブジェクトを初期化したい

	var obj = {};

値を入れるなら{}の中に書けばOK。初期化する分にはこれで。new Object();よりも高速。

オブジェクトに特定のプロパティ名が含まれているかを判定したい

if( "判定するキー名" in "オブジェクト"){  /* 存在する場合のみ通過 */ } 

// 例
if("category" in obj){
  console.log("存在するよ");
}

です。

“in”を利用することで簡単に判断できます。
一応”hasOwnProperty()”を使ったりもできるんですが、たしかこっちのほうが早い。

オブジェクトのあるプロパティを削除したい

delete obj.category;

delete 演算子を使えばOKです。これしかないと思う。

オブジェクトの中身をループして処理したい

for(var name in obj){ /* obj[name] でループごとに処理を */}

いわゆるfor in構文です。

配列編

仮に以下のような配列を用意しておいたとして考えます。

var arr = ["hoge", "fuga", "hogehoge", 1];

配列を初期化したい(値なしで)

var arr = new Array();

値がない場合は new演算子を使って初期化がベスト。( []でも初期化できるんだけど、こっちのほうが早いことが多い?)

配列の中身をループしたい

for(var i,len=arr.length; i < len; i++){
   /* arr[i]でアクセス可能 */
 }

色々やると反対側から操作したほうが早いとか色々ありますけど・・・。これで十分だと。
ポイントはfor文の第1にvar で定義する値を2つ書いてます。もし仮に判定文部分で「 i < arr.length」と書いてしまうと 毎回配列の個数を内部的に処理する所が走ってしまい、遅くなります。 なので、最初に長さを取得して定義してしまうのが吉。 (var はカンマ区切りで連続値定義が可能ということがポイント)

配列の中身に特定の値が存在するかどうか

var bExist  = false;
for(var i,len=arr.length; i < len; i++){
   if(arr[i] === "値"){
     bExist = true;
  }
 }

indexOfはString型以外にも使えます。Array型の場合はその配列の入っていたのが何番目か帰ってきます。(n - 1番目)
ウソつきました。IE6とかで無いです。普通にforで回してください。(これのメソッド作るとかで回避。)

関連記事

JavaScript難題:userAgentだけでMacOSのバージョンを引っこ抜くチャレンジ

JavaScript環境で、navigator.userAgentを見てMacOSのバージョンだけを

記事を読む

no image

JavaScriptでonclickなどのevent処理を高速に処理させる簡単な方法

どもです、manji6です。 node.jsみたいなサーバー側言語を触りたいなと思いつつ、ほと

記事を読む

JavaScriptの読み込み高速化方法についてまとめてみた

今日はJavaScriptの読み込み高速化手法についていろいろと調べていたのでまとめておきたいと思い

記事を読む

Message

メールアドレスが公開されることはありません。

Target:mbox

自腹で購入した商品色々レビュー中!

商品紹介・レビュー記事特集!

Target:static mbox(mbox create

no image
Nintendo Switch で使える激安USB 3.0ケーブル

Nintendo Switchを買いました!とりあえず色々まずはやって

AMPで作ったページを実際にGoogle検索結果経由でみた時と同じキャッシュ表示にする方法

今日は技術的な話。AMPページ対応を行った人も最近増えてきたと思うので

分散投資ロボアドバイザーのTHEOを大体半年間回したら利率10%近くまでになったので、トランプさんありがとうと思った

(こちらの記事は私が独自に当サービスを使ってみた結果の報告です。特にT

Macでの作業効率アップ!nativefierを使ってWebアプリをアプリケーション化

Console heaven / bartosz.maciejew

no image
2016年の目標

新年明けましておめでとうございます。 年末年始は色々とバタバタしまし

→もっと見る

PAGE TOP ↑