es6对象增加新的属性怎么使用

今天小编给大家分享一下es6对象增加新的属性怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

es6对象增加新的属性是“name”。name属性可以获取对象上方法（函数）的名字，例“getName() {console.log(this.name);}”；函数直接调用name就会返回函数名，而字面量对象上的方法也是函数，因此也有name属性。如果对象的方法是一个Symbol值，那么name属性返回的是带中括号的Symbol的描述内容。

JavaScript 中对象是非常重要的数据结构，ES6 对对象进行了极大的扩展，使用上也更加简洁。其中es6对象增加新的属性是“name”。

对象方法的 name 属性

你有没有想过怎么获取对象上方法的名字？ES6 增加了函数的 name 属性，函数直接调用 name 会返回函数名。字面量对象上的方法也是函数，因此也有 name 属性。如下实例：

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

person.getName.name // "getName"

上面代码中，getName() 方法的 name 属性返回函数名（即方法名）


有两种特殊情况：

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

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

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

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

如果对象的方法是一个 Symbol 值，那么 name 属性返回的是带中括号的 Symbol 的描述内容。


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

扩展知识：es6对象中属性的改进

1、简洁的属性表达

ES6 允许直接写入变量和函数，作为对象的属性和方法

1.1 属性值简写

在 ES5 中我们知道，在定义对象时属性的值是必须要写的，在 ES6 中规定，如果属性名和定义的变量名是一样的，就可以在对象中直接写这个变量名作为对象中的一项。如下：

var name = 'imooc';

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

上面代码中的 obj1 和 obj2 是一样的意思。变量 name 可以直接写在大括号中。这时，属性名就是变量名，属性值就是变量值。


下面我们来看一个在函数中返回一个对象的实例：

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

上面中的代码可以看出，在我们平常开发中，组装数据时是非常方便、有用的。


1.2 对象中方法的简写

除了属性可以简写，对象中的方法也是可以简写的，而且更加简洁明了。我们来看下面的例子：

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

上面的代码中，ES5 中定义一个对象上的方法时需要使用 function 关键字来定义，而 ES6 则直接省略了 冒号和 function 关键字。可以看出使用 ES6 这种简洁的方式更具表达力。


在 Node 中进行模块导出时，这种方式更加方便。我们看下面的例子：

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

上面的代码中，我们定义了一个 person 对象，并向外暴露了若干方法用来操作 person 对象，在导出的时候可以看出，ES6 不需要重复地去写变量名，从而更简洁地表达了模块所提供的方法。


2、简洁的属性表达

在 JavaScript 中定义对象的属性，一般有两种方法。如下：

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

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

上面的代码中，方法一直接使用标识符进行赋值操作，这是我们比较常用的赋值操作，但是如果属性是一个表达式时，则可以使用方法二，把表达式写在中括号中。


但是在 ES5 定义字面量对象时不能使用表达式作为字面量对象的属性，只能通过第一种方式（标识符）来定义属性。

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

ES6 对对象的属性进行了扩展，可以覆盖更多的场景，属性可以使用变量的形式来定义，如下：


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

另外，属性也可以是一个带空格的字符串，在取值时在中括号中可以直接使用字符串，也可以使用变量。如下：

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

表达式还可以用于定义对象上的方法名。


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

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

注意 2： 属性名必须是字符串类型的，如果属性表达式是一个对象，则会先调 toString() 先将对象转为字符串，然后才进行使用。

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

上面代码中定义了两个变量都是对象类型的，在调用 toString() 时会变为 [object Object] 属性相同。所以，后面的属性把前面的覆盖了。


注意 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 对象上的值。


以上就是“es6对象增加新的属性怎么使用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注蜗牛博客行业资讯频道。