ES6 dalam tindakan: simbol dan kegunaan mereka

ES2015 memperkenalkan beberapa ciri bahasa yang diharapkan oleh pemaju, tetapi juga beberapa ciri yang tidak diketahui yang belum jelas, seperti simbol.

Simbol adalah jenis data primitif baru, tag unik yang dijamin tidak bertentangan dengan simbol lain. Dalam pengertian ini, anda boleh memikirkan simbol sebagai sejenis uuid (pengenal unik universal). Mari kita lihat bagaimana simbol berfungsi dan apa yang boleh kita lakukan dengannya.

mata utama

ES6 memperkenalkan simbol jenis data primitif baru, yang merupakan tag unik yang tidak pernah bertentangan dengan simbol lain, menjadikannya alternatif yang baik untuk rentetan atau integer sebagai pemalar kelas/modul.
Simbol boleh digunakan sebagai kekunci atribut objek, menyediakan kekunci unik yang tidak bertentangan dengan atribut atau kaedah sedia ada, dan tidak akan memasukkan kunci ini apabila objek bersiri.
Simbol awam adalah sifat yang telah ditetapkan dari fungsi simbol yang digunakan untuk menyesuaikan tingkah laku ciri bahasa tertentu (seperti iterators) dan melaksanakan ciri -ciri baru.
ES6 mengandungi pendaftaran simbol global yang membolehkan penyimpanan dan pengambilan simbol dalam konteks pelaksanaan yang berbeza seperti dokumen dan iframes tertanam atau pekerja perkhidmatan.

Buat simbol baru

Membuat simbol baru sangat mudah, hanya panggil fungsi simbol. Perhatikan bahawa ini hanya fungsi standard, bukan pembina objek. Cuba memanggilnya dengan hasil pengendali baru dalam TypeError. Setiap kali anda memanggil fungsi simbol, anda mendapat nilai baru dan unik.

const foo = Symbol();
const bar = Symbol();

foo === bar // false

Anda juga boleh membuat simbol yang ditandakan dengan lulus rentetan sebagai parameter pertama. Tag tidak menjejaskan nilai simbol, tetapi berguna untuk debugging, dan tag akan dipaparkan jika kaedah simbol ToString () dipanggil. Simbol berganda boleh dibuat dengan tag yang sama, tetapi ini tidak mempunyai kelebihan, yang boleh menyebabkan kekeliruan.

let foo = Symbol('baz');
let bar = Symbol('baz');

foo === bar // false
// console.log(foo); // Symbol(baz)

Tujuan simbol

simbol adalah pengganti yang baik untuk rentetan atau bilangan bulat sebagai pemalar kelas/modul:

class Application {
  constructor(mode) {
    switch (mode) {
      case Application.DEV:
        // 设置开发环境的应用程序
        break;
      case Application.PROD:
        // 设置生产环境的应用程序
        break;
      default:
        throw new Error('无效的应用程序模式：' + mode);
    }
  }
}

Application.DEV = Symbol('dev');
Application.PROD = Symbol('prod');

// 使用示例
const app = new Application(Application.DEV);

Rentetan dan integer bukan nilai unik; Menggunakan simbol membolehkan kita lebih yakin dengan nilai yang disediakan.

Satu lagi penggunaan simbol yang menarik adalah sebagai kunci atribut objek. Sekiranya anda pernah menggunakan objek JavaScript sebagai peta hash (array persatuan dalam istilah PHP dan kamus dalam istilah python), anda akan biasa menggunakan notasi kurungan persegi untuk mendapatkan/menetapkan sifat:

const foo = Symbol();
const bar = Symbol();

foo === bar // false

Gunakan notasi kurungan persegi, kita juga boleh menggunakan simbol sebagai kekunci atribut. Terdapat beberapa kelebihan untuk melakukan ini. Pertama, anda boleh memastikan bahawa kekunci berasaskan simbol tidak pernah bertentangan, tidak seperti kekunci rentetan yang mungkin bertentangan dengan sifat atau kaedah objek yang sedia ada. Kedua, mereka tidak disebutkan dalam ... dalam gelung dan diabaikan oleh fungsi seperti object.keys (), object.getownPropertyNames (), dan json.stringify (). Ini menjadikan mereka ideal untuk sifat yang anda tidak mahu sertakan apabila bersiri objek.

let foo = Symbol('baz');
let bar = Symbol('baz');

foo === bar // false
// console.log(foo); // Symbol(baz)

Walau bagaimanapun, perlu diperhatikan bahawa menggunakan simbol sebagai kunci tidak menjamin privasi. Terdapat alat baru yang tersedia untuk membolehkan anda mengakses kekunci harta berasaskan simbol. Object.GetownPropertySymbols () mengembalikan pelbagai kunci berasaskan simbol, manakala refleksi.ownKeys () mengembalikan pelbagai kunci, termasuk simbol.

