1. ホーム
  2. javascript

[解決済み] Javascriptのオブジェクトリテラル:{a, b, c}とは一体何でしょうか?

2023-04-08 03:22:12

質問

私が抱いている疑問は、次のような方法で与えられるのがベストでしょう。 このjsfiddle そのためのコードは以下のとおりです。

var a = 1, b = 'x', c = true;

var d = {a: a, b: b, c: c}; // <--- object literal
var e = [a, b, c];          // <--- array
var f = {a, b, c};          // <--- what exactly is this??

// these all give the same output:
alert(d.a  + ', ' + d.b +  ', ' + d.c );
alert(e[0] + ', ' + e[1] + ', ' + e[2]);
alert(f.a  + ', ' + f.b +  ', ' + f.c );

どのようなデータ構造かというと f ? の単なる略記なのでしょうか? d ?

どのように解決するのですか?

オブジェクト・イニシャライザー プロパティの略記 をES6で定義しています。

var f = {a, b, c, d:1}; // Will be equal to {a:a, b:b, c:c, d:1}

これは、プロパティ値がプロパティ識別子と同じ名前を持っているために動作します。これは、構文に新しく追加された オブジェクト初期化子 ( セクション 11.1.5 ) を、最新の ECMAScript 6 ドラフト Rev 13 . そしてもちろん、ECMAScript 3 から設定された制限と同じように、予約語をプロパティ名として使用することはできません。

このような省略記法はあなたのコードを劇的に変えることはなく、すべてを少し甘くするだけです!

function createCar(name, brand, speed) {
  return { type: 'Car', name: name, brand: brand, speed: speed };
}

// With the new shorthand form
function createSweetCar(name, brand, speed) {
  return { type: 'Car', name, brand, speed }; // Yes it looks sweet.
}

これらの表記法のサポートについては、互換性テーブルを参照してください。サポートされていない環境では、これらの表記は構文エラーになります。

この省略記法は、かなりうまくオブジェクトマッチングを提供します。

ECMAScript5 を使っていたもの。

var tmp = getData();
var op  = tmp.op;
var lhs = tmp.lhs;
var rhs = tmp.rhs;

で行うことができます。 ECMAScript6 を1行のコードで実行できます。

var { op, lhs, rhs } = getData();