JavaScript 配列とオブジェクトの違い

スポンサーリンク

配列とオブジェクトの違いを備忘録としてまとめてみました。

概要

配列は、index番号と要素をセットにして管理します。

オブジェクトは、キーと要素をセットにして管理します。

早見表

処理種別ソースコード
初期化配列var 配列名 = [];
var 配列名 = new Array();
オブジェクトvar オブジェクト名 = {};
var オブジェクト名 = new Object();
追加配列配列名.push(要素);
オブジェクトオブジェクト名.プロパティ名 = 要素;
オブジェクト名[プロパティ名]  = 要素;
更新配列配列名[要素] = 更新値;
オブジェクトオブジェクト名.プロパティ名 = 更新値;
オブジェクト名[プロパティ名]  = 更新値;
削除配列先頭配列名.shift();
末尾配列名.pop();
場所指定配列名.splice(index番号,数)
オブジェクトdelete オブジェクト名.プロパティ名;
delete オブジェクト名[プロパティ名];

初期化

配列
//配列リテラルで初期化
var a1 = [];

//コンストラクタで初期化
var b1 = new Array();

オブジェクト
//オブジェクトリテラルで初期化
var a1 = {};

//コンストラクタで初期化
var b1 = new Object();

要素追加

配列
//要素追加
a1.push('国語');

オブジェクト
//プロパティ追加
b1.subject = '国語';
b1['subject'] = '国語';

要素更新

配列
//要素更新(数学を社会に変更)
var a1 = ["国語","数学","英語","科学","物理"];
console.log(a1[1]);

a1[1] = "社会";
console.log(a1[1]);

実行結果

数学
社会
オブジェクト
//要素更新(heightを165に変更)
var a1 = {
    name : "太郎",
    height : 160,
    wight : 60
};
console.log(a1.height);

a1.height = 165;
console.log(a1.height)

実行結果

160
165

要素削除

配列
//要素削除(配列の先頭を削除)
var a1 = ["国語","数学","英語","科学","物理"];
a1.shift();
console.log("先頭削除:" + a1);

//要素削除(配列の末尾を削除)
var a1 = ["国語","数学","英語","科学","物理"];
a1.pop();
console.log("末尾削除:" + a1);

//要素削除(配列の指定した要素を削除)
var a1 = ["国語","数学","英語","科学","物理"];
//配列の2番目から1つ要素を削除する
a1.splice(2,1);
console.log("指定削除:" + a1);

実行結果

先頭削除:数学,英語,科学,物理
末尾削除:国語,数学,英語,科学
指定削除:国語,数学,科学,物理
オブジェクト
var a1 = {
    name : "太郎",
    height : 160,
    wight : 60
};
//要素削除()
delete a1.name;
console.log(a1.name);

var a1 = {
    name : "太郎",
    height : 160,
    wight : 60
};
//要素削除()
delete a1['name'];
console.log(a1['name']);

実行結果

undefined
undefined

ソート

//一次元配列 昇順 ※降順はaとbを逆にする。
var a1 = [10,3,36,4,1];
a1.sort(function(a,b){
    return a - b;
});
console.log(a1);

//二次元配列 indexの1をキーにして昇順 ※降順はaとbを逆にする。
var a1 = [
    [10,3,36],
    [49,68,19],
    [3,7,70],
    [98,86,48],
    [19,38,63]
];
a1.sort(function(a,b){
    return a[1] - b[1];
});
console.log(a1);

実行結果

[1, 3, 4, 10, 36]

[10, 3, 36]
[3, 7, 70]
[19, 38, 63]
[49, 68, 19]
[98, 86, 48]
オブジェクト
//点数をキーにしてソート
var a1 = {
    "国語" : 100,
    "英語" : 60,
    "数学" : 70,
    "科学" : 89,
    "物理" : 46
};
var result = Object.entries(a1).sort(function(a,b){
    return b[1] - a[1];
});
console.log(result);

var a1 = {
    "国語" : {
        "定期試験" : 50,
        "実力試験" : 39,
        "模擬試験" : 60
    },
    "英語" :  {
        "定期試験" : 75,
        "実力試験" : 86,
        "模擬試験" : 98
    },
    "数学" :  {
        "定期試験" : 86,
        "実力試験" : 43,
        "模擬試験" : 97
    },
    "科学" :  {
        "定期試験" : 78,
        "実力試験" : 33,
        "模擬試験" : 86
    },
    "物理" :  {
        "定期試験" : 16,
        "実力試験" : 84,
        "模擬試験" : 63
    }
};

var result = Object.entries(a1).sort(function(a,b){
    return b[1]["実力試験"] - a[1]["実力試験"];
});

Object.keys(result).forEach(function (key) {
  console.log(result[key][0] + "(実力試験) : " + result[key][1]["実力試験"]);
});

実行結果

["国語", 100]
["科学", 89]
["英語", 60]
["数学", 60]
["物理", 46]

英語(実力試験) : 86
物理(実力試験) : 84
数学(実力試験) : 43
国語(実力試験) : 39
科学(実力試験) : 33

JavaScript その他
スポンサーリンク
エンジニアの日記

コメント