首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >再也不怕面试官问我 Symbol 是什么了

再也不怕面试官问我 Symbol 是什么了

作者头像
公众号---人生代码
发布于 2021-01-27 07:27:01
发布于 2021-01-27 07:27:01
40500
代码可运行
举报
文章被收录于专栏:人生代码人生代码
运行总次数:0
代码可运行

基本数据类型

通常面试官问你,都会问你 js 的基本类型都有哪些,你可能会回答:

  • Number,
  • String,
  • Boolean,
  • Undefined,
  • Null。

你以为完了,结果面试真的完犊子了,其实还有一个就是在 ES6 中,还新增了一个叫做:

  • Symbol

什么意思呢?表示唯一,独一无二的值,最大的用法是用来定义对象的唯一属性名。

Symbol 的疑难点

特别需要注意的是:

  • Symbol 函数栈不能用 new 命令,因为他是基本类型,无法使用 new 操作
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var s = new Symbol() // 报错
VM161:1 Uncaught TypeError: Symbol is not a constructor
    at new Symbol (<anonymous>)
    at <anonymous>:1:9
  • 不能使用 JSON.parse,JSON.stringify 进行深拷贝
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var Ken = Symbol('kk')
var obj = {name: Ken}
var copy = JSON.parse(JSON.stringify(obj))
console.log(copy)// 你会发现 name 属性没了
  • 唯一性质
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let Ken = Symbol("KK");
console.log(Ken);   // Symbol(KK)
typeof(Ken);        // "symbol"
 
// 相同参数 Symbol() 返回的值不相等
let Ken1 = Symbol("KK"); 
Ken === Ken1;       // false
  • 作为对象属性 key 时,在获取其值的时候,只能使用 [] 形式获取,不能使用 . 操作符
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let Ken = {};
Ken[sy] = "kk";
 
Ken[sy];  // "kk"
Ken.sy;   // undefined
  • Symbol 值作为属性名时,该属性是公有属性不是私有属性,可以在类的外部访问

但是不会出现在 for...infor...of 的循环中,也不会被 Object.keys()Object.getOwnPropertyNames() 返回。如果要读取到一个对象的 Symbol 属性,可以通过 Object.getOwnPropertySymbols()Reflect.ownKeys() 取到。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let Ken = {};
Ken[sy] = "kk";
console.log(Ken);
 
for (let i in Ken) {
  console.log(i);
}    // 无输出
 
Object.keys(Ken);                     // []
Object.getOwnPropertySymbols(Ken);    // [Symbol(key1)]
Reflect.ownKeys(Ken);                 // [Symbol(key1)]
  • 定义常量

在 ES5 使用字符串表示常量。例如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const COLOR_RED = "red";
const COLOR_YELLOW = "yellow";
const COLOR_BLUE = "blue";

但是用字符串不能保证常量是独特的,这样会引起一些问题:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const COLOR_RED = "red";
const COLOR_YELLOW = "yellow";
const COLOR_BLUE = "blue";
const MY_BLUE = "blue";
 
function ColorException(message) {
   this.message = message;
   this.name = "ColorException";
}
 
function getConstantName(color) {
    switch (color) {
        case COLOR_RED :
            return "COLOR_RED";
        case COLOR_YELLOW :
            return "COLOR_YELLOW ";
        case COLOR_BLUE:
            return "COLOR_BLUE";
        case MY_BLUE:
            return "MY_BLUE";         
        default:
            throw new ColorException("Can't find this color");
    }
}
 
try {
   
   var color = "green"; // green 引发异常
   var colorName = getConstantName(color);
} catch (e) {
   var colorName = "unknown";
   console.log(e.message, e.name); // 传递异常对象到错误处理
}

但是使用 Symbol 定义常量,这样就可以保证这一组常量的值都不相等。用 Symbol 来修改上面的例子。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const COLOR_RED = Symbol("red");
const COLOR_YELLOW = Symbol("yellow");
const COLOR_BLUE = Symbol("blue");
 
function ColorException(message) {
   this.message = message;
   this.name = "ColorException";
}
function getConstantName(color) {
    switch (color) {
        case COLOR_RED :
            return "COLOR_RED";
        case COLOR_YELLOW :
            return "COLOR_YELLOW ";
        case COLOR_BLUE:
            return "COLOR_BLUE";
        default:
            throw new ColorException("Can't find this color");
    }
}
 
