ES6篇章Vue3用到了一些ES6的语法阐述
Symbol
SymbolES6的一个新增类型、基本数据类型.
首先阐述一下他的概念返回独一无二的值
独一无二的类型
let testsym = Symbol("这个描述没有任何用处就是给我们自己看的");
let symbol01 = Symbol("01");
let symbol02 = Symbol("01");
symbol01 != symbol02; // 两个symbol永远不相等。
// vscode 插件 code runner 可以直接在vscode里面执行js代码
// 这个玩意一般用在什么地方？这个比较关键我一开误区也是认为这个除了做个key以为没别的用处。
// 作为对象的key用的多
// 例如
let symbolName = Symbol("name");
let symbol = Symbol("age");
let o = {
[symbol]: '3344',
};
o[symbolName] = '锤子';
console.log(o[symbolName])
// 遍历对象
// symbol实行默认是不能枚举的。 用Object.keys 照样拿不到 Object.keys只能获取普通类型的key
for(let k in o){
console.log("K::", o[k]); // symbol的选项不会在这里出现 如果想拿到symbol应该如何操作？
// Object.getOwnPropertySymbols(o) // 获取所有的symbol
}
// 获取普通key加Object.getOwnPropertySymbols所有的属性
// 比较简单的方式
// Reflect
// 新东西不想在往Object上扩展就单独找了个对象上，后续新增的方法都放到 Reflect 上。他将来可能会替代Object
// 如何遍历Symbol? Reflect的形式
// Reflect.ownKyes(o).forEach(item => {consle.log(item)}) // 这个是可以打印symbol的 获取所有的key
Reflect的一些常用的用法
/**
* Reflect 的常用方法
* defineProperty Object有的都的都会在Reflect上放一份。
* Reflect.get
* Reflect.set
* Reflect.has
* Reflect.ownKeys
* Reflect.preventExtensions // 把对象变成一个不可以扩展的。 Object.isExtensible true代表对象不可以被扩展
* ...
* Reflect.apply
* 使用场景
* const fn = () => {}
* fn.apply = () => {console.log("函数apply")}
* // 如何调用函数原生的apply?
* // fn.apply 调用的是上面定义的那个，如何调用function的原生的？ call 是让apply中的this 有指向，指向fn 并且让apply执行
* // 可以这么玩Function.prototpye.apply.call(fn, null,xxx) // 这个写法有点难看
* // Reflect.apply(fn, null,[1,2,3]) // 这个代表fn上apply
*/
// Symbol.for() // 可以根据
let s3 = Symbol.for("something"); // 声明一个全新的
let s4 = Symbol.for("something"); // 把之前声明的拿过来用就不再声明了
s3==s4 true
Symbol 元编程能力
// 什么是元编程的能力？ 可以改变语法本身的
/**
* 比如说typeof 可以判断类型 typeof 判断基本类型的 Object.prototype.toString 判断复杂类型的 instenceof 判断对像实例类型
* 如何自定义一个类型？配合着Object.prototype.toString() 使用
* let obj = {[ Symbol.toStringTag ]:"admin"}
* Object.prototype.toString(obj) // 返回的事admin 这就代表了 obj 是admin类型的自己创建了个类型
* 隐士类型转化
* let obj = {}
* obj + 1 ? valeof()+1 没有就toString() + 1
* 可以这么来玩玩
* let obj = {[Symbol.toPrimitive](type){ return '1' }}
* obj+1 = '11'
* Symbol.xxx 这些内容用的不多
* 常用的 Symbol.toStringTag 自增的类型配合着 Object.prototype.toString 就可以知道当前对象是那种类型的了
* Symbol.toPrimitive 给隐士转换提供方便。
* Symbol.interator // 迭代器用的多 对象有了这个才能用forEach
* instenceof
* let a = {};
* console.log({name:1} instenceof a) // false
* 查找实例怎么找的？
* 通过这个上原型上去找__proto__
* 如何改写?
* let a = {[Symbol.hasInstance](val){
* // val 现在是{name:1}
* // return true {name:1} instenceof a true
* // return false {name:1} instenceof a false
* return 'name' in val; // val上有name {name:1} instenceof a 就为true.
* }};
* 【Symbol挺强悍，有些方法可以修改一些语法上的内容】
* Symbol 可以创建独一无二的类型
*/
Set、Map 数据类型 存放数据 Set去重
WeakSet、WeakMap
/**
* 使用用法 Set 参数是可叠戴的数据
* let set = new Set([1,1,1,1,1,1,1,2,2,2,2,3,3,3,3]); // 结果是123 它核心就是去重
* set.add(1);
* clear 清空所有
* delete 删除
* entries 获取key和value 返回的结果是个数组 和 Object.entries Object.keys entries.values 一种类型的 【entries】 key v 是一样的比如 new Set(['a']) [['a','a']]
* has(1)
* let map = new Map(); // 放键值对的参数是个二维数组 let map = new Map([['key', 'val']]) // 键如果发生了重复后面的覆盖前面的
* map 的一些方法
* has
* set('c', 2)
* forEach
* map的key可以是对象
* set([], 1)
* Object.prototype.toString.call(new Map()) [Object Map]
* Object.prototype.toString.call(new Set()) [Object Set]
* 数组的 交集 ｜ 并集 ｜ 差集
* let ar1 = [1,2,3]; let ar2 = [2,3,4];
* // 并集没有重复的
* let s = new Set([...ar1, ...ar2]);
* [...s] // 并集
* // 对象可迭代是个什么鬼？
* 对象内部有
* Symbol.interator 的实现方法就可以被迭代
* 因为Symbol可以做元编程像对语言本身修改就修改。
* 对象里面有个__proto__ 下面有Symbol
* 类型
* Symbol(Symbol.toStringTag): "Set"
* // 交集
* let res = [];
* let ar1set = Set([...ar1]);
* let ar2set = Set([...ar2]);
* ar1set.forEach(item => { if(ar2set.has(item)) {res.push(item)} }) // Set只有forEach 没有 .map .filter 这种内容
* set 转数组 [...set]
* 数组转set new Set([...ay])
* // 差集 要看以谁为基准 A [1,2,3,4] B [3,4,5,6] A和B差了56 B和A查了12 谁减去谁的问题
* 为什么有时候用Map 有时用WeakMap?
* 弱引用
* 浏览器的垃圾回收标记回收
* class MyClass{}
* let myc = new MyClass();
* let myMap = new Map();
* myMap.set(myc, '1')
* myc = null // 这里的数据不会被垃圾回收 myMap.set(myc, '1');
*
* 如果Map改成了 WeakMap 就可以回收了 这个不会影响垃圾回收 【弱引用】
* 所以缓存比较适合用weakmap 想清理了直接干成null
* 这就是为什么vue3 外边用了weakmap 里面用了map 不用缓存了清理起来很舒适
*/
