美文网首页
一看就懂-关于ES6的 Symbol

一看就懂-关于ES6的 Symbol

作者: 前端老邹_伯通 | 来源:发表于2020-02-13 21:15 被阅读0次

刚才有同学问到 Symbol ,于是写了一下,希望对各位英雄好汉们有帮助:

一、介绍Symbol

  • 使用 Symbol 来生成 一个 类似 guid 的唯一标识,并存入 对象属性中
let usrType = {
  student : Symbol(), // 想象返回Symbol对象  { guid:'c74d75a8-fcf0-46e9-a182-75c253950507' }
  coder : Symbol(),// 想象返回Symbol对象  { guid:'8c0633ea-b2e8-49c6-ac50-979a787762a8' }
  painter : Symbol()// 想象返回Symbol对象  { guid:'16e6d2cf-e8ec-4cc8-b510-6a4402b59bce' }
}

// 打印时 无法 直接打印出 标示值(guid),只能打印 类型名为 Symbol
console.log(usrType.student); // Symbol()
console.log(usrType.coder); // Symbol()
console.log(usrType.painter); // Symbol()

二、标识注释

  • 可以 在 Symbol( "注释" ) 相当于 为 生成 标识 写一个 注释
  • 核心:Symbol函数 每次调用 都会生成一个 唯一的标示值(类似 guid - 每次生成都是不可能重复的值)
  • 案例:在对象中 设置多个属性,属性值 用 Symbol 方法来生成 唯一标示值,并为它写上 标示注释(可选)
  • 注意:标识注释 和 标识值没有关系,就是说 标示注释相同 不等于 标示值(guid)相同
let usrType = {
    student: Symbol('student'),
    // 想象返回Symbol对象  { guid:'c74d75a8-fcf0-46e9-a182-75c253950507' , note:'student' }

    student2: Symbol('student'),
    // 想象返回Symbol对象  { guid:'44fbe8aa-7ae3-465c-94ab-ee8c23cfdb3d' , note:'student' }
    // 【注意】虽然 传入的 标识注释 也是 student ,但 生成的 guid 和 上一个 不一样!

    coder: Symbol('coder'),
    // 想象返回Symbol对象  { guid:'7906b281-f0e0-44c3-93e9-8ea358eddfa3' , note:'coder' }

    painter: Symbol('painter') 
    // 想象返回Symbol对象  { guid:'93a0612c-74a4-4de5-a3a4-2c828bf9ea9d' , note:'painter' }
}

// 1. 打印时 无法 直接打印出 标示值,但可以打印出 “注释”----------------
console.log(usrType.student); // Symbol(student)
console.log(usrType.student2); // Symbol(student)
console.log(usrType.coder); // Symbol(coder)
console.log(usrType.painter); // Symbol(painter)

// 2.对比 标识 的值是否相等 ---------------------------------------------
// 一个属性 中 保存的 标识 是同一个,所以 true
console.log(usrType.student == usrType.student); // true
//相当于 'c74d75a8-fcf0-46e9-a182-75c253950507'=='c74d75a8-fcf0-46e9-a182-75c253950507'  // true

// 哪怕是两个 “注释” 相等的 标识,标识值 也不相等,所以 false
console.log(usrType.student == usrType.student2); // false
//相当于 'c74d75a8-fcf0-46e9-a182-75c253950507'=='44fbe8aa-7ae3-465c-94ab-ee8c23cfdb3d'  // false

// 不同属性 中 保存的 标识 不相同,所以 false
console.log(usrType.student == usrType.coder); // false
//相当于 'c74d75a8-fcf0-46e9-a182-75c253950507'=='7906b281-f0e0-44c3-93e9-8ea358eddfa3'  // false

三、重复使用Symbol

  • 相当于 重复使用 同一个 guid
  • Symbol.for('标识注释') 方法 可以帮我们 根据 标识注释 管理 symbol对象
let a = Symbol.for('dog');
//【第1次】使用 dog 标识注释,相当于创建了
//                 Symbol对象{ guid:'c155a688-7b9a-40a2-99c3-67dd19f532ca' , note:'dog' }

let b = Symbol.for('dog'); 
//【第2次】使用 dog 标识注释,会返回 第1次创建的 
//                Symbol对象{ guid:'c155a688-7b9a-40a2-99c3-67dd19f532ca' , note:'dog' }

// 所以:比较 两个变量中的 标识值,返回 true,因为是同一个 标识对象
console.log(a === b); // true
// 相当于 比较 两个 guid  
//  'c155a688-7b9a-40a2-99c3-67dd19f532ca' == 'c155a688-7b9a-40a2-99c3-67dd19f532ca' -> true
  • Symbol.keyFor(symbol对象) 方法 可以 帮我们 根据 symbol对象 找到 它的 标识注释
let a = Symbol.for('dog');
let note = Symbol.keyFor(a);
console.log(note); // 'dog'

参考资料:http://es6.ruanyifeng.com/#docs/symbol

相关文章

  • 一看就懂-关于ES6的 Symbol

    刚才有同学问到 Symbol ,于是写了一下,希望对各位英雄好汉们有帮助: 一、介绍Symbol 使用 Symb...

  • ES6补充以及Node事件轮询

    Symbol es6中新增了symbol类型,symbol类型的值是通过symbol函数生成的,相同symbol函...

  • 深入理解ES6六

    Symbol ES6新增的数据类型Symbol 创建Symbol:通过去全局的Symbol函数创建一个Symbol...

  • es6中的数据类型之symbol

    1. symbol es6中的数据类型有:number, boolean, string, symbol, nul...

  • 2018-08-06 第一天课 ES6前奏

    1.Symbol ES6新增的 数据类型 -基本类型 值是由Symbol 函数 调用产生的 相同的Symbol 函...

  • Symbol

    es6新增数据类型 -- 基本类型 值是由symbol函数调用产生的 Symbol的基本用法 Symbol的使用属...

  • JavaSctipt基础归纳,以及隐式转换的规则

    原始类型: "symbol" 是ES6,新扩展的原始类型;Symbol,表示独一无二的值。Symbol 值通过Sy...

  • ES6 中的 Symbol

    JavaScript 之 Symbol Symbol是什么 Symbol是ES6中新引入的一种基本数据类型。Sym...

  • promise ES6 一看就懂

    Promise 我们都知道JavaScript是单线程执行的,执行的顺序是按照任务队列来执行的。 什么是任务队列?...

  • Symbol

    Symbol ES6引入了一种新的原始数据类型Symbol,表示独一无二的值.Symbol值通过Symbol函数生...

网友评论

      本文标题:一看就懂-关于ES6的 Symbol

      本文链接:https://www.haomeiwen.com/subject/wttrfhtx.html