编程笔记 html5&css&js 071 JavaScript Symbol 数据类型

简介: 编程笔记 html5&css&js 071 JavaScript Symbol 数据类型


在JavaScript中,Symbol 是一种基本数据类型,它于 ECMAScript 6(ES6)中引入,用来创建唯一的、不可变的值。这些值可以作为对象属性的键,从而提供了一种防止属性名冲突的方式,并允许开发者隐藏对象中的一些属性或方法,使其对常规操作如 for...in 循环和 Object.keys() 不可见。

一、Symbol 数据类型

  1. 唯一性
    每个通过 Symbol() 函数生成的 Symbol 值都是独一无二的,即使它们具有相同的描述符。这意味着即使两个符号使用相同的字符串作为描述,它们也是不同的。
let s1 = Symbol('description');
let s2 = Symbol('description');
console.log(s1 === s2); // 输出:false
  1. 隐式转换阻止
    Symbol 类型不能与其他任何类型的值进行相等性比较,也不能被转换为其他类型。
  2. 不可变性
    一旦创建了一个 Symbol,就无法改变这个值,也无法重新赋值。
  3. 不可枚举性
    当用作对象属性时,默认情况下,Symbol 属性是不可枚举的,这意味着它们不会出现在 for...in 循环、Object.keys()Object.getOwnPropertyNames() 等返回的对象属性列表中。
  4. 描述符
    创建 Symbol 时可以传入一个可选的描述字符串,用于调试目的,但不影响其唯一性。
let s3 = Symbol('unique identifier');
console.log(s3.description); // 在标准 JavaScript 中输出:'unique identifier'
  1. 注意:在最新的规范中,Symbol.prototype.description 已不再是一个标准属性,而是需要通过 toString() 方法间接获取描述信息。
  2. 内置 Symbol 值
    JavaScript 提供了一些内置的 Symbol 值,例如 Symbol.iterator(用于定义迭代器)、Symbol.hasInstance(自定义 instanceof 操作符的行为)、Symbol.toPrimitive(自定义对象到原始值的转换行为)等等。
  3. 作为对象属性
    Symbol 可以安全地用作对象属性名来避免与已有属性冲突。
let myKey = Symbol();
let obj = {};
obj[myKey] = 'secret value';
console.log(obj[myKey]); // 输出: 'secret value'
for(let key in obj) {
  console.log(key); // 不会输出 myKey,因为它是 Symbol 类型且默认不可枚举
}
  1. 若要访问 Symbol 类型的属性,通常使用 Object.getOwnPropertySymbols() 方法。

二、 示例

// 创建一个带有 Symbol 键的简单对象
let id = Symbol('id');
let user = {
  name: 'Alice',
  [id]: 12345 // 使用 Symbol 作为键存储用户 ID
};
console.log(user[id]); // 输出: 12345
// 获取对象的所有 Symbol 属性
let symbols = Object.getOwnPropertySymbols(user);
console.log(symbols); // 输出: [Symbol(id)]
// 内置 Symbol 示例 - 自定义 instanceof 行为
class MyClass {}
MyClass[Symbol.hasInstance] = function(inst) {
  return inst && inst.isMyClass;
};
let instance = { isMyClass: true };
console.log(instance instanceof MyClass); // 根据自定义规则判断是否为 MyClass 实例

小结

总结来说,Symbol 类型在 JavaScript 中主要用于实现私有属性、解决命名冲突以及扩展内置对象行为等方面,提供了更多元化的编程方式和更强的封装能力。

相关文章
|
6天前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
58 32
|
20天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
101 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
18天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
46 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
21天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
67 33
|
2月前
|
JavaScript 前端开发
【JavaScript】——JS基础入门常见操作(大量举例)
JS引入方式,JS基础语法,JS增删查改,JS函数,JS对象
|
3月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
2月前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
98 2
|
3月前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
3月前
|
设计模式 JavaScript 前端开发
es6加上symbol的基础数据类型
【10月更文挑战第30天】ES6 中的 `Symbol` 作为一种新的基础数据类型,为 JavaScript 提供了一种创建唯一标识符和处理对象属性名冲突的有效方式,丰富了 JavaScript 的数据类型体系和编程模式,在实际开发中具有重要的应用价值。
|
3月前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
55 4