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

前言

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));
相关推荐
神之王楠3 分钟前
如何通过js加载css和html
javascript·css·html
余生H8 分钟前
前端的全栈混合之路Meteor篇:关于前后端分离及与各框架的对比
前端·javascript·node.js·全栈
程序员-珍11 分钟前
使用openapi生成前端请求文件报错 ‘Token “Integer“ does not exist.‘
java·前端·spring boot·后端·restful·个人开发
axihaihai15 分钟前
网站开发的发展(后端路由/前后端分离/前端路由)
前端
弱冠少年18 分钟前
websockets库使用(基于Python)
开发语言·python·numpy
长天一色19 分钟前
C语言日志类库 zlog 使用指南(第五章 配置文件)
c语言·开发语言
流烟默27 分钟前
Vue中watch监听属性的一些应用总结
前端·javascript·vue.js·watch
一般清意味……31 分钟前
快速上手C语言【上】(非常详细!!!)
c语言·开发语言
卑微求AC31 分钟前
(C语言贪吃蛇)16.贪吃蛇食物位置随机(完结撒花)
linux·c语言·开发语言·嵌入式·c语言贪吃蛇
2401_8572979137 分钟前
招联金融2025校招内推
java·前端·算法·金融·求职招聘