Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Apakah penggunaan simbol dalam es6

Apakah penggunaan simbol dalam es6

WBOY
WBOYasal
2022-04-25 18:26:161940semak imbas

Dalam es6, Simbol boleh digunakan sebagai nama atribut, pembolehubah yang ditakrifkan atau pemalar untuk mewakili nilai unik. Dua pembolehubah yang diisytiharkan melalui Simbol tidak boleh sama : "const name=Symbol("value")".

Apakah penggunaan simbol dalam es6

Persekitaran pengendalian tutorial ini: sistem Windows 10, ECMAScript versi 6.0, komputer Dell G3.

Apakah penggunaan simbol dalam es6

Apakah Simbol?

Simbol ialah jenis data yang baru ditambah dalam es6, yang mewakili nilai keunikan . Dalam es5, kami membahagikan jenis data kepada jenis data asas (rentetan, nombor, Boolean, tidak ditentukan, nol) dan jenis data rujukan (Objek Jenis data Simbol baharu dalam es6 dibahagikan kepada jenis data asas

Sebab). adakah terdapat jenis data sedemikian?

//别人给了你一个定义好的对象
var obj = {
    name: "xiaoqiang",
    showName: function(){alert(1)}
}
//你拿到对象想给这对象添加新的属性和方法的时候,可能会创建出一个name属性和showName方法
obj.name = "nodeing"
obj.showName = function(){alert(2)}

//这个时候,新增加的方法和属性就会去把原有的方法覆盖,这样就产生了冲突

Memandangkan sifat dan kaedah objek terdiri daripada rentetan, mungkin terdapat konflik apabila menambahkan kaedah dan sifat baharu dalam es6, jenis data baharu ditambahkan untuk mewakili nilai unik

Nilai unik boleh dibuat melalui fungsi Simbol Setiap kali fungsi Simbol dilaksanakan, objek dikembalikan

let s1 = Symbol()
let s2 = Symbol()

console.log(s1 === s2) //false 说明创建出来的s1和s2 并不是相同的
console.log(s1, s2); //Symbol() Symbol()

Dalam kod di atas, nilai yang dicetak adalah semua Simbol(), Bagaimana. bolehkah kita bezakan siapa s1 dan siapa s2? Kita boleh menyelesaikan masalah ini dengan menghantar parameter

//传入的参数就是对当前Symbol的描述,用来区分Symbol
let s1 = Symbol("s1")
let s2 = Symbol("s2")
console.log(s1, s2);  //Symbol(s1) Symbol(s2)

senario aplikasi

Simbol biasanya digunakan untuk menetapkan nama sifat atau kaedah objek. Elakkan atribut atau kaedah yang baru ditambah daripada bercanggah dengan atribut atau kaedah asal

let name = Symbol("name");
let show = Symbol("show");

let obj = {
    //设置属性
    [name]: 'xiaoqiang',
    [show](){alert(1)}
};
//取值
console.log(obj[name]);
//调用方法
obj[show]()

Perlu diperhatikan di sini bahawa nilai nama mestilah dalam [] untuk menunjukkan bahawa ia adalah pembolehubah yang boleh diubah

Nota

Nota 1: Parameter dalam Simbol hanyalah perihalan Simbol dan tidak mempunyai makna lain oleh itu, walaupun huraian adalah sama, Simbol adalah berbeza

Di sini. anda boleh meneka kembalinya fungsi Simbol Nilai ialah objek

console.log(Symbol("nodeing") === Symbol("nodeing")) //false

Nota 2: Fungsi Simbol tidak boleh dipanggil menggunakan kata kunci Baharu

let s1 = new Symbol(); //报错

Nota 3: Simbol jenis tidak boleh ditukar kepada nombor semasa penukaran jenis

let s1 = Symbol("s1");
console.log(String(s1));  //Symbol(s1)
console.log(Boolean(s1));  //true
console.log(Number(s1)) //报错

Nota 4: Simbol tidak boleh melakukan sebarang operasi (mungkin nilai pulangan tidak boleh dikendalikan)

console.log(Symbol("s1") + "nodeing") //报错
console.log(Symbol("s1") - 100) //报错

Nota 5: Apabila Simbol digunakan sebagai atribut atau kaedah objek, jika ia tidak diberikan kepada Untuk pembolehubah, tiada cara untuk mendapatkan nilai

let obj = {
    //设置属性
    [Symbol("name")]: 'xiaoqiang'
};
//取值
console.log(obj[Symbol("name")]);

Nota 6: Simbol tidak boleh dilalui oleh untuk dalam gelung

let name = Symbol('name')
let age = Symbol('age')
let obj = {
    a: 1,
    b: 2,
    [name]: 'xiaoqiang',
    [age]: 18
};
for(let attr in obj){
    console.log(attr,obj[attr])  //a b
}

Anda boleh menggunakan Object.getOwnPropertySymbols untuk melihat semua sifat simbol pada objek

console.log(Object.getOwnPropertySymbols(obj))

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web ]

Atas ialah kandungan terperinci Apakah penggunaan simbol dalam es6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:Adakah peta kaedah dalam es6?Artikel seterusnya:Adakah peta kaedah dalam es6?