皆さん、こんばんはベル子です。
あまりJSに詳しくない人に教えるときに
きっと一度は経験するかもしれない質問を紹介します。
「これはObjectなんで〜〜」
「Objectって何ですか？」
あなたの心の声：で、出たーーーーーーーーその質問！
「phpで言うところの連想配列みたいなものです（早口＆小声）」
ほらそんな細かいこと気にしないで先に進みますよ★感を出しまくってスルーするのが定番のこの質問です。
なぜなら、ぱっと話してその日のうちに理解できるような代物ではないということをあなたは知っているからです。
Objectが何なのか、実際は連想配列というよりはClassに近いものだと認識していますが、実装上では連想配列のように使われることが多いので、分かりやすく説明するために後ろのマサカリを担いだ誰かに見つからないように、震えながらそう応えたりGoogleのURLを投げつけたりするのが定番です。
どのように作るかというと
var Belko = new Object();
または
var Belko = {};
ですね。よく見るのは後者だと思います。
厳密に言うと、こうやって作ってるのはカスタムオブジェクトで、
JSには組み込みのオブジェクトも存在します。
var d = new Date();
こんなやつ（例は日付オブジェクト）です。
さらに言うとコンストラクタ関数を使って作る方法もあります。
よくJavaScriptオブジェクト指向プログラミング入門的なやつに出てくるやり方です。
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
var mycar = new Car("Eagle", "Talon TSi", 1993);
でも、まだまだ不安でいっぱいなのでObjectが何なのかドキュメントを確認してみましょう。
もしかしたら、すごく分かりやすいかもしれないですよね！ワクワク。
オブジェクトを利用する
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);
この中でベル子は、今回、最もスッキリ書けるES7記法で書いてみました。
というのも、Laravel ElixirでbrowserifyしてるいうことはBabelでトランスパイルしてるということでBabelがObject.valuesもPolyfillってくれるということです！！
OSSの恩恵ハンパないですね。
ではでは、突然おわりまする。
またねーーー★
[2回]