JavaScriptオブジェクトからプロパティと値を取り出す

Question

JavaScriptの勉強中です。
初めての質問です。
以下のようにオブジェクトからプロパティと値を取り出すにはどのようにするのがいいでしょうか?

let a;
let b;
let c;
let o = {a: 1, b: 2, c: 3};

ここから

console.log("a= " + a); //a= 1
console.log("b= " + b); //b= 2
console.log("c= " + c); //c= 3

よろしくお願いします。

Answer 1

let o = {a: 1, b: 2, c: 3};
let{a,b,c} = o;

letを使っているから、分割代入を使っていいんですよね？

Comments

[yoshimatsu]

letであるべきかわかりません。本来はvarにすべきかもしれません。
ご回答いただいた方法で変数a、b、c自体の値をoの中身と同じ1、2、3になることを確認できました。
ありがとうございました。

[m0a]

letかvarかと言うのはjavascriptの言語仕様の話です。今現在は意図がなければ(例えば古いブラウザでjsを動かしたい等) let, constを使うべきです。ES2015で調べてみて下さい

[yoshimatsu]

ES2015調べるようにします。

[Lhankor_Mhy]

分かりにくくてすみません。

回答のコードはIE11では動作しないです。
let定義はIE11でも動作します（たぶん）が、let定義も分割代入もES6（ES2015）と呼ばれる仕様です。
なので、「（ES6の）letを使っているから、（ES6の）分割代入を使っていいんですよね？」という意味で書きました。

[yoshimatsu]

そう言う意味ですか?
ちゃんとは理解できていませんがletは今年になって、分割代入は今回知りました。

[yoshimatsu]

for...inとevalを用いる方法にしたいと思います。質問の回答としては分割代入が正しいのですがベストアンサーは他の方にさせていただきます。

[yoshimatsu]

ありがとうございました。

Answer 2

オブジェクトからプロパティと値を取り出すにはどのようにするのがいいでしょうか?

オブジェクトはそれそのものがインデックス付きの本みたいなものです。
どうしてもバラバラにすべきケースを除いて、オブジェクトのまま使うのが分かりやすいと思います。

// オブジェクトとプロパティの同時宣言
let o = {a: 1, b: 2, c: 3};

// 各プロパティから値を取り出したい
console.log(o.a); // 1
console.log(o.b); // 2
console.log(o.c); // 3

// 各プロパティへの値を格納したい
o.a = 10;
o.c = 30;
console.log(o); // {a: 10, b: 2, c: 30}

---

質問文を素直に解く

プロパティから値を取り出す方法さえわかれば楽勝です。

let a;
let b;
let c;
let o = {a: 1, b: 2, c: 3};

a = o.a;
b = o.b;
c = o.c;

console.log("a= " + a); //a= 1
console.log("b= " + b); //b= 2
console.log("c= " + c); //c= 3

ES2015という新しいJavaScriptのバージョンの書き方では
オブジェクトの分割代入という書き方がサポートされました。
これにより変数a, b, cの3つを一気に宣言できます。

let o = {a: 1, b: 2, c: 3};
let {a, b, c} = o;

console.log("a= " + a); //a= 1
console.log("b= " + b); //b= 2
console.log("c= " + c); //c= 3

最初の書き方より随分鮮やかになりましたね。
これはIE11やopera等の一部のブラウザでは動作しませんので注意してください。
（Babelというツールがあり、ES2015専用のコードを上の愚直なやり方に変換する事ができます）

しかし1個ずつ書くというのは変数oの構造が変化した時に
存在しないプロパティを読み込もうとしてバグの原因になります。
そこで、一般的にはmaisumakunさんのような手法が用いられます。

Comments

[yoshimatsu]

データベースから得られたデータの中身を取り出す正しい方法を知りたくての質問でした。データベースでやりとりしたい変数a、b、cは初めからo.a、o.b、o.cにしておくのがいいのでしょうか?

[miyabi-sun]

データベースから得たデータというのは、基本的にはレコードとカラムの2軸による2次元配列です。
まぁJavaScriptは配列と連想配列が明確に分離されていますのでオブジェクトの配列ですが。
もしくは1レコードの場合素のオブジェクトかもしれませんね。

