IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 【深入理解ES6】Symbol -> 正文阅读

[JavaScript知识库]【深入理解ES6】Symbol

创建Symbol

新增基础类型 Symbol,用于解决 私有属性 问题

let firstName = Symbol()
let person = {}

person[firstName] = 'Nicholas'
console.log(person["firstName"])

注意, Symbol是原始值,不能 new Symbol()构建实例,只能是new Object(【Symbol 值】)

?Symbol 接受可选参数,用于描述该? Symbol?

内部存储在 [[Description]] 属性中,所以只有 Symbol 的toString 方法能读取

而 console.log 隐式调用 toString 方法

let firstName = Symbol('first name')
let person = {}

person[firstName] = 'abc'

console.log(person)

Symbol辨识

通过 typeof,返回值为 symbol

let firstName = Symbol('first name')
console.log(typeof firstName)

Symbol的使用方法

  • 对象中括号引用
  • 对象字面量
  • Object.defineProperty
let firstName = Symbol('first name')
let person_1 = {}

person_1[firstName] = 'person111'

let person_2 = {
  [firstName]: 123
}

Object.defineProperty(person_2, firstName, { writable: false })

let lastName = Symbol('last name')

Object.defineProperties(person, {
  [lastName]: {
    value: 111,
    writable: false
  }
})

Symbol的共享体系

Symbol.for() 会在 Symbol全局注册表 中查找

  • 存在,则返回对应的 Symbol 值
  • 不存在,则新创建一个 Symbol 存入注册表
let uid = Symbol.for("uid")
let object = {}

object[uid] = 1234

console.log(object) // { [Symbol(uid)]: 1234 }

let uid2 = Symbol.for('uid')

console.log(uid === uid2) // true
console.log(uid2, object[uid2]) // Symbol(uid) 1234

Symbol.keyFor 在 Symbol全局注册表 中检索 Symbol 相关的键值

let uid = Symbol.for("uid")
console.log(Symbol.keyFor(uid))

let uid2 = Symbol.for("uid")
console.log(Symbol.keyFor(uid2))

let uid3 = Symbol('uid')
console.log(Symbol.keyFor(uid3))

Symbol 的类型转换

  • 其他类型的值不存在逻辑等价
  • 尤其Number 和 String ,会报错
  • String()对象实例化,内部调用了Symbol.toString()
let uid = Symbol.for('uid'),
  desc = String(uid) // uid.toString()

console.log(desc) // 'Symbol(uid)'

Symbol 属性检索

ES5中

Object.keys() 可枚举属性

Object.getOwnPropertyNames() 对象的所有属性

以上一律不支持对象中 Symbol 属性

ES6新增 Object.getOwnPropertySymbols 返回对象中的所有 Symbol 属性

let uid = Symbol('uid')
let password = Symbol('password')

let obj = {
  a: 123,
  b: 'asd',
  [uid]: '12',
  [password]: 123,
}

// [ 'a', 'b' ]
console.log(Object.getOwnPropertyNames(obj)) 

// [ Symbol(uid), Symbol(password) ]
console.log(Object.getOwnPropertySymbols(obj)) 



通过 well-know Symbol 暴露内部操作

Symbol.hasInstance

用于确定对象是否为函数的实例(即 obj instanceof Object)

function Test() {}

Object.defineProperty(Test, Symbol.hasInstance, {
  value: function (num) {
    return (num instanceof Number) && (num > 0 && num < 100)
  }
})

let test = new Number(1)
let test_0 = new Number(0)

console.log(test instanceof Test)
console.log(test_0 instanceof Test)

let a = new Number('123') // 123 === a flase

let b = Number('123') ? ? // 123 === b true

a instanceof Number ? ? ? // true

b instanceof Number ? ? ? // false

?Symbol.isConcatSpreadable

用于配置某对象作为Array.prototype.concat()方法的参数时是否展开其数组元素。

标识对象是否具有 length 和 数字键

let a = {
  2: '123',
  3: 'awe',
  'test': 'test',
  length: 5,
  [Symbol.isConcatSpreadable]: true
}

let arr = ['0', '1', '2']

let newArr = arr.concat(a)

console.log(newArr)
// [ '0', '1', '2', <2 empty items>, '123', 'awe', <1 empty item> ]

