Welche neuen Attribute werden den ES6-Objekten hinzugefügt?

Das neue Attribut, das den es6-Objekten hinzugefügt wurde, ist „Name“. Das Namensattribut kann den Namen der Methode (Funktion) für das Objekt abrufen, zum Beispiel „getName() {console.log(this.name);}“; die Funktion gibt den Funktionsnamen zurück, wenn sie den Namen direkt aufruft Die Methode für das Literalobjekt ist ebenfalls eine Funktion, daher gibt es auch ein Namensattribut. Wenn die Methode des Objekts ein Symbolwert ist, gibt das Namensattribut den Beschreibungsinhalt des Symbols in Klammern zurück.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

Objekte sind eine sehr wichtige Datenstruktur in JavaScript. ES6 erweitert Objekte erheblich und macht sie einfacher zu verwenden. Das dem es6-Objekt hinzugefügte neue Attribut ist „name“.

Das Namensattribut der Objektmethode

Haben Sie jemals darüber nachgedacht, wie Sie den Namen einer Methode für ein Objekt erhalten? ES6 fügt das Namensattribut der Funktion hinzu. Wenn die Funktion den Namen direkt aufruft, wird der Funktionsname zurückgegeben. Methoden auf Literalobjekten sind ebenfalls Funktionen und verfügen daher auch über ein Namensattribut. Das folgende Beispiel:

var person = {
  name: "Jack",
  getName() {
    console.log(this.name);
  },
};

person.getName.name // "getName"

Im obigen Code gibt das Attribut name der Methode getName() den Funktionsnamen (d. h. Methodennamen) zurück. getName() 方法的 name 属性返回函数名（即方法名）

有两种特殊情况：

• Function 构造函数创造的函数，name 属性返回 “anonymous”；

• bind 方法创造的函数，name 属性返回 “bound” 加上原函数的名字。

(new Function()).name // "anonymous"

var doSomething = function() {
  // todo
};
doSomething.bind().name // "bound doSomething"

如果对象的方法是一个 Symbol 值，那么 name

Es gibt zwei Besonderheiten Fälle:

• Funktion Die vom Konstruktor erstellte Funktion, das Namensattribut gibt „anonymous“ zurück
• Die von erstellte Funktion Bei der bind-Methode gibt das Namensattribut „bound“ plus den Namen der ursprünglichen Funktion zurück.

const key1 = Symbol('description content');
const key2 = Symbol();
let obj = {
  [key1]() {},
  [key2]() {},
};
obj[key1].name // "[description content]"
obj[key2].name // ""

Wenn die Objektmethode ein Symbolwert ist, dann gibt das Attribut name den Beschreibungsinhalt des Symbols in Klammern zurück.

var name = 'imooc';

// ES5
var obj1 = {
  name: name,
}
// ES6
var obj2 = {
  name,
}

Erweitertes Wissen: Verbesserungen bei Attributen in es6-Objekten

1. Prägnanter Attributausdruck

ES6 ermöglicht das direkte Schreiben von Variablen und Funktionen als Attribute und Methoden von Objekten

1.1 Abkürzung von Attributwerten

In ES5 wissen wir, dass der Wert des Attributs beim Definieren eines Objekts geschrieben werden muss. In ES6 ist festgelegt, dass der Variablenname direkt in das Objekt geschrieben werden kann, wenn der Attributname und der definierte Variablenname identisch sind das Objekt eines Artikels. Wie folgt:

// ES5
function getObj(x, y) {
  return {x: x, y: y};
}
// 等同于 ES6
function getObj(x, y) {
  return {x, y};
}

getObj(1, 2) // {x: 1, y: 2}

obj1 und obj2 im obigen Code haben dieselbe Bedeutung. Der Variablenname kann direkt in geschweifte Klammern geschrieben werden. Zu diesem Zeitpunkt ist der Attributname der Variablenname und der Attributwert der Variablenwert.

Sehen wir uns ein Beispiel für die Rückgabe eines Objekts in einer Funktion an:

const name = '张三'
// ES5
var person = {
  name: name,
  getName: function() {
    console.log('imooc')
  }
};

// ES6
var person = {
  name,
  getName() {
    console.log(this.name)
  }
};
console.log(person)	// {name: "imooc", getName: ƒ}

Wie Sie dem obigen Code entnehmen können, ist es in unserer täglichen Entwicklung sehr praktisch und nützlich, Daten zusammenzustellen.

1.2 Abkürzung von Methoden in Objekten

Zusätzlich zu Eigenschaften, die abgekürzt werden können, können auch Methoden in Objekten abgekürzt werden, und sie sind prägnanter und klarer. Schauen wir uns das folgende Beispiel an:

var person = {};

function getName () {
  return person.name
}

function setName () {
  person.name = '李四'
}

function clear () {
  person = {};
}

// ES5 写法
module.exports = {
  getName: getName
  setName: setName,
  clear: clear
};
// ES6写法
module.exports = { getName, setName, clear };

