ホームページ > ウェブフロントエンド > jsチュートリアル > ES6 の拡張オブジェクト リテラルの簡単な紹介

ES6 の拡張オブジェクト リテラルの簡単な紹介

不言
リリース: 2018-11-14 15:53:27
転載
2533 人が閲覧しました

この記事では、ES6 の拡張オブジェクト リテラルについて簡単に紹介します。必要な方は参考にしていただければ幸いです。

概要

es6 では、オブジェクト リテラルの構文が強化されました

プロパティ宣言が短縮されました

プロパティのプロパティ名とプロパティ値が参照される場合、変数名は一貫性があり、直接省略可能

let name="jack"
// es6之前
var obj={name:name} // {name:"jack"}
// es6 
let obj={name}  // {name:"jack"}
ログイン後にコピー

短い関数宣言

属性の属性名が属性値の関数名 (関数) または属性値 ( function) には関数名がありません。省略できます。functionキーワードと属性名

// es6之前
var obj={sum: function(a, b){return a+b}}
// es6
let obj={sum(a, b){return a+b}} //{sum:function(a, b){return a+b}}
ログイン後にコピー

動的に計算される属性名

属性名は動的に変更できます

let key="name"
let obj={[key]:"jack"} // {name:'jack'}
ログイン後にコピー

概要

let key="name"
let age=23
let person={
    [key]:"jack",
    getName(){return "jack"},
    age
} // {name:"jack",getName:function(){return "jack"},age:23}
ログイン後にコピー

babelを使用して翻訳します

ソースコード

let key="name"
let age=23
let person={
    [key]:"jack",
    getName(){return "jack"},
    age
}
ログイン後にコピー

翻訳後、 Object.defineProperty##を使用して実装されていることがわかります。 #rree


以上がES6 の拡張オブジェクト リテラルの簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:segmentfault.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート