JavaScriptオブジェクトリテラル：正確には{a、b、c}とは何ですか？

私が持っている質問は、この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ですか？

javascript ecmascript-6

— drmrbrewer
ソース

最初のものは実際にはJSONではありません。

— GolezTrol

それだけではありません。ES6にはさらにいくつかあります

— Kos

OK @GolezTrolキーは二重引用符で囲まれていないため、厳密にはJSONではありません。だから、正確に何でしょう、あなたは呼んでd私のポストにデータ構造を？

— drmrbrewer

どのバージョンも有効なJSONではないことを理解することが重要です。データをJSON文字列として表す方法は次のようになります{"a" : 1, "b" : "x", "c" : true }

— Benjamin Gruenbaum

@drmrbrewer オブジェクトリテラルです。JSONはシリアライゼーション形式であるのに対し、それはJavaScriptコードなのでJSONではありません。たとえばvar a = '{ "a" : "value"}'-> aは、を介してオブジェクトに逆シリアル化できる文字列を保持しますJSON.parse。

— moonwave99

回答:

ES6のオブジェクト初期化プロパティの短縮形です。

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

これは、プロパティ値がプロパティ識別子と同じ名前であるため機能します。これは、最新のECMAScript 6ドラフトRev 13のObject Initialiser（セクション11.1.5）の構文に新しく追加されたものです。もちろん、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単一のコード行に：

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

— ボイド
ソース

これが言語機能になるほど便利なのはなぜですか？リテラルや戻り値などでオブジェクトを直接初期化するか、最初にオブジェクトを作成してからプロパティを直接設定する方がはるかに一般的であるようです。同じ名前で変数を作成し、インスタンス化してから、最終的にこのようにオブジェクトを初期化するのは珍しいように見えます...それともそうですか？

— Panzercrisis 2015

@Panzercrisis個人的には、意図しない多くのバグを見つけるのが難しいようです。if(a = 1) {...}有効な構文と同じように許可する。

— Anthony Grist

@Panzercrisis a、b、cがより複雑なデータ構造であり、fが他の複雑なプロパティも含むことを想像すると、少なくとも理にかなっていると思います。それでも素晴らしいアイデアだとは思いませんが、それが役立つことはわかりました。

— Josh Rumbut、2015

@Panzercrisisラムダ関数からタプルを返すことは非常に便利です(a, b) => {a, b}。これが、少なくとも同じ機能をで使用した方法C#です。

— Vincent van der Weele、2015

@アレックスこれはどのように「奇妙」または「複雑」ですか？多くのコードベースで通常見られる非常に一般的なことは、キーが値{id: id, data: data, isSelected: isSelected}などとして指定された変数と一致するオブジェクトを初期化することです。ほとんどの場合、あなたの作品に少し違う名前を付けたくないの{identifier: id, viewData: data, isElementSelected: isSelected }は、あなたが話している「風変わり」、「複雑」、「混乱」です。

— VLAZ

var f = {a, b, c};

これはES6（ECMAScript 2015）に付属しており、以下とまったく同じ意味です。

var f = {a: a, b: b, c: c};

これは、オブジェクトリテラルプロパティ値の省略形（または単にプロパティ値の省略形、省略形プロパティ）と呼ばれます。

省略表現と従来の初期化を組み合わせることもできます。

var f = {a: 1, b, c};

詳細については、オブジェクト初期化子を参照してください。

— madox2
ソース

var f = {a, b, c};          // <--- what exactly is this??

新しいECMAScript 2015表記を使用して、JavaScriptでオブジェクトを定義します。

あたりとして、Mozillaの開発者向けネットワーク：

「オブジェクトは、new Object（）、Object.create（）、またはリテラル表記（イニシャライザ表記）を使用して初期化できます。オブジェクト初期化子は、オブジェクト名の0個以上のペアのオブジェクト名と関連する値のリストであり、中括弧（{}）。」

var a = "foo", 
    b = 42, 
    c = {};

// Shorthand property names (ES6)
var o = { a, b, c };

以下と同等です。

var a = "foo", 
    b = 42,
    c = {};

var o = { 
  a: a,
  b: b,
  c: c
};

— モジョジョジョ
ソース