es6物件增加新的屬性是什麼

es6物件增加新的屬性是「name」。name屬性可以獲取物件上方法（函數）的名字，例「getName() {console.log(this.name);}」；函數直接呼叫name就會返回函數名，而字面量物件上的方法也是函數，因此也有name屬性。如果物件的方法是一個Symbol值，那麼name屬性返回的是帶中括號的Symbol的描述內容。

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

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
登入後複製

注意 1：屬性名錶示式與屬性簡潔表示，不能同時使用，會報錯。

// 報錯
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物件增加新的屬性是什麼的詳細內容，更多請關注TW511.COM其它相關文章！