class Application {
  constructor(mode) {
    switch (mode) {
      case Application.DEV:
        // 设置开发环境的应用程序
        break;
      case Application.PROD:
        // 设置生产环境的应用程序
        break;
      default:
        throw new Error('无效的应用程序模式：' + mode);
    }
  }
}

Application.DEV = Symbol('dev');
Application.PROD = Symbol('prod');

// 使用示例
const app = new Application(Application.DEV);

simbol awam

Ciri -ciri utama simbol sebenarnya tidak dapat dilihat sebelum ES6, mereka sesuai untuk menambah ciri -ciri baru kepada jenis JavaScript yang sedia ada tanpa melanggar keserasian ke belakang. Simbol yang dipanggil "awam" adalah sifat yang dipratentukan dari fungsi simbol yang digunakan untuk menyesuaikan tingkah laku ciri bahasa tertentu dan untuk melaksanakan fungsi baru seperti iterators.

simbol.iterator adalah simbol awam yang digunakan untuk memberikan kaedah khas kepada objek yang membolehkan lelaran:

const data = [];

data['name'] = 'Ted Mosby';
data['nickname'] = 'Teddy Westside';
data['city'] = 'New York';

jenis rentetan, array, typedArray, peta, dan set mempunyai kaedah simbol lalai yang dipanggil apabila menggunakan contoh-contoh jenis ini dalam ... gelung atau apabila menggunakan pengendali lanjutan. Penyemak imbas juga mula menggunakan kekunci simbol.iterator untuk membolehkan melangkah ke atas struktur DOM (seperti nodelist dan htmlcollection) dengan cara yang sama.

Pendaftaran global Spesifikasi

juga mentakrifkan pendaftaran simbol runtime, yang bermaksud anda boleh menyimpan dan mengambil simbol dalam konteks pelaksanaan yang berbeza, seperti antara dokumen dan pekerja iframe atau perkhidmatan yang tertanam.

simbol.for (kunci) mengambil simbol untuk kunci yang diberikan dari pendaftaran. Jika kunci tidak wujud simbol, simbol baru dikembalikan. Seperti yang anda harapkan, panggilan seterusnya ke kunci yang sama akan mengembalikan simbol yang sama.

simbol.keyfor (simbol) membolehkan anda mengambil kunci untuk simbol yang diberikan. Memanggil kaedah dengan simbol yang tidak wujud dalam pendaftaran akan kembali tidak ditentukan:

const user = {};
const email = Symbol();

user.name = 'Fred';
user.age = 30;
user[email] = 'fred@example.com';

Object.keys(user); // ['name', 'age']
Object.getOwnPropertyNames(user); // ['name', 'age']
JSON.stringify(user); // {"name":"Fred","age":30}

kes pengguna

Dalam beberapa kes penggunaan, menggunakan simbol dapat memberikan kelebihan. Satu kes penggunaan yang telah disebutkan dalam artikel sebelumnya adalah apabila anda ingin menambah harta "tersembunyi" ke objek yang tidak akan dimasukkan apabila objek disiarkan.

Pengarang perpustakaan juga boleh menggunakan simbol untuk menambah sifat atau kaedah dengan selamat kepada objek klien tanpa bimbang tentang menimpa kekunci sedia ada (atau kunci mereka ditimpa oleh kod lain). Sebagai contoh, komponen widget (seperti pemilih tarikh) sering diasaskan menggunakan pelbagai pilihan dan perlu disimpan di negeri di suatu tempat. Ia tidak sesuai untuk memberikan contoh widget ke objek elemen DOM kerana harta itu mungkin bertentangan dengan kunci lain. Menggunakan kekunci berasaskan simbol boleh bijak mengelakkan masalah ini dan memastikan bahawa contoh widget anda tidak ditimpa. Untuk melihat lebih terperinci di blog Mozilla Hacks post ES6 secara mendalam: Simbol.

Sokongan penyemak imbas

Jika anda ingin bereksperimen dengan simbol, sokongan untuk pelayar arus perdana agak baik. Seperti yang dapat anda lihat, versi semasa Chrome, Firefox, Microsoft Edge, dan Opera semuanya menyokong jenis simbol secara asli, serta Android 5.1 dan iOS 9 pada peranti mudah alih. Jika anda perlu menyokong penyemak imbas yang lebih tua, anda juga boleh menggunakan polyfill.

Kesimpulan

