What are the new attributes added to es6 objects?

The new attribute added to the es6 object is "name". The name attribute can get the name of the method (function) on the object, for example "getName() {console.log(this.name);}"; the function will return the function name when calling name directly, and the method on the literal object is also a function , so there is also a name attribute. If the object's method is a Symbol value, then the name attribute returns the description content of the Symbol in brackets.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

Objects are a very important data structure in JavaScript. ES6 greatly expands objects and makes them simpler to use. The new attribute added to the es6 object is "name".

The name attribute of the object method

Have you ever thought about how to get the name of the method on the object? ES6 adds the name attribute of the function. If the function calls name directly, the function name will be returned. Methods on literal objects are also functions and therefore also have a name attribute. The following example:

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

person.getName.name // "getName"

In the above code, the name attribute of the getName() method returns the function name (i.e. method name)

There are two types Special case:

• Function The function created by the constructor, the name attribute returns "anonymous"; the function created by the

• bind method, the name attribute returns "bound" plus the name of the original function.

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

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

If the object method is a Symbol value, then the name attribute returns the description content of the Symbol in brackets.

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

Extended knowledge: Improvements in attributes in es6 objects

1. Concise attribute expression

ES6 allows direct writing of variables and functions as properties and methods of objects

1.1 Abbreviation of property values

In ES5 we know that the value of a property when defining an object is It must be written. According to ES6, if the attribute name and the defined variable name are the same, you can directly write the variable name in the object as an item in the object. As follows:

var name = 'imooc';

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

obj1 and obj2 in the above code have the same meaning. The variable name can be written directly in curly brackets. At this time, the attribute name is the variable name, and the attribute value is the variable value.

Let’s look at an example of returning an object in a function:

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

It can be seen from the above code that in our daily development, it is very convenient and useful to assemble data. .

1.2 Abbreviation of methods in objects

In addition to properties that can be abbreviated, methods in objects can also be abbreviated, and they are more concise and clear. Let’s look at the following example:

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

In the above code, when defining a method on an object in ES5, you need to use the function keyword to define it, while ES6 directly omits the colon and function keyword. You can see that using ES6's concise approach is more expressive.

This method is more convenient when exporting modules in Node. Let’s look at the following example:

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

In the above code, we define a person object and expose several methods to operate the person object. When exporting, we can see that ES6 does not need to be repeated to write variable names in a more concise manner, thus expressing the methods provided by the module more concisely.

2. Concise attribute expression

There are generally two ways to define the properties of an object in JavaScript. As follows:

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

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

In the above code, method one directly uses identifiers to perform assignment operations. This is our more commonly used assignment operation, but if the attribute is an expression, you can use method two to convert the expression The formula is written in square brackets.

But when defining a literal object in ES5, you cannot use expressions as properties of the literal object. Properties can only be defined through the first method (identifier).

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

ES6 has expanded the properties of objects to cover more scenarios. Properties can be defined in the form of variables, as follows:

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

In the above code, the literal object Attributes can be placed in square brackets, and the brackets can be variables or expressions. This undoubtedly extends the function of attributes and makes programming more flexible.

In addition, the attribute can also be a string with spaces. When getting the value, you can use the string directly in brackets or use variables. As follows:

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

Expressions can also be used to define method names on objects.

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

Note 1: Property name expression and property concise representation cannot be used at the same time, and an error will be reported.

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

The above code will have syntax errors

Note 2: The attribute name must be of string type. If the attribute expression is an object, toString() will be called first. Convert to string before use.

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

The two variables defined in the above code are of object type, and will become [object Object] with the same attributes when toString() is called. Therefore, the later attributes overwrite the previous ones.

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

The above is the detailed content of What are the new attributes added to es6 objects?. For more information, please follow other related articles on the PHP Chinese website!