Quels sont les nouveaux attributs ajoutés aux objets es6 ?

Le nouvel attribut ajouté aux objets es6 est "nom". L'attribut name peut obtenir le nom de la méthode (fonction) sur l'objet, par exemple "getName() {console.log(this.name);}" ; la fonction renverra le nom de la fonction lors de l'appel direct du nom, et le La méthode sur l'objet littéral est également une fonction, il existe donc également un attribut name. Si la méthode de l'objet est une valeur Symbol, alors l'attribut name renvoie le contenu de la description du Symbol entre parenthèses.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

Les objets sont une structure de données très importante en JavaScript ES6 étend considérablement les objets et les rend plus simples à utiliser. Le nouvel attribut ajouté à l'objet es6 est "name".

L'attribut name de la méthode objet

Avez-vous déjà pensé à la façon d'obtenir le nom d'une méthode sur un objet ? ES6 ajoute l'attribut name de la fonction. Si la fonction appelle directement name, le nom de la fonction sera renvoyé. Les méthodes sur les objets littéraux sont également des fonctions et ont donc également un attribut name. L'exemple suivant :

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

person.getName.name // "getName"

Dans le code ci-dessus, l'attribut name de la méthode getName() renvoie le nom de la fonction (c'est-à-dire le nom de la méthode) getName() 方法的 name 属性返回函数名（即方法名）

有两种特殊情况：

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

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

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

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

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

Il existe deux cases :

• Function La fonction créée par le constructeur, l'attribut name renvoie "anonymous"
• La fonction créée par Avec la méthode bind, l'attribut name renvoie "bound" plus le nom de la fonction d'origine.

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

Si la méthode objet est une valeur de symbole, alors l'attribut name renvoie le contenu de la description du symbole entre parenthèses.

var name = 'imooc';

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

Connaissances étendues : améliorations des attributs dans les objets es6

1. Expression d'attribut concise

ES6 permet l'écriture directe de variables et de fonctions en tant qu'attributs et méthodes d'objets

1.1 Abréviation des valeurs d'attribut

Dans ES5 nous savons que la valeur de l'attribut doit être écrite lors de la définition d'un objet. Dans ES6, il est stipulé que si le nom de l'attribut et le nom de la variable définie sont les mêmes, le nom de la variable peut être écrit directement dans l'objet comme l'objet d'un élément. Comme suit :

// 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 et obj2 dans le code ci-dessus ont la même signification. Le nom de la variable peut être écrit directement entre accolades. À l'heure actuelle, le nom de l'attribut est le nom de la variable et la valeur de l'attribut est la valeur de la variable.

Regardons un exemple de retour d'un objet dans une fonction :

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: ƒ}

Comme vous pouvez le voir dans le code ci-dessus, il est très pratique et utile d'assembler des données dans notre développement quotidien.

1.2 Abréviation des méthodes dans les objets

En plus des propriétés qui peuvent être abrégées, les méthodes dans les objets peuvent également être abrégées, et elles sont plus concises et claires. Regardons l'exemple suivant :

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

Dans le code ci-dessus, lors de la définition d'une méthode sur un objet dans ES5, vous devez utiliser le mot-clé function pour le définir, tandis qu'ES6 omet directement les deux-points et le mot-clé function. Vous pouvez voir que l’utilisation de l’approche concise d’ES6 est plus expressive.

Cette méthode est plus pratique lors de l'exportation de modules dans Node. Regardons l'exemple suivant :

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

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

Dans le code ci-dessus, nous définissons un objet personne et exposons plusieurs méthodes pour faire fonctionner l'objet personne lors de l'exportation, nous pouvons voir qu'ES6 n'a pas besoin d'écrire le nom des variables à plusieurs reprises, donc de manière plus concise. exprimant les méthodes fournies par le module.

2. Expression d'attribut concise

Il existe généralement deux façons de définir les attributs d'un objet en JavaScript. Comme suit :

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

Dans le code ci-dessus, la première méthode utilise directement l'identifiant pour effectuer l'opération d'affectation. Il s'agit de notre opération d'affectation la plus couramment utilisée, mais si l'attribut est une expression, vous pouvez utiliser la méthode deux pour écrire l'expression dans. entre parenthèses.

Mais lors de la définition d'un objet littéral dans ES5, vous ne pouvez pas utiliser d'expressions comme attributs de l'objet littéral. Vous ne pouvez définir des attributs que via la première méthode (identifiant).

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

ES6 a étendu les propriétés des objets pour couvrir davantage de scénarios. Les propriétés peuvent être définies sous forme de variables, comme suit :

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

Dans le code ci-dessus, les propriétés de l'objet littéral peuvent être placées entre crochets, le ceux entre crochets peuvent être des variables ou des expressions. Cela étend sans aucun doute la fonction des attributs et rend la programmation plus flexible.

De plus, l'attribut peut également être une chaîne avec des espaces Lors de l'obtention de la valeur, vous pouvez utiliser la chaîne directement entre parenthèses ou utiliser des variables. Comme suit :

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

Les expressions peuvent également être utilisées pour définir des noms de méthodes sur des objets.

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

Remarque 1 : Les expressions de nom d'attribut et les représentations concises d'attribut ne peuvent pas être utilisées en même temps et une erreur sera signalée. 🎜

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

🎜Le code ci-dessus comportera des erreurs de syntaxe🎜🎜Remarque 2 : le nom de l'attribut doit être de type chaîne. Si l'expression de l'attribut est un objet, toString() sera d'abord appelé pour convertir l'objet en chaîne, puis continuer. utiliser. 🎜

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"

🎜Les deux variables définies dans le code ci-dessus sont de type objet et deviendront [object Object] avec les mêmes attributs lorsque toString() sera appelé. Par conséquent, les derniers attributs écrasent les précédents. 🎜

注意 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视频教程】

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!