This is the sixth day of my participation in Gwen Challenge

preface

When the interviewer asks this question, it takes into account the interviewer’s curiosity for new knowledge, and also tests the interviewer’s understanding and generalization when he encounters new knowledge.

Read the following chapters to give the interviewer a good understanding of you.

Why is Symbol included in the new standard?

In your project, you also want to get the user English name in the object when you call common.getUsername (), an object method written by some big guy. So you add getUserName to the object, overwriting the original method and generating an error.

While this situation is extreme and would not occur to a normal front end engineer, the program is rigorous, and if it can make mistakes, it will make mistakes.

That’s why Symbol was born.

The characteristics of the Symbol

  1. The value of Symbol for the same parameter is not equal.
let a = Symbol('name')
let b = Symbol('name')

a === b // false
Copy the code
  1. Symbol(Element)whenElementIs a primitive type, a string is returned. whenElementIs an object typeElement.toString().
let bool = Symbol(true)
let object = Symbol({name: 'kev1nzh'})
let array = Symbol([1.2.3.4.5])

console.log(bool) // Symbol(true)
console.log(object) // 'Symbol([object Object])'
console.log(array) / / 'Symbol (1, 2, 3, 4, 5)'
Copy the code

The use of Symbol

  1. Applied to objectskey. Make variables and methods in objects becomeSymbolTo ensure the uniqueness of attributes.
const studentName = Symbol('name') // Symbol('name') returns string
const getStudentName = Symbol('getStudentName') // Symbol('getStudentName') returns a string

const student = {
    [studentName]: 'kev1nzh',
    [getStudentName]: function () { console.log(this[studentName])}
}

student[getStudentName]() //'kev1nzh'
// When I create a new method on student, it will not overwrite the previous method.
student[Symbol('getStudentName')] // undefined 
// Write the new method on the object after naming the Symbol of the new method.
Copy the code
  1. If we’re strong, we want to change what the big guy wrotegetStudentNameHow to do? Let’s take a look atSymbol.for().
const studentName = Symbol.for('name') // Symbol('name') returns string
const getStudentName = Symbol.for('getStudentName') // Symbol('getStudentName') returns a string

const student = {
    [studentName]: 'kev1nzh',
    [getStudentName]: function () { console.log(this[studentName])}
}

student[Symbol.for('getStudentName')] = () = > console.log('marven')
student[getStudentName]() //'marven'
Copy the code

Symbol(‘name’) => Symbol. For (‘name’)

Just remember that when creating with symbol.for (), there is one more step than direct Symbol(), which is to search the global environment for the incoming key and return the existing Symbol type if it exists in the global environment. If not, the new type is created and the return value is generated based on the passed type, just as Symbol() does.

Points to pay attention to.

  1. callSymbol(), cannot be added in front ofnewCommand, becauseSymbol()It returns data of the original type.
const name = Symbol('kev1nzh')
console.log(typeof name) // Symbol('kev1nzh')
Copy the code
  1. How do I know what’s in the objectSymbol()Method or variable?
const name = Symbol('name')
const age = Symbol('age')

const student = {
    [name]: 'student',
    [age]: 20
}

const studentParams = Object.getOwnPropertySymbols(student)
console.log(studentParams) // [Symbol(name), Symbol(age)]
Copy the code
  1. Symbol.keyFor(), how to obtainSymbolThe type ofkey?
const studentName = Symbol.for('name') 
console.log(Symbol.keyFor(studentName)) // 'name'
Copy the code

The last

Call it a day.

Interviewer: Do you know Callback Hell?

Interviewer: What’s the difference between react and Vue?

Interviewer: Do you know anything about ES6?

Interviewer: Do you know anything about Webpack?

Interviewer: Have you ever written a loader and separated modules while using WebPack?

Interviewer: How to correctly identify data types in Javascript?

If you have any gains or questions, please comment below, for praise! Thanks for watching.