Symbol能干什么！为什么要掌握它?

image

说到Symbol就先来说下 js中的基础数据类型 string、number、boolean、null、undefined，Symbol就是js中的第六种基础数据类型

用一句话来描述Symbol,那就是独一无二!

Symbol的使用

---

基本使用

consts1 = Symbol('song');

consts2 = Symbol('song');

// Symbol中的标识一般放number、string

console.log(s1 === s2);// Symbol声明的变量不相等

Symbol作为key

consts1 = Symbol('song');

letobj = {

        [s1]:'song',// es6语法[] 可以将symbol的值作为属性

        age:18

}

for(letkeyinobj){// for循环无法遍历symbol属性

        console.log(obj[key])

}

// Reflect.ownKeys方法可以拿到所有的key属性

Reflect.ownKeys(obj).forEach(key=>{

        console.log(obj[key]);

})

Symbol.for

---

我们上面说symbol是独一无二的,但是有的时候我希望可以复用声明过的symbol，可以使用for语法，如果symbol不存在则声明，如果存在则将创建过的symbol返回回来！

consts1 = Symbol.for('song');

consts2 = Symbol.for('song');

console.log(s1 === s2);

console.log(Symbol.keyFor(s2));// 可以通过keyFor 获取symbok的key

Symbol元编程

---

元编程：可以去对原生js的操作进行修改，说白了就是可以更改原生js的行为

ES6提供了11个内置的Symbol值

1.Symbol.hasInstance

重写instanceof默认行为

constinstance = {

        [Symbol.hasInstance](value){

                return'a'invalue

        }

}

// 当调用 instanceof 方法，会默认调用instance上的hasInstance方法

console.log({a:1}instanceofinstance)

2.Symbol.isConcatSpreadable

重写数组的展开行为

constarr = [1,2,3];

arr[Symbol.isConcatSpreadable] =false;

console.log(arr.concat([1,2,3]));

3.Symbol.match / split / search / replace

重写字符串的match,split,search方法

constobj = {

        [Symbol.match](value){

                returnvalue.length ===3

        }

}

console.log('abc'.match(obj));

4.Symbol.species

创建衍生对象时,指定构造函数

classMyArray extendsArray{

        constructor(...args){

                super(...args);

        }

        static get [Symbol.species](){

                returnArray;// 创建衍生对象会用Array作为构造函数

        }

}

constarr =newMyArray(1,2,3);

constnewArr = arr.map(item=>item*2);

console.log(newArrinstanceofMyArray);// 默认衍生对象也是MyArray的实例

5.Symbol.toPrimitive

重写数据类型转化

constobj = {

        [Symbol.toPrimitive](type){// type number string default

                return123;

        }

}

console.log(obj*123);

6.Symbol.toStringTag

重写toString方法

constobj = {

        [Symbol.toStringTag]:"xxx"

};

console.log(Object.prototype.toString.call(obj));// [object xxx]

7.Symbol.unscopables

重写哪些属性被with所排除

console.log(Array.prototype[Symbol.unscopables]);// 哪些方法不能再with中使用

with(Array.prototype){// 直接调用数组原型上的方法

        forEach.call([1,2,3],element => {

                console.log(element)

        });

}

classMyClass {

        eat() {}

        get [Symbol.unscopables]() {

                return{ eat:true};// 不能在with下使用

        }

}

with(MyClass.prototype) {

        console.log(eat);

}

还差最后一个Symbol.iterator，留个小尾巴，大家自己踩一踩看看这个有什么用！！这个面试经常会被问哦~

到此我们将Symbol的用法整个过了一遍，当然一般元编程在开发的时候还是很少用到呢！不过我们已经具备改写js语言本身的能力啦

欢迎持续关注公众号：「前端优选」

加我微信：webyouxuan

技术持续更新，请持续关注