Apakah atribut baharu yang ditambahkan pada objek es6?

Atribut baharu yang ditambahkan pada objek es6 ialah "nama". Atribut nama boleh mendapatkan nama kaedah (fungsi) pada objek, contohnya "getName() {console.log(this.name);}"; kaedah pada objek literal juga merupakan fungsi, jadi terdapat juga atribut nama. Jika kaedah objek ialah nilai Simbol, maka atribut nama mengembalikan kandungan perihalan Simbol dalam kurungan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Objek ialah struktur data yang sangat penting dalam JavaScript ES6 sangat mengembangkan objek dan menjadikannya lebih mudah untuk digunakan. Atribut baharu yang ditambahkan pada objek es6 ialah "nama".

Atribut nama kaedah objek

Pernahkah anda berfikir tentang cara mendapatkan nama kaedah pada objek? ES6 menambah atribut nama fungsi Jika fungsi memanggil nama secara langsung, nama fungsi akan dikembalikan. Kaedah pada objek literal juga merupakan fungsi dan oleh itu juga mempunyai atribut nama. Contoh berikut:

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

person.getName.name // "getName"

Dalam kod di atas, atribut getName() kaedah name mengembalikan nama fungsi (iaitu nama kaedah)

Terdapat dua kes khas:

• Fungsi Fungsi yang dicipta oleh pembina, atribut nama mengembalikan "tanpa nama"; , atribut nama mengembalikan "terikat" ditambah dengan nama fungsi asal .

• Jika kaedah objek ialah nilai Simbol, maka atribut
mengembalikan kandungan perihalan Simbol dalam kurungan segi empat sama.

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

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

name

Pengetahuan lanjutan: Penambahbaikan atribut dalam objek es6

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

Ungkapan atribut ringkas

ES6 membenarkan penulisan terus pembolehubah dan fungsi sebagai atribut dan kaedah objek1.1 Singkatan nilai atribut

Dalam ES5 kita tahu bahawa apabila mentakrifkan objek, atribut The nilai mesti ditulis Menurut ES6, jika nama atribut dan nama pembolehubah yang ditentukan adalah sama, nama pembolehubah boleh ditulis secara langsung dalam objek sebagai item dalam objek. Seperti berikut:

obj1 dan obj2 dalam kod di atas mempunyai maksud yang sama. Nama pembolehubah boleh ditulis terus dalam kurungan kerinting. Pada masa ini, nama atribut ialah nama pembolehubah, dan nilai atribut ialah nilai pembolehubah.

Mari kita lihat contoh mengembalikan objek dalam fungsi:

var name = 'imooc';

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

Seperti yang dapat dilihat daripada kod di atas, dalam pembangunan harian kita, adalah sangat mudah untuk memasang data. Berguna.

1.2 Singkatan kaedah dalam objek

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

Selain sifat yang boleh disingkatkan, kaedah dalam objek juga boleh disingkatkan, dan ia lebih ringkas dan jelas. Mari lihat contoh berikut:

Dalam kod di atas, apabila mentakrifkan kaedah pada objek dalam ES5, anda perlu menggunakan kata kunci fungsi untuk mentakrifkannya, manakala ES6 secara langsung menghilangkan titik bertindih dan fungsi kata kunci. Anda dapat melihat bahawa menggunakan pendekatan ringkas ES6 adalah lebih ekspresif.

Kaedah ini lebih mudah apabila mengeksport modul dalam Node. Mari lihat contoh berikut:

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

Dalam kod di atas, kami mentakrifkan objek seseorang dan mendedahkan beberapa kaedah untuk mengendalikan objek orang tersebut Apabila mengeksport, dapat dilihat bahawa ES6 tidak Ia adalah perlu untuk menulis nama pembolehubah berulang kali untuk menyatakan kaedah yang disediakan oleh modul dengan lebih ringkas.

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

2. Ungkapan atribut ringkas

Secara amnya terdapat dua cara untuk mentakrifkan atribut objek dalam JavaScript. Seperti berikut:

Dalam kod di atas, kaedah satu secara langsung menggunakan pengecam untuk operasi tugasan Ini ialah operasi tugasan kami yang lebih biasa digunakan, tetapi jika atribut itu adalah ungkapan, anda boleh menggunakan kaedah dua, Tulis ungkapan dalam kurungan segi empat sama.

Walau bagaimanapun, apabila mentakrifkan objek literal dalam ES5, anda tidak boleh menggunakan ungkapan sebagai atribut objek literal Anda hanya boleh mentakrifkan atribut melalui kaedah pertama (pengecam).

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

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

ES6 telah mengembangkan sifat objek untuk merangkumi lebih banyak senario Sifat boleh ditakrifkan dalam bentuk pembolehubah, seperti berikut:

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

Tersurat dalam kod Atribut di atas. objek dalam kuantiti boleh diletakkan dalam kurungan segi empat sama, dan kurungan boleh menjadi pembolehubah atau ungkapan. Ini sudah pasti memanjangkan fungsi atribut dan menjadikan pengaturcaraan lebih fleksibel.

Selain itu, atribut juga boleh menjadi rentetan dengan ruang Apabila mendapat nilai, anda boleh menggunakan rentetan secara langsung dalam kurungan segi empat sama atau menggunakan pembolehubah. Seperti berikut:

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

Ungkapan juga boleh digunakan untuk mentakrifkan nama kaedah pada objek.

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

Nota 1: Ungkapan nama atribut dan perwakilan ringkas atribut tidak boleh digunakan pada masa yang sama dan ralat akan dilaporkan.

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

Kod di atas akan mempunyai ralat sintaks

Nota 2: Nama atribut mestilah daripada jenis rentetan Jika ungkapan atribut ialah objek, toString() akan dipanggil dahulu. Tukar objek kepada rentetan sebelum menggunakannya.

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

Dua pembolehubah yang ditakrifkan dalam kod di atas adalah daripada jenis objek, dan akan menjadi [objek Objek] dengan atribut yang sama apabila toString() dipanggil. Oleh itu, sifat-sifat yang kemudian menggantikan yang sebelumnya.

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

Atas ialah kandungan terperinci Apakah atribut baharu yang ditambahkan pada objek es6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!