粥里有勺糖

vuePress-theme-reco 粥里有勺糖    2018 - 2023
粥里有勺糖 粥里有勺糖

Choose mode

  • dark
  • auto
  • light
关于我
备战春秋
  • 心得总结
  • 校招考点汇总
  • 面经汇总
  • 复习自查
技术笔记
  • 技术教程
  • 模板工程
  • 源码学习
  • 技术概念
  • 个人作品
  • 学习笔记
计算机基础
  • 算法与数据结构
  • 操作系统
  • 计算机网络
  • 设计模式
  • 剑指offer
大前端
  • javascript
  • vue
  • html
  • css
  • 🌏浏览器专题
  • Web性能优化
  • regexp
  • node
面试
  • 问解
  • javascript
  • css
  • 手撕代码
  • 性能优化
  • 综合问题
  • 面经汇总
  • 小程序
手撕代码
  • 数据结构与算法
  • javascript
  • css
个人站点
  • GitHub (opens new window)
  • 博客园 (opens new window)
  • 掘金 (opens new window)
线上作品
  • 轻取(文件收集) (opens new window)
  • 个人图床 (opens new window)
  • 考勤小程序 (opens new window)
  • 时光恋人 (opens new window)
  • 在线简历生成 (opens new window)
留言板
Github (opens new window)
author-avatar

粥里有勺糖

285

文章

40

标签

关于我
备战春秋
  • 心得总结
  • 校招考点汇总
  • 面经汇总
  • 复习自查
技术笔记
  • 技术教程
  • 模板工程
  • 源码学习
  • 技术概念
  • 个人作品
  • 学习笔记
计算机基础
  • 算法与数据结构
  • 操作系统
  • 计算机网络
  • 设计模式
  • 剑指offer
大前端
  • javascript
  • vue
  • html
  • css
  • 🌏浏览器专题
  • Web性能优化
  • regexp
  • node
面试
  • 问解
  • javascript
  • css
  • 手撕代码
  • 性能优化
  • 综合问题
  • 面经汇总
  • 小程序
手撕代码
  • 数据结构与算法
  • javascript
  • css
个人站点
  • GitHub (opens new window)
  • 博客园 (opens new window)
  • 掘金 (opens new window)
线上作品
  • 轻取(文件收集) (opens new window)
  • 个人图床 (opens new window)
  • 考勤小程序 (opens new window)
  • 时光恋人 (opens new window)
  • 在线简历生成 (opens new window)
留言板
Github (opens new window)
  • Javascript

    • 简介
    • 获取某年某月的天数
    • 日期格式化
    • 展开多级数组
    • 判断数据类型的方案
    • 文件上传与下载
    • 柯里化
    • 闭包
    • delete
    • 垃圾回收
    • 节流与防抖
    • apply,call,bind
    • blob与file
    • Event Loop
    • Promise
    • 定时器
    • 原型与原型链
    • 作用域
    • 执行上下文栈
    • 变量对象
    • 作用域链
    • ECMAScript规范解读this
    • 执行上下文
    • 参数按值传递
    • 类数组与arguments
    • 浮点数
    • Symbol的用法
    • 箭头函数
    • 类型转换
    • 获取dom元素的方式
    • 浅拷贝与深拷贝
    • ES6+的新语法糖和方法整理
    • 学习过程中学到的一些取巧之法

Symbol的用法

vuePress-theme-reco 粥里有勺糖    2018 - 2023

Symbol的用法

粥里有勺糖 2020-04-14 大前端javascript

# Symbol 的用法

ES6 引入的一种新的原始数据类型,表示独一无二的值。从根本上解决对象属性太多导致属性名冲突覆盖的问题

  • 不能参与运算
  • Symbol 值可以显式转为字符串

# 简单使用

let a = Symbol()
console.log(a) // Symbol()
console.log(typeof a) // symbol
1
2
3

# 传入参数

接受一个字符串作为参数,对 Symbol 实例的描述

let a = Symbol('1')
let b = Symbol('2')
console.log(a) // Symbol(1)
console.log(b) // Symbol(2)
1
2
3
4

相同参数的 Symbol 函数的返回值是不相等的。

let a = Symbol('1')
let b = Symbol('1')
console.log(a===b) // false
1
2
3

# Stmbol.for

接受一个字符串作为参数,然后搜索有没有以该参数作为名称的 Symbol 值。如果有,就返回这个 Symbol 值,否则就新建并返回一个以该字符串为名称的 Symbol 值。

let a = Symbol.for('a')
let aa = Symbol.for('a')
console.log(a === aa) // true
1
2
3

# Symbol.keyFor

返回一个已登记的 Symbol 类型值的 key

let a = Symbol.for('a')
console.log(Symbol.keyFor(a)) // a

let b = Symbol('b')
console.log(Symbol.keyFor(b)) // undefined
1
2
3
4
5

# 用途

  1. 作为标识符,对象属性名称
let apple = Symbol()
// 第一种
let a = {}
a[apple] = 'apple'

// 第二种
let a = {
    [apple]:"apple"
}

let a = {}
Object.defineProperty(a,apple,{value:'apple'})
console.log(a[apple]) // apple
1
2
3
4
5
6
7
8
9
10
11
12
13

Symbol 作为属性名:

  • 不会出现在 for...in、for...of 循环中
  • 不会被 Object.keys()、Object.getOwnPropertyNames()、JSON.stringify() 返回
  • 不是私有属性:Object.getOwnPropertySymbols 方法,可以获取指定对象的所有 Symbol 属性名
  1. 常量
let APPLE = Symbol()
let ORANGE = Symbol()
let BANANA = Symbol()
1
2
3
  1. 单例模式中运用 Phone.js
class Phone {
    constructor() {
        this.name = '小米'
        this.price = '1999'
    }
}

let key = Symbol.for('Phone')

if (!global[key]) {
    global[key] = new Phone()
}

module.exports = global[key]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

test.js

const p1 = require('./Phone')
const p2 = require('./Phone')
console.log(p1 === p2) // true
1
2
3
  1. class里面实现私有方法/变量 User.js
const AGE = Symbol()
const GET_AGE = Symbol()
class User {
    constructor(name, sex, age) {
        this.name = name
        this.sex = sex
        this[AGE] = age
        this[GET_AGE] = function () {
            return this[AGE]
        }
    }
    printAge() {
        console.log(this[GET_AGE]())
    }

}
module.exports = User
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

test.js

let User = require('./User')

let u1 = new User('xm', 'M', 18)

console.log(u1.name) // xm
console.log(u1.age) // undefined
u1.printAge() // 18
1
2
3
4
5
6
7
Edit this page (opens new window)
Last Updated: 2022/5/15 12:46:34