Blog

【JavaScript】オブジェクト(連想配列)・JSON の操作を簡単にするJSツール作りました

2018.02.22Cat:html5 javascript デザイナー

JSON の API での利用拡大とともに、JavaScript のオブジェクト(連想配列など)を利用する機会が増えてきました。

WEB コンテンツがリッチになっていくのに伴い、扱う情報も多くなっています。
その分、オブジェクトの構造も複雑になり、
操作する手間も多くなってきています。

MongoDB など、JSON に似た形式のデータを多量に扱うドキュメント指向データベースでは、find() などで目的のデータを検索することができ、処理がとても楽です。

これと同じように find() で目的のプロパティや値を検索したり、処理したりしたいと思う機会が最近増えてきたため、WEBブラウザの JavaScript でこれを実装するためのクラスを作ってみました。

AddCtrlToObject

  • AddCtrlToObject で
    オブジェクト(連想配列)・JSON の操作を簡単に
  • .find() .set() .remove() などでオブジェクトを操作

クラス紹介ページ

ダウンロード

Compressed[7KB] Uncompressed[20KB] ECMAScript 6 (ES2015)[16KB]

 

基本的な使い方

操作したいオブジェクトを引数として AddCtrlToObject のインスタンスを作成します。
インスタンスを通じて、オブジェクトを操作できるようになります。
通常、オブジェクトは参照渡しでインスタンスに渡されるため、インスタンスでの変更はオリジナルのオブジェクトに反映されますが、第二引数に true を指定することで、オリジナルのオブジェクトに影響を与えずに、オブジェクトをクローンして操作できます

構文

obj: 操作する対象のオブジェクト。
isCloned: オリジナルのオブジェクトに影響を与えず、クローンして操作する場合は true を指定

記述例

オリジナルのオブジェクトに影響を与えたくない場合は、
AddCtrlToObject のインスタンスを作成するときに、第二引数に true を設定します。

記述例

AddCtrlToObject メソッド一覧

get()

オブジェクトの検索結果を取得します。
検索結果の取得は検索直後に限られ、検索前と、get()、set()、remove()、reset() の後はオブジェクト全体を返します

 記述例

 

find( key )

オブジェクトから指定したキーを検索して、該当するプロパティの組み {key: キー, value: 値, parent: 親プロパティの参照} からなる配列を返します。
メソッドチェーンにして利用可能です。

記述例

 

findByValue( value )

オブジェクトから指定した値を検索して、該当するプロパティの組み {key: キー, value: 値, parent: 親プロパティの参照} からなる配列を返します。
メソッドチェーンにして利用可能です。

記述例

 

children( key )

オブジェクトの検索結果の子プロパティから指定したキーを検索して、該当するプロパティの組み {key: キー, value: 値, parent: 親プロパティの参照} からなる配列を返します。
検索前に呼び出された場合は、オブジェクト直下の子プロパティから検索されます。
メソッドチェーンにして利用可能です。

記述例

 

keys()

オブジェクト直下に存在する列挙可能なプロパティの配列を返します。
こちらはメソッドチェーンで使うことはできません。
Object.prototype.keys(obj) と同じ機能です

記述例

 

set( value )

オブジェクトの検索結果のプロパティに値 (value) を設定します。

記述例

 

remove()

オブジェクトの検索結果のプロパティを削除します。

記述例

 

reset()

検索結果をリセット

記述例

 

参考にさせていただいたサイト

【JavaScript】オブジェクトをDeepCopyするclone関数を書いた | Web活

オブジェクトの利用 – JavaScript | MDN

クラス – JavaScript | MDN

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
     
  • Launch Cart越境ECカート

Archive

ページTOPへ