• ES6 Symbol 内置值及使用场景

    Symbol 基本使用

    ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是

    JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。

    Symbol 特点

    1) Symbol 的值是唯一的，用来解决命名冲突的问题

    2) Symbol 值不能与其他数据进行运算

    3) Symbol 定义 的 对象属 性 不能 使 用 for…in 循 环遍 历 ，但 是可 以 使 用

    Reflect.ownKeys 来获取对象的所有键名

    symbol使用场景

    示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>symbol</title>
    7. </head>
    8. <body>
    9.     <script>
    10.         //创建Symbol
    11.         let s = Symbol();
    12.         // console.log(s, typeof s);
    13.         let s2 = Symbol('尚硅谷');
    14.         let s3 = Symbol('尚硅谷');
    15.         console.log(s2===s3);//结果：false
    16.         //Symbol.for 创建  Symbol.for(key) 和Symbol(desc)类似，都是为了产生一个唯一标识，
    17.         //不同的是：Symbol.for的key相同，就代表是同一个值;Symbol()的desc相同，
    18.         let s4 = Symbol.for('尚硅谷');
    19.         let s5 = Symbol.for('尚硅谷');
    20.       console.log(s4===s5); //结果：true
    21.         //不能与其他数据进行运算  下面写法都是错误不支持的
    22.         //    let result = s + 100;
    23.         //    let result = s > 100;
    24.         //    let result = s + s;
    25.  
    26.         // USONB  you are so niubility 
    27.         // u  undefined
    28.         // s  string  symbol
    29.         // o  object
    30.         // n  null number
    31.         // b  boolean
    32.  
    33.     </script>
    34. </body>
    35. </html>

    Symbol的使用场景

    （1）增加方法

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Symbol 创建对象属性</title>
    7. </head>
    8. <body>
    9.     <script>
    10.         //向对象中添加方法 up down
    11.         let game = {
    12.             name:'俄罗斯方块',
    13.             up: function(){},
    14.             down: function(){}
    15.         };
    16.         
    17.         // 可以通过这种方式实现：  声明一个对象  这样保证了up，down是唯一的，
    18.         let methods = {
    19.             up: Symbol(),
    20.             down: Symbol()
    21.         };
    22.  
    23.         game[methods.up] = function(){
    24.             console.log("我可以改变形状");
    25.         }
    26.  
    27.         game[methods.down] = function(){
    28.             console.log("我可以快速下降!!");
    29.         }
    30.  
    31.         console.log(game);
    32.  
    33.         // 还可以直接这样使用
    34.         let youxi = {
    35.             name:"狼人杀",
    36.             [Symbol('say')]: function(){
    37.                 console.log("我可以发言")
    38.             },
    39.             [Symbol('zibao')]: function(){
    40.                 console.log('我可以自爆');
    41.             }
    42.         }
    43.  
    44.         console.log(youxi)
    45.  
    46.         
    47.     </script>
    48. </body>
    49. </html>

    结果：

      

    Symbol 内置值

    除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值， 指向语言内部使用的方法。可以称这些方法为魔术方法，因为它们会在特定的场景下自动执行。

     示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Symbol内置属性</title>
    7. </head>
    8. <body>
    9.     <script>
    10.         class Person{
    11.             static [Symbol.hasInstance](param){
    12.                 console.log(param);
    13.                 console.log("我被用来检测类型了");
    14.                 return false;
    15.             }
    16.         }
    17.  
    18.         let o = {"ss":123};
    19.  
    20.         console.log(o instanceof Person);
    21.  
    22.         const arr = [1,2,3];
    23.         const arr2 = [4,5,6];
    24.         arr2[Symbol.isConcatSpreadable] = false;
    25.         console.log(arr.concat(arr2));
    26.     </script>
    27. </body>
    28. </html>

    结果：

     好了， 以上是本文所有内容，希望对大家有所帮助，也希望大家对码农之家多多支持，你们的支持是我创作的动力！祝大家生活愉快！    

  • 相关阅读:
    Python使用pymysql和xlrd2将Excel数据导入MySQL数据库
    【Appium UI自动化】pytest运行常见错误解决办法
    JQuery系列之多库共存
    ArcGIS Pro中的回归分析浅析（下）地理加权回归工具(GWR)使用&小结
    @RestController 注解网页返回 [] ,出现的bug
    记录一次较为完整的服务打包发布流程
    K8s复习笔记8--结合pv/pvc Mysql 主从架构
    3.29每日一题（微分方程的几何应用题：重点考察）
    第一次课（反馈，未讲评）
    力扣(LeetCode)816. 模糊坐标(C++)
  • 原文地址：https://blog.csdn.net/wuxiaopengnihao1/article/details/127939624