o.aは親oに対する子aという繋がりが読み取れます。
変数aを新たに作って格納すると、このaはo.aという繋がりからは切り離された存在になります。
だから長いfor文や関数の頭で変数作って切り離してしまうと、ずっと頭で覚えながらコードを触る必要があります。
この文の中でaと言えばo.aに決まってるだろう？と一目で分かるケース以外では、安易に切り離さずo.aのまま使う事をオススメします。

[yoshimatsu]

for...inとevalを用いる方法にしたいと思います。ご指導ありがとうございました。

Answer 3

for-in、もしくはObject.keysを使いましょう。

// for-inのパターン
let o = {a: 1, b: 2, c: 3};
for(const key in o) {
  console.log(key + '= ' + o[key]);
}

// Object.keysのパターン
// 回すのをセットにしなくても、キーの配列が取れるので便利
Object.keys(o).forEach(key => {
  console.log(key + '= ' + o[key]);
});

Comments

[yoshimatsu]

早速回答をいただきありがとうございます。
しかし説明が不十分でした。すみません。
変数a、b、c自体の値をoの中身と同じ1、2、3にしたいです。

[maisumakun]

動的に変数名が決まる、という構造自体、あまり望ましくないのは間違いないです。

あらかじめキーが決まっているのであれば、Lhankor_Mhyさんの回答のような分割代入が適切になります。

[yoshimatsu]

データベースから得られたデータの中身を取り出す正しい方法を知りたくての質問でした。この質問のオブジェクトのキーに当たるのがデータベースとやりとりしたい変数になります。Switch文でキーで20以上caseを書いています。

[maisumakun]

DBでしたら列名は固定なので、分割代入のほうが向いていそうですね。

[yoshimatsu]

提案いただいたfor...inとさらにevalを用いる方法にしたいと思います。いろいろご指導ありがとうございました。

Answer 4

この場合にForが使えないですね。
下記の方法しかないと思います。

let o = {a: 1, b: 2, c: 3}
let { a, b, c } = o

Constも使えます。
const o = {a: 1, b: 2, c: 3}
const { a, b, c } = o

Comments

[yoshimatsu]

ご回答ありがとうございます。データベースから得られたデータの中身を取り出す正しい方法を知りたくての質問でした。20組以上のデータをひと塊りにしてやりとりしています。

[yoshimatsu]

for...inとevalを用いる方法にしたいと思います。ありがとうございました。

Answer 5

変数a、b、c自体の値をoの中身と同じ1、2、3にしたいです。

var o = {a: 1, b: 2, c: 3};
for(var i in o){
this[i]=o[i];
}
console.log([a,b,c]);

追記

上記グローバル変数の場合でしたのでローカル変数には適用されません
オブジェクト自体外部から受け取るわけではなさそうですし
キーを特定の文字に制限するならevalを使ってもいいでしょう。

(function(){
  var a=0,b=0,c=0,d=0,e=0;
  var o = {a: 1, b: 2, c: 3,"d=4;e":5};
  for(var i in o){
    eval(i+"="+o[i]);
  }
  /*キーを検証しないと変数が汚染される可能性がある*/
  console.log([a,b,c,d,e]);

  var a=0,b=0,c=0,d=0,e=0;
  for(var i in o){
    /*日本語変数とか使わないかぎりこんな感じ*/
    if(i.match(/^[a-zA-Z_$][0-9a-zA-Z_$]*$/))eval(i+"="+o[i]);
  }
  console.log([a,b,c,d,e]);
})();

Comments

[yoshimatsu]

ご回答ありがとうございます。
[undefined, undefined, undefined]
と表示されます。
HTMLとJavaScriptのファイルをサーバーに置きSafariで確認しました。
何か注意することはありますか?
var a;
var b;
var c;
var o = {a: 1, b: 2, c: 3};
for(var i in o){
this[i]=o[i];
}
console.log([a,b,c]);

[yoshimatsu]

ご教授いただいたfor...inとevalを用いる方法にしたいと思います。ありがとうございました。