match && replace && search && split

  • String.match(reg) 字符串是否匹配正则表达式

  • String.replace(reg, replacement) 字符串匹配正则表达式部分内容替换

  • String.search(reg) 字符串匹配正则表达式索引位置的字符

  • String.split(reg) 字符串以正则表达式符合分割

// 等价于 /^.{10}$/
let hasLengthOf10 = {
  [Symbol.match]: function (value) {
    return value.length === 10 ? [value] : null
  },
  [Symbol.replace]: function (value, replacement) {
    return value.length === 10 ? replacement : value
  },
  [Symbol.search]: function (value) {
    return value.length === 10 ? 0 : -1
  },
  [Symbol.split]: function (value) {
    return value.length === 10 ? [,] : [value]
  }
}

const message_1 = "Hello world", // 11 字符
  message_2 = "Hello John" // 10 字符

const match_1 = message_1.match(hasLengthOf10),
  match_2 = message_2.match(hasLengthOf10)

print("match:", match_1, match_2)

const replace_1 = message_1.replace(hasLengthOf10, '1'),
  replace_2 = message_2.replace(hasLengthOf10, '1')

print("replace: ", replace_1, replace_2)

const search_1 = message_1.replace(hasLengthOf10),
  search_2 = message_2.replace(hasLengthOf10)

print("search: ", search_1, search_2)

const split_1 = message_1.split(hasLengthOf10),
  split_2 = message_2.split(hasLengthOf10)

print("split: ", split_1, split_1)

function print(str, ...arg) {
  console.log(str)
  arg.forEach((item, index) => {
    console.log(index, item)
  })
  console.log('-'.repeat(10))
}

Symbol.toPrimitive

会将对象转换为对应的原始值

  • 数字模式
    • 首先用 valueOf() 方法,如果结果为原始值,则返回
    • 其次才是 toString() 方法,如果结果为原始值,则返回
    • 报错
  • 字符串模式
    • 首先用 toString() 方法,如果结果为原始值,则返回
    • 其次才是? toString() 方法,如果结果为原始值,则返回
    • 报错
  • Default模式
    • 多数按照Number模式
    • Date对象则采用 string 模式
function Template(degrees) {
  this.degrees = degrees
}

Template.prototype[Symbol.toPrimitive] = function (hint) {
  switch (hint) {
    case 'string':
      return this.degrees + '\u00b0';
    case 'number':
      return this.degrees;
    case 'default':
      return this.degrees + ' degrees'
  }
}

const freezing = new Template(32)

console.log(freezing + '!') // "32 degrees!"
console.log(freezing / 2) // 16
console.log(String(freezing)) // "32°"



Symbol.toStringTag

更改 Object.prototype.toString.call 的返回

function Person(name) {
  this.name = name
}

Person.prototype[Symbol.toStringTag] = "Person"

let person = new Person('wgf')

console.log(Object.prototype.toString.call(person)) // [object Person]

ES5 之前JSON是由 Douglas Crockfound 的 json2.js 提供

在出现ES默认全局JSON对象后,代码中需要判断 JSON 的来源

function supportsNativeJSON() {
  return JSON !== 'undefined' && 
    Object.prototype.toString.call(JSON) === '[object JSON]'
}

Symbol.unscropable

由于 ES6 语法向下兼容,解决 with 语句绑定问题

with语句

?等价于调用了两次 colors.push()

?但是 ES6 数组引入新的方法 values,会导致上述代码歧义

?(原意应为:调用 colors 数组外部变量)

var values = [1, 2, 3],
  colors = ['red', 'yellow', 'blue'],
  color = 'black'

with (colors) {
  push(color)
  push(...values)
}

console.log(colors)

默认内置

通过手动设置该属性,with 语句将不再创建这些方法的绑定,从而支持老代码的运行

Array.prototype[Symbol.unscopables] = Object.assign(Object.create(null), {
  copyWithin: true,
  entries: true,
  fill: true,
  find: true,
  findIndex: true,
  keys: true,
  values: true
})

注意:除非使用 with 语句且正在修改代码库中的已有的代码,否则不要为自己的对象定义 Symbol.unscopable

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-05 11:09:15  更:2022-05-05 11:10:08 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 22:44:14-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码