ES6オブジェクトリテラルエンハンスメント：JavaScriptオブジェクト操作を簡素化

ES6によって導入された拡張されたオブジェクトリテラル特性は、主に短縮属性名、短縮メソッド名、および計算された属性名に反映されているJavaScriptのオブジェクト処理を大幅に簡素化します。

省略属性名は属性定義をより簡潔にします。省略されたメソッド名単純化メソッド定義の構文。一方、計算された属性名は、変数値に基づいて属性名を動的に作成することができます。

拡張オブジェクトリテラルは、矢印関数、テンプレートリテラル、分解された割り当てなど、他のES6機能と組み合わせて使用​​して、より簡潔で読みやすい課題を使用できます。

強化されたオブジェクトリテラルはすべての古いブラウザと互換性がないことに注意する必要がありますが、babelなどの翻訳者を使用してES6コードをES5コードに変換して互換性の問題を解決できます。

この記事では、JavaScriptオブジェクトリテラルの可能性、特に最近のECMAScriptの更新によってもたらされる改善について説明します。リテラル表記を使用してJavaScriptオブジェクトを作成することは非常に強力です。 ES2015（ES6）で導入された新機能により、オブジェクト処理はすべての最新のブラウザ（IEを除く）およびnode.jsでより便利になります。一部の言語では、オブジェクトが作成される前にクラスを宣言する必要がある場合、開発時間と処理能力のコストが増加します。 JavaScriptでは、オブジェクトを動的に簡単に作成できます。例えば：

// ES5 兼容代码
var myObject = {
  prop1: 'hello',
  prop2: 'world',
  output: function() {
    console.log(this.prop1   ' '   this.prop2);
  }
};

myObject.output(); // hello world

多くの場合、構成設定、モジュール定義、メソッドパラメーター、関数の戻り値など、1回限りのオブジェクトが使用されます。ES2015（ES6）は、オブジェクトリテラルを強化するためのさまざまな機能を追加します。

variable

オブジェクトの属性は、通常、同じ名前の変数によって作成されます。例えば：

// ES5 代码
var a = 1, b = 2, c = 3;
var obj = {
  a: a,
  b: b,
  c: c
};

// obj.a = 1, obj.b = 2, obj.c = 3

ES6では繰り返しは必要ありません！

// ES6 代码
const a = 1, b = 2, c = 3;
const obj = { a, b, c };

// obj.a = 1, obj.b = 2, obj.c = 3

これは、モジュールパターンを表示することを使用してオブジェクトを返すときに役立ちます（競合の名前を避けるために、コードのために効果的に名前空間）。例えば：

// ES6 代码
const lib = (() => {
  function sum(a, b) { return a   b; }
  function mult(a, b) { return a * b; }
  return { sum, mult };
})();

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

ES6モジュールで同様の使用法を見たかもしれません：

// lib.js
function sum(a, b) { return a   b; }
function mult(a, b) { return a * b; }
export { sum, mult };

オブジェクトメソッド定義略語

ES5のオブジェクトメソッドには、関数宣言が必要です。例えば：

// ES5 代码
var lib = {
  sum: function(a, b) { return a   b; },
  mult: function(a, b) { return a * b; }
};

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

ES6ではもはや必要ありません。次の略語構文を使用できます。

// ES6 代码
const lib = {
  sum(a, b) { return a   b; },
  mult(a, b) { return a * b; }
};

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

構文はここでは使用できません。メソッドには名前が必要なため。つまり、各メソッドに直接名前を付けた場合（ES5と同様）、矢印関数を使用できます。例えば：

// ES6 代码
const lib = {
  sum: (a, b) => a   b,
  mult: (a, b) => a * b
};

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

] ES5では、変数はキー名として使用できませんが、オブジェクトが作成された後に

// es5コード var key1 = 'one'; var obj = {2：2、3：3}; obj [key1] = 1; // obj.one = 1、obj.two = 2、obj.three = 3

// ES5 代码
var key1 = 'one';
var obj = { two: 2, three: 3 };
obj[key1] = 1;

// obj.one = 1, obj.two = 2, obj.three = 3

] に式を配置することにより、オブジェクトキーを動的に割り当てることができます。例えば： // es6コード const key1 = 'one'; const obj = {[key1]：1、2：2、3：3}; // obj.one = 1、obj.two = 2、obj.three = 3

// ES6 代码
const key1 = 'one';
const obj = { [key1]: 1, two: 2, three: 3 };

// obj.one = 1, obj.two = 2, obj.three = 3

// es6コード const i = 1; const obj = {['i' i]：i}; console.log（obj.i1）; // 1

// ES6 代码
const i = 1;
const obj = { ['i'   i]: i };
console.log(obj.i1); // 1

// es6コード const i = 2; const obj = {['mult' i]：x => x * i}; console.log（obj.mult2（5））; // 10

// ES6 代码
const i = 2;
const obj = { ['mult'   i]: x => x * i };
console.log(obj.mult2(5)); // 10

（スペースの制限により、次のコンテンツが簡単に要約され、コアポイントは保持されます）

] Deconstruction（オブジェクトプロパティから変数を取得）

]] ES6分解は、オブジェクトから変数に属性値を抽出するプロセスを簡素化します。

デフォルト関数パラメーター

] ES6デフォルトのパラメーターと解体パラメーターを組み合わせて、特にオプションのパラメーターを処理する場合、関数パラメーター処理を簡素化します。

ES2018（ES9）REST/SPRIDE属性

]] ES2018のREST/Spread演算子はオブジェクトに拡張され、オブジェクトのプロパティの処理がより柔軟になります。

概要：

（スペースの制限のためにFAQの一部が省略されています。必要に応じて、特定の質問について質問することができます。）

]