“This is the third day of my participation in the First Challenge 2022, for more details: First Challenge 2022”.

Hello everyone, I am L student, this is the third article of my ES6 summary. This paper summarizes the basic use of Symbol.

What is the Symbol

Symbol is a new data type in ES6 that translates to symbols. Why do you need it 😕?

Prior to ES6, object attribute names were strings, which could easily cause attribute name conflicts. For example, if we have an object and we are not sure what attributes it has inside, but we want to add a new attribute and value to it, it will easily cause conflicts, resulting in overwriting the original internal attributes.

We can see that the object obj’s name property value is overwritten and becomes lala👇.

var obj = {
  name: 'haha'.friend: {name: 'xixi'},
  age: 18
}

obj.name = 'lala'
console.log(obj); // { name: 'lala', friend: { name: 'xixi' }, age: 18 }
Copy the code

So using Symbol, it generates a unique value. Even if values are created multiple times, they are different.

Basic use of Symbol

The Symbol value is created using the Symbol function. We can see that each time we create the Symbol value is not equal.

const s1 = Symbol(a)const s2 = Symbol(a)console.log(s1 === s2); // false
Copy the code

We can pass in a description when creating a Symbol value, which is a new feature in ES2019 (ES10).

const s3 = Symbol('aaa')
console.log(s3.description); // aaa
Copy the code

In ES6, we can use Symbol values in addition to strings for attribute names of objects.

We usually use Symbol to represent unique attribute names in objects.

Method 1: Assigning the name of an object property

const s1 = Symbol(a)const s2 = Symbol(a)const obj = {}
obj[s1] = 'aaa'
obj[s2] = 'bbb'

console.log(obj);
Copy the code

DefineProperty: Object.defineProperty

const s4 = Symbol(a)Object.defineProperty(obj, s4, {
  enumerable: true.configurable: true.writable: true.value: 'ccc'
})
Copy the code

Use it directly when defining literals

const obj1 = {
  [s1]: 'qqq',
  [s2]: 'www'
}

obj1[s4] = 'eee'

console.log(obj1[s1], obj1[s2]);
Copy the code

Attribute name using the Symbol value as an Object, we unable to through the Object. The keys (obj) or Object. GetOwnPropertyNames (obj) to get the Symbol value.

console.log(Object.keys(obj)); / / []
console.log(Object.getOwnPropertyNames(obj)); / / []
Copy the code

So how do we get the Symbol value? We can use the Object. GetOwnPropertySymbols (obj) to get all the key Symbol.

const skeys = Object.getOwnPropertySymbols(obj)
for(const skey of skeys) {
  console.log(obj[skey]);
}
Copy the code

For (key) is used to create the same Symbol value. For (key) is used to create the same Symbol value.

const sx = Symbol.for('xxx') 
const sy = Symbol.for('xxx')
console.log(sx === sy); // true
Copy the code

Get the Symbol’s key via symbol.keyfor (Symbol).

const key = Symbol.keyFor(sx)
console.log(key); // xxx

const sz = Symbol.for(key)
console.log(sx === sz); // true
Copy the code

Previous articles 👇👇👇

Summary of ES6 Common Knowledge Points (2)

Summary of ES6 Common Knowledge Points (1)

The 2021 year-end summary of an entry-level front-end programming debugger