<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ES6提供的 Set 【WeakSet】 和 Map 【WeakMap】 数据结构</title>
</head>
<body>
<script type="text/javascript">
/*
基本类型: String、Number、Boolean、Null、Undefined、Symbol 【typeof 检测基本类型】
引用类型：对象(Object)、数组(Array)、函数(Function)
*/
// js基本数据类型
let a = undefined
console.log(typeof a) // undefined
let b = null
console.log(typeof b) // object
let c = 1
console.log(typeof c) // number
let d = true
console.log(typeof d) // boolean
let e = 'abc'
console.log(typeof e) // string
// 可以用在一个整数字面量后面加 n 的方式定义一个 BigInt ，如：10n，或者调用函数BigInt()
// BigInt 是一种内置对象，它提供了一种方法来表示大于 2^53 - 1 的整数。这原本是 Javascript中可以用 Number 表示的最大数字
// BigInt 可以表示任意大的整数
// BigInt 和 Number 不是严格相等的，但是宽松相等的
const f = 10n;
console.log(f, typeof f) // 10n "bigint"
const g = BigInt(10)
console.log(g, typeof g) // 10n "bigint"
console.log(0n === 0) // false
console.log(0n == 0) // true
// 每个从Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符；这是该数据类型仅有的目的
const sy = Symbol();
const sy1 = Symbol(42);
console.log(typeof sy, sy1) // symbol Symbol(42)
console.log(Symbol(1) === Symbol(1)) // false
// 引用数据类型
let obj = new Object // 等价 new Object() 无参数()可省略
console.log(obj, obj instanceof Object) // {} true
// Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__
console.log(Object.create({}))
let arr = new Array
console.log(arr, arr instanceof Object, typeof arr) // [] true object
// 用 Object.create实现类式继承
// ParentClass - 父类(superclass)
function ParentClass() {
this.x = 0;
this.y = 0;
}
// 父类的方法
ParentClass.prototype.move = function(x, y) {
this.x += x;
this.y += y;
console.info('ParentClass is change.');
};
// ChildClass - 子类(subclass)
function ChildClass() {
ParentClass.call(this); // call super constructor.
}
// 子类续承父类
ChildClass.prototype = Object.create(ParentClass.prototype);
ChildClass.prototype.constructor = ChildClass;
let newObj = new ChildClass()
console.log(newObj, newObj instanceof Object) // ChildClass {x: 0, y: 0} true
console.log(newObj, newObj instanceof ParentClass) // ChildClass {x: 0, y: 0} true
newObj.move(2,2) // ParentClass is change.
let fn = function(){
console.log(this)
}
console.log(fn, fn instanceof Object, typeof fn) // f(){console.log(this)} true function
// constructor判断
console.log([] instanceof Array);//->true
console.log(/^$/ instanceof RegExp);//->true
console.log([] instanceof Object);//->true
console.log([].constructor === Array);//->true
console.log([].constructor === Object);//->false 我们的constructor可以避免instanceof检测的时候,用Object也是true的问题
console.log({}.constructor === Object); // true
/*
Array.isArray() ECMAScript5将Array.isArray()正式引入JavaScript，目的就是准确地检测一个值是否为数组 IE8不支持
两个或者多个typeof一起使用时,返回值一定是"string";
检测的不管是数组还是正则都返回的是"object",所以typeof不能判断一个值是否为数组
Object.prototype.toString.call(value) 判断某个对象值属于哪种内置类型
*/
// 接下来谈下这个 ES6中的Set 和 Map 数据结构
// Set 数据结构
let mySet = new Set()
console.log(mySet,typeof mySet) // Set(0){} "object"
mySet.add(1)
mySet.add(2)
mySet.add(2)
mySet.add(3)
console.log(mySet) // Set(3){1,2,3}
let setTest = new Set([1,2,3,4,5,5,6,6])
let setArr = [...setTest]
console.log(setTest) // Set(3){1,2,3,4,5,6}
console.log(setArr) // [1, 2, 3, 4, 5, 6]
// 结论
/*
Set 数据结构 类似于数组但是Set不会添加重复的值
Set 加入值的时候，不会发生类型转换
[...new Set(array)] 可以去除数组重复成员的方法
[...new Set('string')].join('') 可以去除字符串里面的重复字符
Set函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化
Array.from方法可以将 Set 结构转为数组 【Array.from是将类数组转为数组的一种方法】
将类数组转为数组的方法:
1、Array的slice方法 例如：let arr = Array.prototype.slice.call(arguments);
2、Array.from() 例如：let arr = Array.from(arguments); 只要有length属性的对象，都可以应用此方法转换成数组
3、扩展运算符... 例如：let arr = [...arguments]; 这种数据结构必须有遍历器接口
4、jquery的$.makeArray() 例如：let arr = $.makeArray(arguments);
使用Array的slice方法，此方法如果不传参数的话会返回原数组的一个拷贝，因此可以用此方法转换类数组到数组
let arr = Array.prototype.slice.call(arguments);
// 等同于
let arr = [].slice.call(arguments)
*/
// WeakSet 数据结构
const myWeakSet = new WeakSet();
// myWeakSet.add(1) // 报错 Invalid value used in weak set
console.log(myWeakSet,typeof myWeakSet) // WeakSet {} "object"
const arrs = [[1, 2], [3, 4]];
const ws = new WeakSet(arrs);
console.log(ws) // WeakSet {[1, 2], [3, 4]}
// 结论
/*
WeakSet 结构与 Set 类似，也是不重复的值的集合
WeakSet 的成员只能是对象，而不能是其他类型的值
WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，
如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存
WeakSet 没有size属性 ES6 规定 WeakSet 不可遍历
*/
// Map 数据结构
const mp = new Map();
console.log(mp,typeof mp) // Map(0) {} "object"
const items = [
['name', '小明'],
['age', 28]
]
items.forEach(
([key, value]) => mp.set(key, value)
)
console.log(mp) // Map(2) {"name" => "小明", "age" => 28}
const map = new Map();
map.set(1, 'aaa').set(1, 'bbb')
console.log(map,map.get(1)) // Map(1) {1 => "bbb"} 'bbb'
const mapTest = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
])
console.log([...mapTest.keys()]) // [1, 2, 3]
console.log([...mapTest.values()]) // ['one', 'two', 'three']
console.log([...mapTest.entries()]) // [[1,'one'], [2, 'two'], [3, 'three']]
console.log([...mapTest]) // [[1,'one'], [2, 'two'], [3, 'three']]
// 结论
/*
对同一个键多次赋值，后面的值将覆盖前面的值
读取【get方法】一个未知的键，则返回undefined
只有对同一个对象的引用，Map 结构才将其视为同一个键
同样的值的两个实例，在 Map 结构中被视为两个键
Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键
Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。
如果你需要“键值对”的数据结构，Map 比 Object 更合适
任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构都可以当作Map构造函数的参数, Set和Map都可以用来生成新的 Map
Map 结构转为数组结构，比较快速的方法是使用扩展运算符（...）
*/
// WeakMap 数据结构
const wmp = new WeakMap();
console.log(wmp, typeof wmp) // WeakMap {} "object"
let key = {age: 1}
console.log(wmp.set(key,20)) // WeakMap {{…} => 20}
console.log(wmp.get(key)) // 20
// 结论 【WeakMap与Map的区别有两点】
/*
WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名
WeakMap的键名所指向的对象，不计入垃圾回收机制
如果你要往对象上添加数据，又不想干扰垃圾回收机制，就可以使用 WeakMap
WeakMap的专用场合就是，它的键所对应的对象，可能会在将来消失。WeakMap结构有助于防止内存泄漏
WeakMap 弱引用的只是键名，而不是键值。键值依然是正常引用
WeakMap 的另一个用处是部署私有属性 class _xx开头的
*/
</script>
</body>
</html>
