Rumah  >  Artikel  >  hujung hadapan web  >  Analisis ringkas pembelajaran jenis data javascript Jenis simbol

Analisis ringkas pembelajaran jenis data javascript Jenis simbol

青灯夜游
青灯夜游ke hadapan
2022-03-18 11:01:521861semak imbas

Artikel ini akan membawa anda melalui jenis data baharu ES6: Simbol Mari kita bincangkan tentang cara mengisytiharkan dan menggunakan jenis Simbol Saya harap ia akan membantu semua orang.

Analisis ringkas pembelajaran jenis data javascript Jenis simbol

Simbol ialah jenis data primitif baharu yang mewakili keunikan. Ia adalah jenis data ketujuh dalam JavaScript. Enam yang lain ialah: undefined, null, String, Number, Object

Kaedah pengisytiharan

Nilai simbol dijana melalui fungsi Simbol. Nama atribut objek boleh mempunyai dua jenis, satu ialah rentetan asal dan satu lagi ialah jenis Simbol baharu . Nama atribut adalah daripada jenis Simbol dan unik, memastikan ia tidak akan bercanggah dengan nama atribut lain. [Cadangan berkaitan: Tutorial pembelajaran javascript]

let s1=Symbol()
let s2=Symbol()
console.log(s1)
//Symbol()
console.log(s2)
//Symbol()
console.log(s1===s2)
//false

//Symbol函数能接受字符串作为参数,表示对Symbol实例的描述
let s1=Symbol('xxx')
let s2=Symbol('hhh')
console.log(s1)
//Symbol(xxx)
console.log(s2)
//Symbol(hhh)
console.log(s1===s2)
//false复制代码

Arahan baharu tidak boleh digunakan sebelum fungsi Simbol dan ralat akan dilaporkan. Ini kerana Simbol yang dihasilkan ialah nilai jenis primitif, bukan objek. Iaitu, kerana nilai Simbol bukan objek, sifat tidak boleh ditambah. Bersamaan dengan rentetan khas.

Symbol.for() mentakrifkan Symbol secara global

Symbol.for() menerima rentetan sebagai parameter dan kemudian mencari sama ada parameter digunakan sebagai nilai Simbol nama. Jika ada, kembalikan nilai Simbol ini, jika tidak buat nilai Simbol baharu yang dinamakan dengan rentetan ini dan daftarkannya secara global.

let s1 = Symbol.for('xxx')
let s2 = Symbol.for('xxx')
console.log(s1 === s2) // true


function foo(){
    return Symbol.for('hello')
}
const x=foo()
const y=Symbol.for('hello')
console.log(x === y)//true

Symbol.for() dan Symbol() akan menjana Simbol baharu. Perbezaannya ialah yang pertama akan didaftarkan dalam persekitaran global untuk carian, manakala yang kedua tidak akan. Symbol.for() tidak akan mengembalikan nilai jenis Simbol baharu setiap kali ia dipanggil, sebaliknya, ia akan menyemak dahulu sama ada kunci yang diberikan sudah wujud, dan kemudian mencipta nilai baharu jika ia tidak wujud.

Symbol.keyFor()

Kaedah Symbol.keyFor() mengembalikan kunci nilai jenis Simbol yang didaftarkan.

const s1 = Symbol('foo')
console.log(Symbol.keyFor(s1)) // undefined

const s2 = Symbol.for('foo')
console.log(Symbol.keyFor(s2)) // foo

Senario aplikasi

Sebagai nama atribut

Memandangkan nilai Simbol tidak sama, ini bermakna Nilai simbol boleh digunakan sebagai pengecam dan digunakan dalam nama atribut objek untuk memastikan atribut dengan nama yang sama tidak akan muncul. Ini berguna apabila objek terdiri daripada berbilang modul, untuk mengelakkan kunci daripada ditimpa atau ditimpa secara tidak sengaja.

const grade={
    张三:{address:'qqq',tel:'111'},
    李四:{address:'aaa',tel:'222'},
    李四:{address:'sss',tel:'333'},
}
console.log(grade)
//张三: {address: "qqq", tel: "111"} 李四: {address: "sss", tel: "333"}
//对象的key值不能重复 如果有重复 后面的value值就会覆盖前面的


//使用Symbol解决,相当于一个独一无二的字符串
const stu1=Symbol('李四')
const stu2=Symbol('李四')
console.log(stu1===stu2)
//false
const grade={
    [stu1]:{address:'aaa',tel:'222'},
    [stu2]:{address:'sss',tel:'333'},
}
console.log(grade)
//李四:{address:'sss',tel:'222'} 李四:{address:'sss',tel:'333'}
console.log(grade[stu1])
//李四:{address:'sss',tel:'222'}
console.log(grade[stu2])
//李四:{address:'sss',tel:'333'}

Atribut traversal

const sym=Symbol('imooc')
class User{
    constructor(name){
        this.name=name
        this[sym]='imooc.com'
    }
    getName(){
        return this.name+this[sym]
    }
}
const user=new User('www')

//for in的方法不能遍历到Symbol属性 像被隐藏了
for(let key in user){
    console.log(key)//name 
}

//Object.keys(obj)方法也不能遍历到Symbol属性
for(let key of Object.keys(user)){
    console.log(key)//name 
}

//Object.getOwnPropertySymbols(obj)只能获取到Symbol属性
for(let key of Object.getOwnPropertySymbols(user)){
    console.log(key)//Symbol(imooc) 
}

//Reflect.ownKeys(obj)对象的属性都能获取到
for(let key of Reflect.ownKeys(user)){
    console.log(key)
    //name 
    //Symbol(imooc) 
}

Hapuskan rentetan ajaib

Rentetan ajaib merujuk kepada, dalam A rentetan atau nilai tertentu yang muncul beberapa kali dalam kod dan membentuk gandingan kuat dengan kod. Kod dengan gaya yang baik harus cuba menghilangkan rentetan ajaib dan menggantikannya dengan pembolehubah dengan makna yang jelas.

function getArea(shape) {
    let area = 0
    switch (shape) {
        case 'Triangle':
            area = 1
            break
        case 'Circle':
            area = 2
            break
    }
    return area
}
console.log(getArea('Triangle'))
//Triangle和Circle就是魔术字符串。多次出现,与代码形成了“强耦合”,不利于后面的修改和维护。

const shapeType = {
    triangle: Symbol(),
    circle: Symbol()
}

function getArea(shape) {
    let area = 0
    switch (shape) {
        case shapeType.triangle:
            area = 1
            break
        case shapeType.circle:
            area = 2
            break
    }
    return area
}
console.log(getArea(shapeType.triangle))

Saya seorang pemula hadapan jika terdapat sebarang kandungan yang salah dalam artikel, sila beri saya nasihat dan perbincangan!

[Tutorial video berkaitan yang disyorkan: bahagian hadapan web]

Atas ialah kandungan terperinci Analisis ringkas pembelajaran jenis data javascript Jenis simbol. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:juejin.cn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam