[TOC]
>[success] # Symbol
[借鉴了阮一峰老师的es6](http://es6.ruanyifeng.com/#docs/symbol)
~~~
1.ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它是
JavaScript 语言的第七种数据类型
2.Symbol函数前不能使用new命令,否则会报错。这是因为生成的 Symbol 是
一个原始类型的值,不是对象。也就是说,由于 Symbol 值不是对象,所以不
能添加属性。基本上,它是一种类似于字符串的数据类型。
3.Symbol函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述,
主要是为了在控制台显示,或者转为字符串时,比较容易区分。
4. 在ts中想使用'Symbol' 需要在'tsconfig.json'的lib中配置 ["es6"]
~~~
>[danger] ##### Symbol -- 独一无二特性(因此比较为false)
~~~
1.下面的环境在js 中写的,因为'Symbol ' 是独一无二的,跟任何变量比较都
是'false' 因此ts中会提示不用做比较因为是'false',所以下面的案例是在浏览器
中直接运行的
2.'Symbol'函数的参数只是表示对当前 'Symbol' 值的描述,因此相同参数的
'Symbol'函数的返回值是不相等的。
3.下面案例中创建了两'Symbol' ,打印的结果为false也说明了Symbol独一无
二的特性
~~~
~~~
const s1 = Symbol()
console.log(s1)
const s2 = Symbol()
console.log(s2)
console.log(s1 === s2) // 在ts中会提示错误的
~~~
>[danger] ##### Symbol -- 接受参数用来区分
~~~
1.Symbol函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述,
主要是为了在控制台显示,或者转为字符串时,比较容易区分。
2.下面的案例只是为了区分不同的'Symbol' 因此传递了 字符串用来标记
~~~
~~~
const s4 = Symbol('wang')
const s3 = Symbol('wang')
console.log(s3)
console.log(s4)
console.log(s4 === s3)
~~~
* 打印结果
~~~
Symbol(wang)
Symbol(wang)
false
~~~
>[danger] ##### Symbol -- 传递对象打印
~~~
1. 'Symbol' 的参数是一个对象,就会调用该对象的'toString'方法,将其转为
字符串,然后才生成一个 Symbol 值。
2.在'ts'中Symbol 只能是字符串类型或者数字类型,所以下面的案例是js中
~~~
* 对象没有 'toString'
~~~
const s3 = Symbol({ a: 'a' })
console.log(s3) // Symbol([object Object]) ts 这么写会报错
~~~
* 对象有'toString'
~~~
const obj = {
toString() {
return 'abc';
}
};
const sym = Symbol(obj); // 在ts 不允许的传入对象,js中可以
sym // Symbol(abc)
~~~
>[danger] ##### Symbol -- 不能和其他值进行运算
~~~
1.'Symbol' 不能和其他值进行计算,但是可以将 'Symbol' 转成'布尔'和'字符串类型'
~~~
* 错误的不能和其他值进行计算
~~~
// const s4 = Symbol('wang')
// s4 += "wang"
~~~
* 可以转成布尔和字符
~~~
const s4 = Symbol('wang')
console.log(typeof s4.toString()) // string
console.log(typeof Boolean(s4)) // boolean
console.log(typeof !s4) // boolean
~~~
>[info] ## 在ts 中使用 Symbol 独一无二特性
~~~js
1.使用前了解 es6 新的定义对象key的变量写法形式:
// 使用[] 接受动态形式的key
let prop = 'name'
const info = {
// name: 'lison'
[`my${prop}is`]: 'lison',
[prop]:'wang'
}
console.log(info)
~~~
>[danger] ##### Symbol -- 作为对象key的使用
~~~
1.利用'Symbol' 的特性对象的属性名,就能保证不会出现同名的属性
2.在对象的内部,使用 Symbol 值定义属性时,Symbol 值必须放在方括号之
中。
3.Symbol 值作为对象属性名时,不能用点运算符
~~~
~~~
const s5 = Symbol('name')
const info2 = {
[s5]: 'wang',
age: 18,
sex: 'man'
}
console.log(info2) // {age: 18, sex: "man", Symbol(name): "wang"}
info2[s5] = 'haha'
// info2.s5 = 'haha' 错误写法
console.log(info2) //{age: 18, sex: "man", Symbol(name): "haha"}
~~~
* 但value 是方法的时候
~~~
// 缩写
let obj = {
[s](arg) { ... }
};
~~~
>[info] ## 获取对象中Symbol -- 里面的key
~~~js
1.找出对象中的key三种方式(这三种都不会输出key为Symbol的key):
1.1 for(i in obj)
1.2.Object.keys()
1.3.Object.getOwnPropertyNames()
2.只打印key为Symbol的key: Object.getOwnPropertySymbols
3.全都打印:ownKeys
~~~
* for(i in obj)
~~~
const names = Symbol('names')
let info2 = {
[names]:'wang',
age:16
}
for (const key in info2) {
console.log(key)
}
打印结果:age
~~~
* Object.keys
~~~
const names = Symbol('names')
let info2 = {
[names]:'wang',
age:16
}
console.log(Object.keys(info2))
打印结果:["age"]
~~~
* Object.getOwnPropertyNames
~~~
const names = Symbol('names')
let info2 = {
[names]:'wang',
age:16
}
console.log(Object.getOwnPropertyNames(info2))
打印结果:["age"]
~~~
* JSON.stringify
~~~
const names = Symbol('names')
let info2 = {
[names]:'wang',
age:16
}
console.log(JSON.stringify(info2))
打印结果:{"age":16}
~~~
* Object.getOwnPropertySymbols
~~~
const names = Symbol('names')
let info2 = {
[names]:'wang',
age:16
}
console.log(Object.getOwnPropertySymbols(info2)) // [Symbol(names)]
~~~
* ownKeys
~~~
const names = Symbol('names')
let info2 = {
[names]:'wang',
age:16
}
console.log(Reflect.ownKeys(info2)) // ["age", Symbol(names)]
~~~
>[info] ## Symbol.for -- 使用同一个 Symbol 值
~~~
1.它接受一个字符串作为参数,然后搜索有没有以该参数作为名称的
Symbol 值。如果有,就返回这个 Symbol 值,否则就新建并返回一个以该
字符串为名称的 Symbol 值。
2.Symbol.for()与Symbol()这两种写法,都会生成新的 Symbol。它们的区别
是,前者会被登记在全局环境中供搜索,后者不会。Symbol.for()不会每次
调用就返回一个新的 Symbol 类型的值,而是会先检查给定的key是否已经
存在,如果不存在才会新建一个值
~~~
>[danger] ##### 案例
~~~
let s1 = Symbol.for('foo');
let s2 = Symbol.for('foo');
s1 === s2 // true
~~~
>[danger] ##### 使用Symbol.keyFor -- 找到Symbol.for 标记
~~~
1.用来找到Symbol.for 标记的字符串
~~~
~~~
const s10 = Symbol.for('haha')
console.log(Symbol.keyFor(s10)) // haha
~~~
>[info] ## Symbol --更多的方法
[ts中文文档的讲解](https://typescript.bootcss.com/symbols.html)
[阮一峰es6里面的讲解](http://es6.ruanyifeng.com/#docs/symbol)
- Vue--基础篇章
- Vue -- 介绍
- Vue -- MVVM
- Vue -- 创建Vue实例
- Vue -- 模板语法
- Vue -- 指令用法
- v-cloak -- 遮盖
- v-bind -- 标签属性动态绑定
- v-on -- 绑定事件
- v-model -- 双向数据绑定
- v-for -- 只是循环没那么简单
- 小知识点 -- 计划内属性
- key -- 属性为什么要加
- 案例说明
- v-if/v-show -- 显示隐藏
- v-for 和 v-if 同时使用
- v-pre -- 不渲染大大胡语法
- v-once -- 只渲染一次
- Vue -- class和style绑定
- Vue -- filter 过滤器
- Vue--watch/computed/fun
- watch -- 巧妙利用watch思想
- Vue -- 自定义指令
- Vue -- $方法
- Vue--生命周期
- Vue -- 专属ajax
- Vue -- transition过渡动画
- 前面章节的案例
- 案例 -- 跑马灯效果
- 案例 -- 选项卡内容切换
- 案例-- 筛选商品
- 案例 -- 搜索/删除/更改
- 案例 -- 用computed做多选
- 案例 -- checked 多选
- Vue--组件篇章
- component -- 介绍
- component -- 使用全局组件
- component -- 使用局部组件
- component -- 组件深入
- component -- 组件传值父传子
- component -- 组件传值子传父
- component -- 子传父语法糖拆解
- component -- 父组件操作子组件
- component -- is 动态切换组件
- component -- 用v-if/v-show控制子组件
- component -- 组件切换的动画效果
- component -- slot 插槽
- component -- 插槽2.6
- component -- 组件的生命周期
- component -- 基础组件全局注册
- VueRouter--获取路由参数
- VueRouter -- 介绍路由
- VueRouter -- 安装
- VueRouter -- 使用
- VueRouter--router-link简单参数
- VueRouter--router-link样式问题
- VueRouter--router-view动画效果
- VueRouter -- 匹配优先级
- vueRouter -- 动态路由
- VueRouter -- 命名路由
- VueRouter -- 命名视图
- VueRouter--$router 获取函数
- VueRouter--$route获取参数
- VueRouter--路由嵌套
- VueRouter -- 导航守卫
- VueRouter -- 写在最后
- Vue--模块化方式结构
- webpack--自定义配置
- webpack -- 自定义Vue操作
- VueCli -- 3.0可视化配置
- VueCli -- 3.0 项目目录
- Vue -- 组件升级篇
- Vue -- 组件种类与组件组成
- Vue -- 组件prop、event、slot 技巧
- Vue -- 组件通信(一)
- Vue -- 组件通信(二)
- Vue -- 组件通信(三)
- Vue -- 组件通信(四)
- Vue -- 组件通信(五)
- Vue -- 组件通信(六)
- Vue -- bus非父子组件通信
- Vue -- 封装js插件成vue组件
- vue组件分装 -- 进阶篇
- Vue -- 组件封装splitpane(分割面板)
- UI -- 正式封装
- Vue -- iview 可编辑表格案例
- Ui -- iview 可以同时编辑多行
- Vue -- 了解递归组件
- UI -- 正式使用递归菜单
- Vue -- iview Tree组件
- Vue -- 利用通信仿写一个form验证
- Vue -- 使用自己的Form
- Vue -- Checkbox 组件
- Vue -- CheckboxGroup.vue
- Vue -- Alert 组件
- Vue -- 手动挂载组件
- Vue -- Alert开始封装
- Vue -- 动态表单组件
- Vue -- Vuex组件的状态管理
- Vuex -- 参数使用理解
- Vuex -- state扩展
- Vuex -- getters扩展
- Vuex--mutations扩展
- Vuex -- Action 异步
- Vuex -- plugins插件
- Vuex -- v-model写法
- Vuex -- 更多
- VueCli -- 技巧总结篇
- CLI -- 路由基础
- CLI -- 路由升级篇
- CLI --异步axios
- axios -- 封装axios
- CLI -- 登录写法
- CLI -- 权限
- CLI -- 简单权限
- CLI -- 动态路由加载
- CLI -- 数据性能优化
- ES6 -- 类的概念
- ES6类 -- 基础
- ES6 -- 继承
- ES6 -- 工作实战用类数据管理
- JS -- 适配器模式
- ES7 -- 装饰器(Decorator)
- 装饰器 -- 装饰器修饰类
- 装饰器--修饰类方法(知识扩展)
- 装饰器 -- 装饰器修饰类中的方法
- 装饰器 -- 执行顺序
- Reflect -- es6 自带版本
- Reflect -- reflect-metadata 版本
- 实战 -- 验证篇章(基础)
- 验证篇章 -- 搭建和目录
- 验证篇章 -- 创建基本模板
- 验证篇章 -- 使用
- 实战 -- 更新模型(为了迎合ui升级)
- 实战 -- 模型与接口对接
- TypeSprict -- 基础篇章
- TS-- 搭建(一)webpack版本
- TS -- 搭建(二)直接使用
- TS -- 基础类型
- TS -- 枚举类型
- TS -- Symbol
- TS -- interface 接口
- TS -- 函数
- TS -- 泛型
- TS -- 类
- TS -- 类型推论和兼容
- TS -- 高级类型(一)
- TS -- 高级类型(二)
- TS -- 关于模块解析
- TS -- 声明合并
- TS -- 混入
- Vue -- TS项目模拟
- TS -- vue和以前代码对比
- TS -- vue简单案例上手
- Vue -- 简单弄懂VueRouter过程
- VueRouter -- 实现简单Router
- Vue-- 原理2.x源码简单理解
- 了解 -- 简单的响应式工作原理
- 准备工作 -- 了解发布订阅和观察者模式
- 了解 -- 响应式工作原理(一)
- 了解 -- 响应式工作原理(二)
- 手写 -- 简单的vue数据响应(一)
- 手写 -- 简单的vue数据响应(二)
- 模板引擎可以做的
- 了解 -- 虚拟DOM
- 虚拟dom -- 使用Snabbdom
- 阅读 -- Snabbdom
- 分析snabbdom源码 -- h函数
- 分析snabbdom -- init 方法
- init 方法 -- patch方法分析(一)
- init 方法 -- patch方法分析(二)
- init方法 -- patch方法分析(三)
- 手写 -- 简单的虚拟dom渲染
- 函数表达解析 - h 和 create-element
- dom操作 -- patch.js
- Vue -- 完成一个minVue
- minVue -- 打包入口
- Vue -- new实例做了什么
- Vue -- $mount 模板编译阶段
- 模板编译 -- 分析入口
- 模板编译 -- 分析模板转译
- Vue -- mountComponent 挂载阶段
- 挂载阶段 -- vm._render()
- 挂载阶段 -- vnode
- 备份章节
- Vue -- Nuxt.js
- Vue3 -- 学习
- Vue3.x --基本功能快速预览
- Vue3.x -- createApp
- Vue3.x -- 生命周期
- Vue3.x -- 组件
- vue3.x -- 异步组件???
- vue3.x -- Teleport???
- vue3.x -- 动画章节 ??
- vue3.x -- 自定义指令 ???
- 深入响应性原理 ???
- vue3.x -- Option API VS Composition API
- Vue3.x -- 使用set up
- Vue3.x -- 响应性API
- 其他 Api 使用
- 计算属性和监听属性
- 生命周期
- 小的案例(一)
- 小的案例(二)-- 泛型
- Vue2.x => Vue3.x 导读
- v-for 中的 Ref 数组 -- 非兼容
- 异步组件
- attribute 强制行为 -- 非兼容
- $attrs 包括 class & style -- 非兼容
- $children -- 移除
- 自定义指令 -- 非兼容
- 自定义元素交互 -- 非兼容
- Data选项 -- 非兼容
- emits Option -- 新增
- 事件 API -- 非兼容
- 过滤器 -- 移除
- 片段 -- 新增
- 函数式组件 -- 非兼容
- 全局 API -- 非兼容
- 全局 API Treeshaking -- 非兼容
- 内联模板 Attribute -- 非兼容
- key attribute -- 非兼容
- 按键修饰符 -- 非兼容
- 移除 $listeners 和 v-on.native -- 非兼容
- 在 prop 的默认函数中访问 this -- ??
- 组件使用 v-model -- 非兼容
- 渲染函数 API -- ??
- Slot 统一 ??
- 过渡的 class 名更改 ???
- Transition Group 根元素 -- ??
- v-if 与 v-for 的优先级对比 -- 非兼容
- v-bind 合并行为 非兼容
- 监听数组 -- 非兼容