try {
   
   var color = "green"; // green 引发异常
   var colorName = getConstantName(color);
} catch (e) {
   var colorName = "unknown";
   console.log(e.message, e.name); // 传递异常对象到错误处理
}
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-01-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 CryptoCode 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
ES6——Symbol
ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。
羊羽shine
2019/07/18
4870
[译] JavaScript与TypeScript中的Symbol
Symbol是一个JavaScript与TypeScript内建的数据类型. Symbol与其他数据类型相比, 能够作为对象的属性键值来使用. 与number和string相比, symbol具备一些使它别具一格的特性.
腾讯IVWEB团队
2020/06/28
1.9K0
JavaScript和TypeScript中的symbol[每日前端夜话0xC0]
symbol 是 JavaScript 和 TypeScript 中的原始数据类型,可用于对象属性。与 number 和 string 相比,symbol 具有一些独特的功能,使它脱颖而出。
疯狂的技术宅
2019/09/18
1.5K0
JavaScript和TypeScript中的symbol[每日前端夜话0xC0]
ES6
ES2015(ES6)新增加了两个重要的JavaScript关键字:let和const。 let声明的变量只在let命令所在的代码块内有效。 const声明一个只读的常量,一旦声明,常量的值就不能改变。
Cloud-Cloudys
2020/07/07
1K0
Ecmascript语法之Symbol
Symbol 概述 作为属性名的Symbol 实例:消除魔术字符串 属性名的遍历 Symbol.for(),Symbol.keyFor() 实例:模块的 Singleton 模式 内置的Symbol值 概述 ES5的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin模式),新方法的名字就有可能与现有方法产生冲突。如果有一种机制,保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突。这就是ES6引入Symbol的原因。 E
xiangzhihong
2018/02/06
1.3K0
JavaScript的Symbol是什么?
Symbol 是 ECMAScript 2015 中新添加的特性,生成一个唯一标识符,可用于属性名称、也可用于属性值。目的是消除属性名称冲突。
Learn-anything.cn
2021/12/20
4410
JS高阶(二)Symbol
ES6 引入了一种新的原始数据类型 Symbol ,表示独一无二的值,最大的用法是用来定义对象的唯一属性名。
DioxideCN
2022/08/05
8000
ES6之symbol
为什么需要使用Symbol 考虑到以下场景: // a library var L = (function() { var prop1 = 'prop1'; function haha() { console.log('world haha'); } // ... return { prop1 : prop1, haha : someFn }; })(); // using L.haha = function() { console.
糊糊糊糊糊了
2018/05/09
5670
ES6之Symbol
Symbol.for() 接受一个字符串作为参数,然后搜索有没有以该参数作为名称的 Symbol 值。如果有,就返回这个 Symbol 值,否则就新建一个以该字符串为名称的 Symbol 值,并将其注册到全局。 Symbol.for()与Symbol()这两种写法,都会生成新的 Symbol。它们的区别是,前者会被登记在全局环境中供搜索,后者不会。Symbol.for()不会每次调用就返回一个新的 Symbol 类型的值,而是会先检查给定的key是否已经存在,如果不存在才会新建一个值。 Symbol.for()会生成一个全局的Symbol,会和之前for生成的Symbol进行覆盖,所以他们是相等的,参见Demo。
19组清风
2021/11/15
3110
JavaScript 为什么要有 Symbol 类型
Symbols 是 ES6 引入了一个新的数据类型 ,它为 JS 带来了一些好处,尤其是对象属性时。 但是,它们能为我们做些字符串不能做的事情呢在深入探讨 Symbol 之前,让我们先看看一些 JavaScript 特性,许多开发人员可能不知道这些特性。 背景 js中的数据类型总体来说分为两种,他们分别是:值类型 和 引用类型 值类型(基本类型):数值型(Number),字符类型(String),布尔值型(Boolean),null 和 underfined 引用类型(类):函数,对象,数组等 值类型理
前端小智@大迁世界
2019/04/18
7440
JavaScript 为什么要有 Symbol 类型
【JS】1889- 如何判断对象自身为空?很多人错了~
如何判断一个对象为空是我们在开发中经常会遇到的问题,今天我们来聊聊几种经常使用的方法,以及在不同的场景下我们如何去使用。
pingan8787
2023/12/13
3071
【JS】1889- 如何判断对象自身为空?很多人错了~
前端开发博客一周面试题汇总
感谢管理员一周的面试题汇总。希望大家多多支持我们的管理员,记得赞赏、点好看、转发一条龙支持他的工作。
前端开发博客
2020/11/04
2560
前端开发博客一周面试题汇总
​死磕JS:Reflect.ownKeys() 和 Object.keys() 怎么选?
掘金ID:https://juejin.cn/user/3051900006317549
viktor
2022/09/19
1.6K0
​死磕JS:Reflect.ownKeys() 和 Object.keys() 怎么选?
云课五分钟-05一段代码修改-AI修改C++
所有的云课五分钟,不仅演示可行案例,也同样重视在尝试过程中的失败,并且也会全部展示出来。
zhangrelay
2023/11/17
2910
云课五分钟-05一段代码修改-AI修改C++
Js遍历对象总结
Js遍历对象的方法主要有for in、Object.keys()、Object.getOwnPropertyNames()、Reflect.ownKeys()、Object.getOwnPropertySymbols()。
WindRunnerMax
2020/08/27
7.3K0
JavaScript对象属性是有序的吗?
早期接触过JavaScript的开发者可能会回答,Object.keys()或for...in会返回一个不可预知的对象属性顺序。
前端小智@大迁世界
2022/09/08
1.8K0
ECMAScript 6笔记(Symbol, Proxy 和 Reflect)
版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/article/details/51378330
空空云
2018/09/27
5230
ES6之symbol
ES6引入了一种新的原始数据类型Symbol,是第七种数据类型,表示独一无二的值。语法:
wade
2020/04/24
3230
ES6遍历对象属性的5种方法
for...in 循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。
德顺
2022/05/11
1.4K0
【JS ES6】了解Symbol类型
✍️ 作者简介: 前端新手学习中。 💂 作者主页: 作者主页查看更多前端教学 🎓 专栏分享:css重难点教学 Node.js教学 从头开始学习 ajax学习 目录 声明定义Symbol的几种方式 使用Symbol解决字符串耦合问题 扩展特性与对象属性保护 声明定义Symbol的几种方式 Symbol类型具有唯一性。 let hd = Symbol(); let edu = Symbol(); console.log(hd == edu);//false symbol类型是不能附加
坚毅的小解同志的前端社区
2022/12/18
8380
相关推荐
ES6——Symbol
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档