Eine kurze Einführung in erweiterte Objektliterale in ES6

Dieser Artikel bietet Ihnen eine kurze Einführung in die erweiterten Objektliterale in ES6. Ich hoffe, er wird Ihnen als Referenz dienen.

Übersicht

In ES6 wurde die Syntax von Objektliteralen verbessert

Kürzere Eigenschaftsdeklarationen

Wenn der Eigenschaftsname und der Eigenschaftswert auf die Variable verweisen Namen sind konsistent, Sie können sie direkt weglassen

let name="jack"
// es6之前
var obj={name:name} // {name:"jack"}
// es6 
let obj={name}  // {name:"jack"}

Kürzere Funktionsdeklaration

Wenn der Attributname des Attributs mit dem Funktionsnamen des Attributwerts (Funktion) oder dem Attributwert (Funktion) übereinstimmt ) hat keinen Funktionsnamen, functionSchlüsselwörter und Attributnamen können weggelassen werden

// 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}}

Dynamisch berechnete Attributnamen

Attributnamen können dynamisch geändert werden

let key="name"
let obj={[key]:"jack"} // {name:'jack'}

Übersicht

let key="name"
let age=23
let person={
    [key]:"jack",
    getName(){return "jack"},
    age
} // {name:"jack",getName:function(){return "jack"},age:23}

Verwenden Sie Babel, um den

Quellcode

let key="name"
let age=23
let person={
    [key]:"jack",
    getName(){return "jack"},
    age
}

zu übersetzen. Nach der Übersetzung kann festgestellt werden, dass Object.defineProperty zum Implementieren von

"use strict";
var _person;
function _defineProperty(obj, key, value) {
 if (key in obj) {
  Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });
   } else {
    obj[key] = value; 
    } 
    return obj; 
    }

var key = "name";
var age = 23;
var person = (_person = {}, _defineProperty(_person, key, "jack"), _defineProperty(_person, "getName", function getName() {
    return "jack";
}), _defineProperty(_person, "age", age), _person);

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in erweiterte Objektliterale in ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!