Une brève introduction aux littéraux d'objet améliorés dans ES6

Cet article vous apporte une brève introduction aux littéraux d'objet améliorés dans ES6. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Présentation

Dans ES6, la syntaxe des littéraux d'objet a été améliorée

Déclarations de propriété plus courtes

Si le nom de la propriété et la référence de la valeur de la propriété La variable les noms sont cohérents, vous pouvez directement omettre

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

Déclaration de fonction plus courte

Si le nom de l'attribut est cohérent avec le nom de la fonction de la valeur de l'attribut (fonction) ou la valeur de l'attribut (fonction) n'a pas de nom de fonction, peut être omisfunctionMots clés et noms d'attributs

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

Noms d'attributs calculés dynamiquement

Les noms d'attributs peuvent être modifiés dynamiquement

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

Aperçu

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

Utilisez babel pour traduire le

code source

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

Après la traduction, vous pouvez constater qu'il est implémenté en utilisant Object.defineProperty<.>

"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);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!