Im obigen Code müssen Sie beim Definieren einer Methode für ein Objekt in ES5 das Funktionsschlüsselwort verwenden, um es zu definieren, während ES6 den Doppelpunkt und das Funktionsschlüsselwort direkt weglässt. Sie sehen, dass der prägnante Ansatz von ES6 ausdrucksstärker ist.

Diese Methode ist praktischer beim Exportieren von Modulen in Node. Schauen wir uns das folgende Beispiel an:

// 方法一
obj.name = 'imooc';

// 方法二
obj['a' + 'ge'] = 7;

Im obigen Code definieren wir ein Personenobjekt und stellen mehrere Methoden zum Betreiben des Personenobjekts bereit. Beim Exportieren können wir sehen, dass ES6 nicht wiederholt Variablennamen schreiben muss, was eine präzisere Darstellung ermöglicht Ausdrücken der vom Modul bereitgestellten Methoden.

2. Prägnanter Attributausdruck

Es gibt im Allgemeinen zwei Möglichkeiten, die Attribute eines Objekts in JavaScript zu definieren. Wie folgt:

var obj = {
  name: 'imooc',
  age: 7
}

Im obigen Code verwendet Methode 1 direkt Bezeichner, um Zuweisungsoperationen durchzuführen. Dies ist unsere häufiger verwendete Zuweisungsoperation. Wenn das Attribut jedoch ein Ausdruck ist, können Sie Methode 2 verwenden, um den Ausdruck einzugeben Klammern.

Bei der Definition eines Literalobjekts in ES5 können Sie jedoch keine Ausdrücke als Attribute des Literalobjekts verwenden. Sie können Attribute nur über die erste Methode (Bezeichner) definieren.

var key = 'name';
var obj = {
  [key]: 'imooc',
  ['a' + 'ge']: 7
}

ES6 hat die Eigenschaften von Objekten erweitert, um weitere Szenarien abzudecken. Eigenschaften können wie folgt in Form von Variablen definiert werden:

var str = 'first name';
var obj = {
  ['I love imooc']: 'ES6 Wiki',
  [str]: 'Jack'
}
console.log(obj['I love imooc'])	// ES6 Wiki
console.log(obj[str])	// Jack
console.log(obj['first name'])	// Jack

Im obigen Code können die Eigenschaften im Literalobjekt in eckige Klammern gesetzt werden diejenigen in eckigen Klammern können Variablen oder Ausdrücke sein. Dies erweitert zweifellos die Funktion von Attributen und macht die Programmierung flexibler.

Darüber hinaus kann das Attribut auch eine Zeichenfolge mit Leerzeichen sein. Beim Abrufen des Werts können Sie die Zeichenfolge direkt in Klammern verwenden oder Variablen verwenden. Wie folgt:

var person = {
  name: 'Jack',
  ['get' + 'Name']() {
    console.log(this.name)
  }
};
console.log(person.getName())	// Jack

Ausdrücke können auch zum Definieren von Methodennamen für Objekte verwendet werden.

// 报错
var name = 'Jack';
var age = 18;
var person = { [name] };
// Uncaught SyntaxError: Unexpected token '}'

Hinweis 1: Attributnamenausdrücke und prägnante Attributdarstellungen können nicht gleichzeitig verwendet werden und es wird ein Fehler gemeldet. 🎜

var key1 = {name: 'imooc'};
var key2 = {age: 7};
var obj = {
  [key1]: 'value content 1',
  [key2]: 'value content 2',
}
console.log(obj)	// {[object Object]: "value content 2"}

🎜Der obige Code weist Syntaxfehler auf🎜🎜Hinweis 2: Wenn der Attributausdruck ein Objekt ist, wird zuerst toString() aufgerufen, um das Objekt in einen String umzuwandeln, und dann fortfahren verwenden. 🎜

var keys = ['imooc', '7'];
var obj = {
  [keys]: 'value content',
}
console.log(key.toString())	// "imooc,7"
console.log(obj)		// {imooc,7: "value content"}
console.log(obj[keys])	// "value content"

🎜Die beiden im obigen Code definierten Variablen sind vom Objekttyp und werden beim Aufruf von toString() zu [Objektobjekt] mit denselben Attributen. Daher überschreiben die späteren Attribute die vorherigen. 🎜

注意 3： 如果属性的表达式是数组时，则和对象不一样。数组在 toString() 后会变成一个字符串，所以对象属性的表达式就是一个字符串。

var keys = ['imooc', '7'];
var obj = {
  [keys]: 'value content',
}
console.log(key.toString())	// "imooc,7"
console.log(obj)		// {imooc,7: "value content"}
console.log(obj[keys])	// "value content"

上面的代码中可以看出来，数组 keys 在 toString() 得到了 imooc,7 作为 obj 的属性。另外，我们也可以直接使用 keys 获取 obj 对象上的值。

【推荐学习：javascript视频教程】

Das obige ist der detaillierte Inhalt vonWelche neuen Attribute werden den ES6-Objekten hinzugefügt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!