JavaScriptの3つのオブジェクト初期化速記記法


私は最近、変数の破壊を割り当てるための短縮表記を使おうとしていました.私は特定のシナリオを得るために異なる方法を研究していました.そして、その研究を行っている間、ES 2015が私が知らなかった3つの新しいオブジェクト初期化省略語記法を加えたとわかりました.そして、私はこれらを皆と共有することに決めました.
注意:ほとんどの良いことと同様に、これらはインターネットエクスプローラーで動作しません.それで、あなたがそれを支持しているならば、マイクロソフトがIEのために後で支持を低下させるとき、これらはまだあなたの武器で持っているのが良いかもしれません.

オブジェクト初期化短縮表記は何を意味するか?
オブジェクトを使用して既定でオブジェクトの初期化を行うことができます.create ()、newオブジェクト、またはオブジェクト初期化子を使用するリテラル表記です.オブジェクト初期化子は最も一般的な方法の一つでした.
const foo= {
  bar: 1,
  baz: 2
}
特定のシナリオでこの初期化を簡潔にする方法があります、そして、我々はこのポストのそれらの速記を通過するつもりです.
3つの新しいオブジェクト初期化短縮表記はES 2015で加えられました:
  • 短縮されたプロパティ名
  • 短縮メソッド名
  • 計算されたプロパティ名

  • 短縮プロパティ名
    これは最も広く知られているオブジェクト初期化短縮表記である.オブジェクトのプロパティ名キーがスコープ内の変数名と同じ場合は、オブジェクトを構築しながらプロパティ値を省略できます.
    これは
    const bar = 1;
    const foo: {
      bar: bar ,
      baz: 2
    }
    
    できます.
    const bar = 1;
    const foo: {
      bar,
      baz: 2
    }
    

    短縮メソッド名
    これは、私が最初に速記のプロパティ名について常に知っていたという意味で最初にそれを見たとき、少し驚きました.しかし、私は、同じことが機能/メソッド名に適用されることができると決して思いませんでした.短縮メソッド名を使用すると、オブジェクト内のメソッドを作成するときに完全に関数キーワードを省略できます.
    以下のようなコードがあります.
    const bar = 1;
    const foo: {
      bar,
      baz: function() {
      // logic
      }
    }
    
    に設定できます.
    const bar = 1;
    const foo: {
      bar,
      baz() {
      // logic
      }
    }
    
    我々はクラスの形でこれに使用されています、そして、それは巨大な勝利でありません、しかし、このポストは速記についてです、そして、私はこれらの新しい紹介が好きです.

    計算されたプロパティ名
    これは、3つのオブジェクトの初期化短縮の最も興味深い速さでした.これは、オブジェクトのプロパティ名として計算する式を持つことができます.したがって、我々は現在、オブジェクト名のダイナミックなキーを持つことができます.
    これをしたことがありますか.
    const obj = {}, key = 'bar';
    obj[key] = 'baz';
    
    JavaScriptオブジェクトは辞書であり、動的なキーを追加する可能性があります.しかし、これは常に私の痛みだった.もう!
    let key = 'bar';
    let obj = {
    
    }
    
    そして、それは働きます!ダイナミックなキーを注入することができるという考えは些細なようですが、それは多くの可能性を開きます.そこには複雑な式を追加したり、テンプレートリテラルを使用することもできます.
    let key = 'bar';
    const prefix = '_prefix'
    let obj = {
    
    
    }
    
    そして、それらは我々が議論しなければならなかった3つのオブジェクト初期化省略語記法です.これらは既存のメソッドの上に統語的な砂糖ですが、これらはオブジェクトを作成している間、我々がする最も一般的に使われた仕事です.そして、小さな改善が追加されます.JavaScriptの短縮版にもう少し追加したい場合は、JavaScript rest and spread operator and destructuringで我々のポストについてもっと読むことができます.
    これらのいずれかを使用しますか?以下のコメントでお知らせください!
    元亀2年(1821年)2月2日、元来https://www.wisdomgeek.com年.