The basic data types in JS are string, number, Boolean, null and undefined. Symbol is the sixth basic data type in JS

B: We have a Symbol.

---

The use of the Symbol

The basic use

const s1 = Symbol('song');
const s2 = Symbol('song'); String console.log(s1 === s2); Const s1 = Symbol(const s1 = Symbol();'song');
    let obj = {
        [s1]:'song', // es6 syntax [] We can use the value of symbol as attribute age:18}for(let key in obj){ // forOwnKeys (obj). ForEach (key=>{// reflect.ownkeys (obj). console.log(obj[key]); })Copy the code

Symbol.for

We said above that the symbol is unique, but sometimes I want to reuse the declared symbol, can use the for syntax, if the symbol does not exist then declare, if it does exist then return the created symbol!

const s1 = Symbol.for('song');
const s2 = Symbol.for('song'); console.log(s1 === s2); console.log(Symbol.keyFor(s2)); // The symbok key can be obtained by keyForCopy the code

---

Symbol metaprogramming

Metaprogramming: you can modify the operations of native JS, in other words, you can change the behavior of native JS

ES6 provides 11 built-in Symbol values

1.Symbol.hasInstance

Override the instanceof default behavior

const instance = {
    [Symbol.hasInstance](value){
        return 'a' in{a:1} instanceof instance console.log({a:1} instanceof instance)Copy the code

2.Symbol.isConcatSpreadable

Overrides the expansion behavior of an array

Const arr = [1, 2, 3]; arr[Symbol.isConcatSpreadable] =false; The console. The log (arr. Concat ([1, 2, 3]));Copy the code

3.Symbol.match/split/search/replace Overwrites the string’s match,split,search methods

const obj = {
    [Symbol.match](value){
        return value.length === 3
    }
}
console.log('abc'.match(obj));
Copy the code

4.Symbol.species

When you create a derived object, specify a constructor

class MyArray extends Array{ constructor(... args){ super(... args); } static get [Symbol.species](){returnArray; }} const arr = new MyArray(1,2,3); const newArr = arr.map(item=>item*2); console.log(newArr instanceof MyArray); // The default derived object is also an instance of MyArrayCopy the code

5.Symbol.toPrimitive

Overwrite data type conversion

const obj = {
    [Symbol.toPrimitive](type{/ /type number string default
        return 123;
    }
}
console.log(obj*123);
Copy the code

6.Symbol.toStringTag

Override the toString method

const obj = {
  [Symbol.toStringTag]: "xxx"
};
console.log(Object.prototype.toString.call(obj)); // [object xxx]
Copy the code

7.Symbol.unscopables

Override which attributes are excluded by with

console.log(Array.prototype[Symbol.unscopables]); With (array.prototype){// Call the Array prototype method directlyforEach.call([1,2,3],element => {
        console.log(element)
    });
}

class MyClass {
  eat() {}
  get [Symbol.unscopables]() {
    return { eat: true}; }} with (myclass.prototype) {console.log(eat); }Copy the code

Still need the last Symbol. Iterator, leave a small tail, everyone step on it to see what this has!! This is often asked in an interview

To this we will use the Symbol of the whole over, of course, the general metaprogramming in the development of time is rarely used! But we already have the ability to rewrite the JS language itself!

---

Welcome to continue to follow the public account: “front-end optimization” plus my wechat: WebyouXuan technology continues to update, please continue to follow……