ES6 learning road 5 symbol

brief introduction

The emergence of new methods or things , It always needs to be accompanied by the ability to solve some problems .Symbol The emergence of data types is to solve the problem that variable attribute names are the same .

Code up

    const s = Symbol()
    console.log(s) // Symbol()
    console.log(typeof s) // symbol

This creates a Symbol Variable of type s, My understanding here is , hold s As a Symbol Variable of type .

Symbol Function that can accept arguments , Accepting parameters is just a distinction

    const s = Symbol('foo')
    const t = Symbol('bar')
    console.log(s) // Symbol(foo)
    console.log(t) // Symbol(bar)

it is to be noted that Symbol The return value of the function is a new memory space ,s,t,p,q Are all reference types

    const s = Symbol()
    const t = Symbol()
    console.log(s === t) // false
    const p = Symbol('foo')
    const q = Symbol('foo')
    console.log(p === q) // false

symbol Value cannot be operated on with other types of values

    const s = Symbol()
    console.log(s + '')  // Cannot convert a Symbol value to a string

but symbol What can be displayed is converted to a string

    const s = Symbol()
    console.log(String(s))  // Symbol()

symbol It can also be converted to a Boolean value , To tell you the truth, I don't think it's useful here

    const s = Symbol()
    console.log(Boolean(s))  // true

obtain Symbol Description of

obtain symbol Can be described in description attribute

    const s = Symbol('foo')
    console.log(s.description) // foo

There are three ways to make symbol As property name

    const s = Symbol('foo')
    const obj = {
    }
     The first way to write it 
    // obj[s] = 1
     The second way 
   /* Object.defineProperty(obj, s, { value: 1 }) */
     The third way 
/* const obj = { [s]: 1 } */

Learn here , I am right. symbol The understanding of , Take the example above ,s It's equivalent to a symbol Variable of type , Also a key value , however s It cannot be understood as a string , Because the above values are not used . Operator .

Eliminate magic strings

My understanding is , Use... In functions if Statement or switch Statement to determine equality , such as if(data === 'xiaoyuan'), If this xiaoyuan The string has been judged many times , So it's the magic string , Such a trick , Not conducive to program maintenance , It's really bad for , For example, in the future xiaoyuan To change to another string , There are a lot of changes to be made . The best thing is to make it a variable , Describe it in code as follows .

    const username = {
    
      xiaoyuan: 'xiaoyuan'
    }
    function getUserInfoByUserName(name) {
    
      if (name === username.xiaoyuan) {
    
        return 'success'
      } else {
    
        throw new Error('fail')
      }
    }
    getUserInfoByUserName(username.xiaoyuan)

If the product manager tells you , Each name of the user is different , that key by xiaoyuan Of value Value is actually not so important , At this time, you just need to ensure that each user value If the value is different . So you can use symbol

    const username = {
    
      xiaoyuan: Symbol()
    }
    function getUserInfoByUserName(name) {
    
      if (name === username.xiaoyuan) {
    
        return 'success'
      } else {
    
        throw new Error('fail')
      }
    }
    getUserInfoByUserName(username.xiaoyuan)

Object.getOwnPropertySymbols() Method to get symbol Attribute array

symbol The value of type cannot be traversed by ordinary traversal , such as Object.keys Method ,for in,for of wait , obtain symbol Properties need to be used Object.getOwnPropertySymbols() Method

Example :

    const xiaoyuan = Symbol('xiaoyuan')
    const dayuan = Symbol('dayuan')
    const username = {
    
      [xiaoyuan]: 1,
      [dayuan]: 2
    }
    for (item in username) {
    
      console.log(item) //  Nothing 
    }
    console.log(Object.getOwnPropertySymbols(username)) // [Symbol(xiaoyuan), Symbol(dayuan)]

Feeling time

See here , My heart is in great pain , Because I think this knowledge point is too boring , And I haven't met in the project at present . So learning is very painful , I looked at the progress bar , And half symbol knowledge , Oh my god , Hold on to it , After learning, I will brush Tiktok to reward myself .

Symbol.for(), Symbol.keyfor() Method

Symbol.for()

Code to show the difference

    const demo1 = Symbol('foo')
    const demo2 = Symbol('foo')
    console.log(demo1 === demo2) // false
    const demo3 = Symbol.for('bar')
    const demo4 = Symbol.for('bar')
    console.log(demo3 === demo4) // true

My understanding is ,Symbol.for Method can also create a Symbol Variable of type , But with Symbol() The difference is , When it is created, it will be registered globally ,

in other words , Use Symbol.for('bar') When the method is used , It will look in the code first , See if you have declared this in your previous code Symbol.for('bar'), If there is , Just use the previous one , To put it bluntly demo3,demo4 The pointer to the heap is the same . A more common understanding is to see if there is any in the stack area , If you have one, take the pointer and use it .

Symbol.keyfor()

Symbol.keyfor() Method returns with Symbol.for Of the created attribute key word , It's the string you passed in

  <script>
    const demo1 = Symbol('foo')
    const demo3 = Symbol.for('bar')
    console.log(Symbol.keyFor(demo1))// undefined
    console.log(Symbol.keyFor(demo3)) // bar

Built in Symbol value

Symbol Yes 11 A native built-in value , To put it mildly, those big guys helped you do 11 individual js Built in Symbol Variable

1.Symbol.hasInstance

Determine whether an instance belongs to this class , It can be used instanceof keyword , When using instanceof When the operator , Will call... In the class Symbol.hasInstance The way to point , here instanceof The operator has 2 Usage

    class Demo {
    
      static [Symbol.hasInstance](foo) {
    
        console.log('hello') // hello
      }
    }
    const demo = new Demo()
    console.log(demo instanceof Demo) // false

    class Demo {
    
      [Symbol.hasInstance](foo) {
    
        console.log('hello') // hello
      }
    }
    const demo = new Demo()
    console.log([1, 2, 3] instanceof demo) // false

I don't understand this place , Didn't learn well , I'll add later .

2.Symbol.isConcatSpreadable

Please refer to my other article for this place js Of concat Method
To be added ...

Blog

Welcome to my blog www.smartxy.cc