Walaupun sebab utama untuk memperkenalkan simbol nampaknya memudahkan penambahan ciri -ciri baru kepada bahasa tanpa melanggar kod yang ada, mereka mempunyai beberapa kegunaan yang menarik. Semua pemaju sekurang -kurangnya mempunyai pemahaman asas tentang mereka dan akrab dengan simbol awam yang paling biasa digunakan dan kegunaan mereka.

Soalan Lazim Mengenai Simbol ES6

Apakah penggunaan praktikal simbol ES6?

simbol ES6 adalah jenis data primitif baru yang diperkenalkan dalam ES6 (ECMAScript 6). Mereka adalah jenis data yang unik dan tidak berubah yang boleh digunakan sebagai pengenal untuk sifat objek. Mereka boleh digunakan untuk membuat sifat peribadi untuk objek, melaksanakan konsep pengaturcaraan peringkat meta, dan mengelakkan konflik penamaan. Mereka juga boleh digunakan untuk menentukan tingkah laku berulang adat untuk objek.

Bagaimana untuk membuat simbol baru dalam JavaScript?

Anda boleh menggunakan fungsi simbol () untuk membuat simbol baru. Fungsi ini mengembalikan simbol unik setiap kali ia dipanggil, walaupun anda lulus hujah yang sama kepadanya. Sebagai contoh,

di sini, simbol1 dan simbol2 adalah simbol yang berbeza, walaupun parameter "simbol" yang sama diserahkan kepada fungsi simbol (). let symbol1 = Symbol('symbol'); let symbol2 = Symbol('symbol');

Bagaimana menggunakan simbol sebagai kunci objek?

Anda boleh menggunakan simbol dalam kurungan persegi sebagai kunci objek. Sebagai contoh,

di sini, simbol "simbol" digunakan sebagai kunci dalam objek "obj". let symbol = Symbol('key'); let obj = {}; obj[symbol] = 'value';

Apakah pendaftaran simbol global dalam JavaScript?

Pendaftaran Simbol Global adalah persekitaran bersama di mana anda boleh membuat, mengakses, dan berkongsi simbol di seluruh alam yang berbeza seperti iframes atau pekerja perkhidmatan. Anda boleh membuat simbol dalam pendaftaran global menggunakan simbol.for (kunci) dan mengaksesnya menggunakan simbol.keyfor (simbol).

Bagaimana menggunakan simbol dengan objek?

Anda boleh menggunakan simbol dengan objek untuk membuat kekunci unik. Ini berguna untuk mengelakkan konflik penamaan, kerana simbol sentiasa unik. Sebagai contoh, let symbol = Symbol('key'); let obj = { [symbol]: 'value' }; di sini, simbol "simbol" digunakan sebagai kunci dalam objek "obj".

Bolehkah simbol ditukar kepada rentetan?

Ya, anda boleh menukar simbol ke rentetan dengan memanggil kaedah ToString () di atasnya. Ini mengembalikan rentetan dalam format "Simbol (Penerangan)", di mana "Keterangan" adalah penerangan pilihan yang anda lalui ke fungsi simbol ().

boleh simbol digunakan dengan tatasusunan?

Ya, anda boleh menggunakan simbol dengan tatasusunan. Sebagai contoh, anda boleh menggunakan simbol sebagai kunci atribut yang unik untuk menyimpan metadata mengenai array. Walau bagaimanapun, simbol tidak termasuk dalam harta panjang array, dan kebanyakan kaedah array tidak mengembalikannya.

Bolehkah simbol digunakan dengan fungsi?

Ya, anda boleh menggunakan simbol dengan fungsi. Sebagai contoh, anda boleh menggunakan simbol sebagai kunci atribut yang unik untuk menyimpan metadata mengenai fungsi. Walau bagaimanapun, simbol tidak termasuk dalam sifat panjang fungsi, dan kebanyakan kaedah fungsi tidak mengembalikannya.

boleh simbol digunakan dengan kelas?

Ya, anda boleh menggunakan simbol dengan kelas. Sebagai contoh, anda boleh menggunakan simbol sebagai kunci atribut yang unik untuk menyimpan metadata mengenai kelas. Walau bagaimanapun, simbol tidak termasuk dalam harta panjang kelas, dan kebanyakan kaedah kelas tidak mengembalikannya.

boleh simbol digunakan dengan rentetan?

Ya, anda boleh menggunakan simbol dengan rentetan. Sebagai contoh, anda boleh menggunakan simbol sebagai kunci atribut yang unik untuk menyimpan metadata mengenai rentetan. Walau bagaimanapun, simbol tidak termasuk dalam harta panjang rentetan, dan kebanyakan kaedah rentetan tidak mengembalikannya.

Atas ialah kandungan terperinci ES6 dalam tindakan: simbol dan kegunaan mereka. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!