JavaScriptでオブジェクトや配列の特定のキーの値だけを取り出す

タイトル、日本語にすると少しわかりにくいですが。

普段よく使う関数の一つなので、簡単に導入できるようにシェアしておきます。

具体的には、オブジェクトや配列から、指定したキーの名称にあたる値だけを取り出して返却する関数です。PHPで言うところのarray_column()関数のような使い方もできます。

定義

言葉で説明してもイマイチピンとこないと思うので、早速定義から。

以下のJavaScriptを読み込んでください。

(function (w) {
    var isArray = Array.isArray;

    /**
     * オブジェクトや配列の特定のキーの値だけを取り出す
     * @param {Object|Array.<Object>} object
     * @param {string|Array.<string>} path
     * @returns {*}
     */
    function property(object, path) {
        if (object == null || typeof object != 'object') return;
        return (isArray(object)) ? object.map(createProcessFunction(path)) : createProcessFunction(path)(object);
    }

    function createProcessFunction(path) {
        if (typeof path == 'string') path = path.split('.');
        if (!isArray(path)) path = [path];

        return function (object) {
            var index = 0,
                length = path.length;

            while (index < length) {
                object = object[toString(path[index++])];
            }
            return (index && index == length) ? object : void 0;
        };
    }

    function toString(value) {
        if (value == null) return '';
        if (typeof value == 'string') return value;
        if (isArray(value)) return value.map(toString) + '';
        var result = value + '';
        return '0' == result && 1 / value == -(1 / 0) ? '-0' : result;
    }

    w.property = property;
})(window);

上記のコードを読み込むことで、グローバル関数property()が定義されます。関数の名称を変更したい場合は、下から2行目を変更してください。

動作（オブジェクトの場合）

property()関数は、2つの引数をとり、第一引数にはデータの参照元であるオブジェクトか配列を、第二引数には取り出したい値のキー（パス）を指定します。

例えば、第一引数にオブジェクトを指定した場合には、以下のように動作します。

var object = {
    a: {
        b: {
            c: 1,
            d: 2
        }
    }
};

property(object, 'a.b.c');
// 1

property(object, 'a.b.d');
// 2

property(object, 'a.b.e');
// undefined

// 配列でパス指定もできる
property(object, ['a', 'b', 'c']);
// 1

オブジェクトの場合は、単にobject.a.b.cと指定すればいいので、文字列として扱うメリットがある場面は少ないかもしれません。

動作（配列の場合）

第一引数が配列の場合には、返ってくる値も配列となるため、場合によっては便利に利用できます。

例えば、以下のように動作します。

var objects = [{
    a: {
        b: {
            c: 1,
            d: 2
        }
    }
}, {
    a: {
        b: {
            c: 3,
            d: 4
        }
    }
}];

property(objects, 'a.b.c');
// [1, 3]

property(objects, 'a.b.d');
// [2, 4]

property(objects, 'a.b.e');
// [undefined, undefined]

// 配列でパス指定もできる
property(objects, ['a', 'b', 'c']);
// [1, 3]

オブジェクトが含まれる配列を、特定のキーの値だけの配列に変換できます。

実用的には、以下のような使い方になるでしょうか。

var users = [{
    name: '太郎',
    company: {
        name: 'A株式会社'
    }
}, {
    name: '二郎',
    company: {
        name: 'B株式会社'
    }
}, {
    name: '花子',
    company: {
        name: 'C株式会社'
    }
}];

property(users, 'name');
// ["太郎", "二郎", "花子"]

property(users, 'company.name');
// ["A株式会社", "B株式会社", "C株式会社"]

まとめ

今回は、JavaScriptでオブジェクトや配列の特定のキーの値だけを取り出す関数を紹介しました。

APIなどでJSONを取得した場合、様々な情報が含まれる中で特定の値しか必要のない場面など、意外とあったりします。

そんなとき、この関数を利用すると幸せになれるかもしれません。

なお、本格的に便利関数群を導入したい場合は、Lodash等のライブラリの導入を検討しましょう。