ES6中新增的基本数据类型----symbol

news/2024/7/10 23:57:41 标签: es6, 前端, ecmascript, javascript, 开发语言

 前言

Symbol 基本数据类型 独一无二得值  Symbol函数创建 接收字符串 对symbol值得描述
let s1 = Symbol('描述')

javascript">/**
 * symbol 基本数据类型 表示独一无二的值 Symbol函数创建独一无二得值 参数可以是唯一值得描述
 */
let sy1 = Symbol();//创建好一个独一无二得值
let sy2 = Symbol();
console.log(sy1,sy2)
console.log(sy1 === sy2);
console.log(typeof sy1,sy1 instanceof Object);

let sy1 = Symbol('symbol数据类型');//对独一无二值得描述
let sy2 = Symbol({name:'zhangsan'})
let sy3 = Symbol([1,2,3]);
let sy4 = Symbol(null);
console.log(sy1,sy2,sy3,sy4);

应用:

  1.解决命名冲突

  无法直接访问 Object.getOwnProperSymbols(); 得到存放symbol属性名数组
  let res = Object.getOwnProperSymbols();//[Symbol('name'),Symbol('age')]
  obj[res[0]]

javascript">/**
 * Symbol应用
 * 1.解决命名冲突 
 */
let sy1 = Symbol('name');
let sy2 = Symbol('age');
let obj = {
  name:'zhangsan',
  age:12,
  [sy1]:'terry',
  [sy2]:18,
  [Symbol('email')]:'xxx@briup.com'
};
//为了访问Symbol创建属性 
console.log(Object.getOwnPropertySymbols(obj));
var ss = Object.getOwnPropertySymbols(obj);//[ Symbol(name), Symbol(age), Symbol(email) ]
console.log(obj[ss[0]],obj[ss[1]]);


console.log(obj[Symbol('email')]);//无效 undefined
console.log(obj[sy1]);//可以访问属性
console.log(obj[sy2]);
// 遍历对象 使用symbol值创建属性无法遍历 
for(let key in obj){
  console.log(key)
}
   2.消除魔术字符串 

      代码对于字符串依赖关系强,形成强耦合 形成魔术字符串

javascript">/** 
 * 2.消除魔术字符串 代码对字符串依赖性非常强 形成强耦合关系 形成了魔术字符串
 */
function Area(shape,options){
  let area = 0;
  switch(shape){
    case 'triangle':
      area = options.width * options.height * 0.5;
      break;
    case 'square':
      area = options*width * options.height;
      break;
    case 'circle':
      area = Math.PI * options.r * options.r;
      break;
    default:
      area = -1;
  }
  return area;
}
let res = Area('triangle',{width:100,height:100,r:50});
console.log(res);


function Area(shape,options){
  let area = 0;
  switch(shape){
    case Shape.SJX:
      area = options.width * options.height * 0.5;
      break;
    case Shape.ZFX:
      area = options.width * options.height;
      break;
    case Shape.CIRCLE:
      area = Math.PI * options.r * options.r;
      break;
    default:
      area = -1;
  }
  return area;
};
// 枚举 类型可以罗列出来 性别:男 女 
let Shape = {
  SJX:Symbol('三角形'),
  ZFX:Symbol('正方形'),
  CIRCLE:Symbol('圆')
}

let res = Area(Shape.ZFX,{width:100,height:100,r:50});
console.log(res);
  3.全局注册表 

    可以使用Symbol.for全局注册一个Symbol值  
    Symbol.for('hello');
    Symbol.for('hello');
    
    Symbol.keyFor 检测Symbol有没有全局注册过 注册过返回Symbol值得描述或者undefined

 

javascript">/**
 * 全局注册表 Symbol.for
 */
// 可以创建一个symbol值的时候进行全局注册 
let sy1 = Symbol.for('name');
let sy2 = Symbol.for('name');
console.log(sy1 === sy2);

let sy3 = Symbol('age');
let sy4 = Symbol('age');
console.log(sy3 === sy4);

// Symbol.keyFor 检测symbol值有没有在全局注册过 注册过返回symbol值得描述 没有返回undefined
console.log(Symbol.keyFor(sy1));
console.log(Symbol.keyFor(sy2));
console.log(Symbol.keyFor(sy3));
console.log(Symbol.keyFor(sy4));


http://www.niftyadmin.cn/n/5248896.html

相关文章

python3安装redis

#!/usr/bin/python3import os import platform import argparse import shutil# 自定义变量 default_system "ubuntu" default_redis_version "6.2.6" default_install_path "/usr/local/redis" default_local_package_dir os.path.dirname(…

蓝牙物联网对接技术难点有哪些?

#物联网# 蓝牙物联网对接技术难点主要包括以下几个方面: 1、设备兼容性:蓝牙技术有多种版本和规格,如蓝牙4.0、蓝牙5.0等,不同版本之间的兼容性可能存在问题。同时,不同厂商生产的蓝牙设备也可能存在兼容性问题。 2、…

CentOS系统下配置HTTP服务器的步骤

在CentOS系统下配置HTTP服务器涉及到一系列的步骤。以下是一个基本的步骤概述,帮助你了解如何为CentOS系统配置HTTP服务器。 安装HTTP服务器软件: 首先,你需要在CentOS系统上安装HTTP服务器软件。常见的选择是Apache HTTP服务器。你可以使用…

Gateway和spring-boot-starter-web的恩怨情仇

为什么取这个题目,其实与我踩到的坑有关,说起来这个坑非常神奇,这里面就涉及到Gateway和spring-boot-starter-web底层所依赖的技术不兼容的问题。 一、背景 SpringCloud 版本 ---- Finchley.SR2 SpringBoot 版本 ---- 2.0.6.RELEASE 如果同…

HTB Devvortex

Devvortex 2023.11.27 10.26user nmap ┌──(kali㉿kali)-[~/HTB/machine/Devvortex] └─$ nmap -A 10.10.11.242 Starting Nmap 7.94

SSL 协议

SSL 是用于安全传输数据的一种通信协议。它采用公钥加密技术、对称密钥加密技术等保护两个应用之间的信息传输的机密性和完整性。但是,SSL 也有一个不足,就是它本身不能保证传输信息的不可否认性。 SSL 协议包括服务器认证、客户认证、SSL 链路上的数据完…

Vue 一个简单的mixin的运用,对mixin的初步了解

刚学vue的时候,从一个大神口中老是说什么混入混入,觉得很神秘,后来一了解,原来如此: 其实从字面意思来理解,就是将代码里面的内容混在一起了,上一段代码可能比较好理解一点。 先定义一个简单混…

react的sass模块化引入

今天新项目在sass的模块化引入上耗费了好长时间,因为一使用import styles from "./index.module.scss";就报错,让我以为是缺少了什么模块的引入或webpack之类又缺少什么配置。毕竟之前引less的时候就遇到好多问题:一波三折的react …