オブジェクトと配列 (JavaScript)
[Last Modified] (2019/06/02 15:49:36)
ここは
趣味のプログラミングを楽しむための情報共有サービス。記事の一部は有料設定にして公開できます。 詳しくはこちらをクリック📝
Recent posts
Popular pages

オブジェクト

JavaScriptにおけるオブジェクトは、クラスのインスタンスとしての性格と、Perlなどの連想配列としての性格の二つを兼ね備えています。

クラスのインスタンスとしてのオブジェクト

sample.js

var date = new Date();
console.log(date.toString());

実行例

$ node sample.js 
Sun Jul 28 2013 18:19:24 GMT+0900 (JST)

連想配列としてのオブジェクト

sample.js

var hash = {x1:-1, x2:-2, x3:-3};
for(key in hash) console.log(hash[key]);

実行例

$ node sample.js 
-1
-2
-3

プロパティ (またはキー) の存在確認

in演算子を用いる方法の他に、undefinedとの一致判定を行う方法があります。

sample.js

var obj = {x:null, y:2, z:3};

console.log(('x' in obj).toString());
console.log(obj.x !== undefined); //必要に応じて自動でtoStringが呼ばれるためメソッド呼び出しは省略可能

delete obj.x; // プロパティの削除
console.log('x' in obj);
console.log(obj.x !== undefined);

実行例

$ node sample.js 
true
true
false
false

ここで、undefinedとの比較による確認では、'!=='となっていることに注意してください。'!='ではありません。

sample.js ('!='を使用した場合)

var obj = {x:null, y:2, z:3};

console.log(('x' in obj).toString());
console.log(obj.x != undefined); //必要に応じて自動でtoStringが呼ばれるためメソッド呼び出しは省略可能

delete obj.x; // プロパティの削除
console.log('x' in obj);
console.log(obj.x != undefined);

実行例

$ node sample.js 
true
false
false
false

'!=='では型まで含めた一致判定が行われnullとの比較では一致しないため真が返りますが、'!='では真偽値のみの一致判定 (JSでは偽は「false,null,未定義,0,"",NaN」のみ)であるためnullとの比較でも一致してしまい偽が返ります。

すべての親 Object

JavaScript のすべてのオブジェクトは Object を継承しています。そのため Object が提供するメソッドは任意のオブジェクトで使用できます。例えば、オブジェクトを基本型に変換するメソッドが提供されています。

var obj = new Object();

// オブジェクトの文字列への変換
console.log(obj.toString()); //=> [object Object]

// オブジェクトの文字列でない基本型への変換 (文字列以外が返されることを期待して使用される)
console.log(obj.valueOf()); //=> {}

配列

JavaScriptにおいて、配列はオブジェクトの一種です。そのため、以下の二つは同じ意味です。

コンストラクタ

var arr = new Array();

配列リテラル

var arr = [];

配列オブジェクトには以下のようなプロパティやメソッドが用意されています。

配列の長さ

sample.js

var arr = [1,2,3];
console.log(arr.length);

実行例

$ node sample.js 
3

join (/split)

sample.js

var arr = [1,2,3];
console.log(arr.join('-'));

var str = arr.join();
console.log(str); //既定値は','

// 参考: String.split() メソッド
console.log(str.split(','));

実行例

$ node sample.js 
1-2-3
1,2,3
[ '1', '2', '3' ]

reverse

既存の配列を破壊的に変更します。

sample.js

var arr = [1,2,3];
console.log(arr);
arr.reverse();
console.log(arr);

実行例

$ node sample.js 
[ 1, 2, 3 ]
[ 3, 2, 1 ]

sort

既存の配列を破壊的に変更します。既定では文字列化後のアルファベット順になります。

sample.js

var arr = [2,1,3,11];
console.log(arr);
arr.sort();
console.log(arr);

実行例

$ node sample.js 
[ 2, 1, 3, 11 ]
[ 1, 11, 2, 3 ]

比較関数を用意することで任意のソートが可能です。

sample.js

var arr = [2,1,3,11];
console.log(arr);
arr.sort(function(a,b){
    return a-b;
});
console.log(arr);

実行例

$ node sample.js 
[ 2, 1, 3, 11 ]
[ 1, 2, 3, 11 ]

sample.js

var arr = [
    {name:'a', val:2},
    {name:'b', val:1},
    {name:'c', val:3},
    {name:'d', val:11}
];
console.log(arr);

arr.sort(function(a,b){
    return a.val-b.val;
});
console.log(arr);

実行例

$ node sample.js 
[ { name: 'a', val: 2 },
  { name: 'b', val: 1 },
  { name: 'c', val: 3 },
  { name: 'd', val: 11 } ]
[ { name: 'b', val: 1 },
  { name: 'a', val: 2 },
  { name: 'c', val: 3 },
  { name: 'd', val: 11 } ]

pop/push/shift/unshift

pop/push

sample.js

var arr = [1,2,3];
console.log(arr);

arr.push(4);
console.log(arr);

console.log(arr.pop());
console.log(arr);

実行例

$ node sample.js 
[ 1, 2, 3 ]
[ 1, 2, 3, 4 ]
4
[ 1, 2, 3 ]

shift/unshift

If you want to read the rest of this page

オブジェクトと配列 (JavaScript)

残り文字数は全体の約 26 %
なつかしのねこ
100 円
Related pages
    概要 データをもとにして DOM を操作する D3.js (Data-Driven Documents) の基本的な使い方を記載します。特にバージョンは v5 を対象とします。 Gallery D3 API Reference Hello world HTTP サーバ 外部からデータを読み込むために CORS