ES6基础----------Symbol的使用

Pluto & Ethereal

已于 2023-12-26 11:06:53 修改

阅读量596

点赞数

文章标签： es6 javascript 前端开发语言

于 2023-12-19 09:30:00 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_69190490/article/details/135054926

版权

Symbol是ES6新增的数据类型，它的值是唯一的，主要用于解决命名冲突的问题.当我们使用一些外部的对象时，如果想往里面添加一个自己的方法就可以使用 Symbol 来防止名字冲突以下是对Symbol的一些讲解：

一、symbol本身是构造函数，可以直接进行实例化

symbol是唯一的不会有一样值，即使命名的值一样，也不会相同

可以转换为布尔类型

Eg:

       let a= Symbol();

       let b= Symbol();

       console.log(a);//Symbol()

       console.log(a==b);//false     --- a 和 b 是唯一的不会有一样值，即使命名的值一样，也不会相同

二、Symbol()类型不能进行算数运算

Eg:

 let a= Symbol();

 console.log(a+10);//报错   --不能进行运算

三、Symbol()类型不能直接进行字符串添加

Eg:

  let a= Symbol();

 console.log(a+"你好");//报错   --不能进行字符串相加

四、如果要Symbol进行字符串拼接，需要使用 toString()

Symbol可以转换为String类型

Eg:

  let a= Symbol();      

 console.log(a.toString()+"字符串运算");//Symbol()字符串运算

五、Symbol()主要用于写第三方库

按照之前的写法，再进行再次赋值时，会覆盖原有对象一开始定义的值

Eg:

       let obj={

            name:"张三",

            age:30

        }

        obj.name="李四";//修改了对象对应的值，会覆盖之前的值

        console.log(obj.name);//李四

用Symbol写第三方库（插件），则不会冲突覆盖之前的值

这样在别人使用添加属性时，不会和原有的属性重名，解决命名冲突值覆盖的问题

Eg:

       let test={
            name:Symbol("name"),
            age:Symbol("age"),
            address:Symbol("adresss"),//("")--为了标识
         }
         let a={
            [test.name]:"原有的内容",
            [test.age]:100,
            [test.address]:"北京"
         }
         console.log(a);//{Symbol(): '原有的内容', Symbol(): 100, Symbol(): '北京'}
         a.name="李四";//修改对象 a 对应的值，不会改到 a 对象，而是修改了定义的 test 对象
         console.log(a);//{Symbol(name): '原有的内容', Symbol(age): 100, Symbol(adresss): '北京'}
         console.log(a[test.name]);//原有的内容  ---得到 a 其中属性的值

六、遍历内容 iterator

使用 for...in 遍历对象时，不能遍历到 Symbol 类型的值

出现的值是，修改的定义属性的值，修改多少出现多少

Eg:

     let test={
            name:Symbol("name"),
            age:Symbol("age"),
            address:Symbol("adresss"),//("")--为了标识
         }
         let a={
            [test.name]:"原有的内容",
            [test.age]:100,
            [test.address]:"北京"
         }
      
         a.name="李四";//修改值
     
      for(let i  in  a){
                console.log(i);//name
            }

Object.getOwnPropertySymbols用于遍历 Symbol 的值

出现一开始定义属性的值

Eg:

  let test={
            name:Symbol("name"),
            age:Symbol("age"),
            address:Symbol("adresss"),//("")--为了标识
         }
         let a={
            [test.name]:"原有的内容",
            [test.age]:100,
            [test.address]:"北京"
         }

  console.log(Object.getOwnPropertySymbols(a));//Symbol(name), Symbol(age), Symbol(adresss)]

Reflect.ownKeys() 用于遍历普通值（后面定义的值）和 Symbol 的值

定义的和修改的，先显示修改的值，后显示一开始定义的值.

Eg:

  let test={
            name:Symbol("name"),
            age:Symbol("age"),
            address:Symbol("adresss"),//("")--为了标识
         }
         let a={
            [test.name]:"原有的内容",
            [test.age]:100,
            [test.address]:"北京"
         }
      
         a.name="李四";//修改值

  console.log(Reflect.ownKeys(a));//['name', Symbol(name), Symbol(age), Symbol(adresss)]

在上面的例子中，我们使用了Symbol.iterator来指定了对象的迭代器方法,这样我们就可以通过for...of循环来迭代对象的属性值。

Eg:

  let test={
            name:Symbol("name"),
            age:Symbol("age"),
            address:Symbol("adresss"),//("")--为了标识
         }
         let a={
            [test.name]:"原有的内容",
            [test.age]:100,
            [test.address]:"北京"
         }
      
         a.name="李四";//修改值

 for(let i of Reflect.ownKeys(a)){
    console.log(i);//name  Symbol(name)  Symbol(age)  Symbol(adresss)
   }