JSでObjectを配列にする様々な方法
皆さん、こんばんはベル子です。
あまりJSに詳しくない人に教えるときに
きっと一度は経験するかもしれない質問を紹介します。
「これはObjectなんで〜〜」
「Objectって何ですか？」
あなたの心の声：で、出たーーーーーーーーその質問！
「phpで言うところの連想配列みたいなものです（早口＆小声）」
ほらそんな細かいこと気にしないで先に進みますよ★感を出しまくってスルーするのが定番のこの質問です。
なぜなら、ぱっと話してその日のうちに理解できるような代物ではないということをあなたは知っているからです。
Objectが何なのか、実際は連想配列というよりはClassに近いものだと認識していますが、実装上では連想配列のように使われることが多いので、分かりやすく説明するために後ろのマサカリを担いだ誰かに見つからないように、震えながらそう応えたりGoogleのURLを投げつけたりするのが定番です。
どのように作るかというと
var Belko = new Object();
または
var Belko = {};
ですね。よく見るのは後者だと思います。
厳密に言うと、こうやって作ってるのはカスタムオブジェクトで、
JSには組み込みのオブジェクトも存在します。
var d = new Date();
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}var mycar = new Car("Eagle", "Talon TSi", 1993);JavaScript において、オブジェクトはプロパティと型を持つ独立した存在まーーーーーさーーーーかーーーのーーーー いや、思っていたとおり、安定の全く理解不能な説明です。 一つだけ言えるのは、よく分からない文章をいくら眺めていても分かるようにはならないということ！ これは私がエンジニアをはじめた頃から徹底していることですが、分からない文章の内容を調べあげるより、まずは最後まで読む、分からないまま実装を始める（ｗ）、そしてから知りたいことを調べる、そして再度読む、そしてまだ分からないことを調べる、脱線する、また読む、実装する。 みたいな感じでやることです（徹底というわりに適当ｗ）。 そしてJavaScriptのObjectを分かりづらくしている原因のもうひとつは、サーバとクライアントでデータをやり取りするときにJSON形式でやり取りしたりします。 このJSONというフォーマットとJSのObjectリテラルが非常に似ているから混乱してしまうのです。 （だいたいキーがダブルクォーテーションなのがJSONです。） そしてこのJSONはJSのObjectに変換ができます。
JSON.parse('{"p": 5}');
ObjectもJSONデータに変換できます。
JSON.stringify({ x: 5 });
ですね！
と、ここまでは前置きです。
これからが本題なのですが、Vue.jsを使うようになってからというかモダンJSを書くようになってから、Objectがいたるところに出てきます。
そんなObjectを配列にしたい！そんなふうに思うこともベル子にはあります。
調べてみたらObjectを配列にする方法にはいろいろあったので、またお得意のJS Binでご紹介しようと思います！！
一応コードも貼っておきます。
http://jsbin.com/zucigazori/edit?html,js,console
// ↓これはJS BinでES6使う用
/* jshint esnext: true */
var rgb = {r: 19, g: 79, b: 92};
// mapでやる方法
var rgb_1 = Object.keys(rgb).map(function (key) {
return rgb[key]; });
console.log(rgb_1);
// mapでキーの配列も作れる
var rgb_2 = Object.keys(rgb).map(function(key, index) {
return key;
});
console.log(rgb_2);
// ES7
// var rgb_3 = Object.values(rgb);
// console.log('rgb_3: ' + rgb_3);
// ES6のアローファンクション
var rgb_4 = Object.keys(rgb).map(key => rgb[key]);
console.log(rgb_4);
// Underscore.js
var rgb_5 = _.values(rgb);
console.log(rgb_5);
// jQuery
var rgb_6 = $.map(rgb, function(value, index) {
return [value];
});
console.log(rgb_6);
