1.数据类型Symbol
1.1 理解Symbol
1.1.1为什么用Symbol
ES5里面对象的属性名都是字符串，如果你需要使用一个别人提供的对象，你对这个对象有哪些属性也不是很清楚，但又想为这个对象新增一些属性，那么你新增的属性名就很可能和原来的属性名发送冲突，显然我们是不希望这种情况发生的。所以，我们需要确保每个属性名都是独一无二的，这样就可以防止属性名的冲突了。因此，ES6里就引入了Symbol，用它来产生一个独一无二的值。
1.1.2. Symbol是什么
定义:Symbol实际上是ES6引入的一种原始数据类型
1.1.3. Symbol的使用
let sym = Symbol('aa');
console.log(sym); // Symbol(aa)
typeof sym; // "symbol"
1.1.4 Symbol函数前不能用new
Symbol函数不是一个构造函数，前面不能用new操作符。所以Symbol类型的值也不是一个对象，不能添加任何属性，它只是一个类似于字符型的数据类型。如果强行在Symbol函数前加上new操作符，会报错，如下：
let sym = new Symbol();
// Uncaught TypeError: Symbol is not a constructor(…)
1.1.5 Symbol使用注意事项
注意
- Symbol 前面不能加new,加new就报错
- Symbol() 返回的是一个唯一值,通常使用最为唯一的key使用
- symbol是一种单独的数据类型,就叫symbol,是基本数据类型
- 如果symbol作为了key,那么用for..in..循环,是循环不出来symbol的key的
1.1.6 Symbol的用处
用处一般
symbol作为josn的key使用
let symbol = Symbol('a');
let json = {
a: 'aa',
b: 'bb',
[symbol] : '我是symbol'
}
console.log(json['a']); // aa
console.log(json[symbol]); // 我是symbol
1.2. Symbol函数的参数
1.2.1 字符串作为参数
用上面的方法生成的Symbol值不好进行区分，Symbol函数还可以接受一个字符串参数，来对产生的Symbol值进行描述，方便我们区分不同的Symbol值。
let s1 = Symbol('s1');
let s2 = Symbol('s2');
console.log(s1); // Symbol(s1)
console.log(s2); // Symbol(s2)
s1 === s2; // false
let s3 = Symbol('s2');
s2 === s3; // false
- 给Symbol函数加了参数之后，控制台输出的时候可以区分到底是哪一个值；
- Symbol函数的参数只是对当前Symbol值的描述，因此相同参数的Symbol函数返回值是不相等的；
1.2.2 对象作为参数
如果Symbol函数的参数是一个对象，就会调用该对象的toString方法，将其转化为一个字符串，然后才生成一个Symbol值。所以，Symbol函数的参数只能是字符串。
let sym = Symbol({});
console.log(sym); // Symbol([object Object])
1.3 Symbol值不可以进行运算
既然Symbol是一种数据类型，那我们一定想知道Symbol值是否能进行运算。告诉你，Symbol值是不能进行运算的,不仅不能和Symbol值进行运算，也不能和其他类型的值进行运算，否则会报错。
Symbol值可以显式转化为字符串和布尔值，但是不能转为数值。
let sym1 = Symbol('symbol1')
let sym2 = Symbol('symbol2')
sym1 + sym2; // TypeError: Cannot convert a Symbol value to a number
// 转字符串
String(sym1); // "Symbol(symbol1)"
// 转布尔值
Boolean(sym1); // true
// 转数字
Number(sym1); // TypeError: Cannot convert a Symbol value to a number
1.4. Symbol 作为属性
Symbol就是为对象的属性名而生，那么Symbol值怎么作为对象的属性名呢？有下面几种写法：
let obj = {};
let sym = Symbol();
// 第一种写法
obj[sym] = 'mySymbol';
// 第二种写法
obj = {
[sym]: 'mySymbol'
}
// 第三种写法
Object.defineProperty(obj, sym, {value: 'mySymbol'});
obj.sym; // undefined
obj.sym = 'Symbol';
obj[sym] // mySymbol
obj['sym'] // 'Symbol'
- 使用对象的Symbol值作为属性名时，获取相应的属性值不能用点运算符；
- 如果用点运算符来给对象的属性赋Symbol类型的值，实际上属性名会变成一个字符串，而不是一个Symbol值；
- 在对象内部，使用Symbol值定义属性时，Symbol值必须放在方括号之中，否则只是一个字符串。
1.5. Symbol值作为属性名的遍历
使用for...in和for...of都无法遍历到Symbol值的属性，Symbol值作为对象的属性名，也无法通过Object.keys()、Object.getOwnPropertyNames()来获取了。
但是，不同担心,我们可以使用Object.getOwnPropertySymbols()方法获取一个对象上的Symbol属性名。
let sym1 = Symbol('symbol1');
let sym2 = Symbol('symbol2');
let obj = {
name:'wuwei',
[sym1]: 'symbol1',
[sym2]: 'symbol2'
}
Object.getOwnPropertySymbols(obj); // [Symbol(symbol1), Symbol(symbol2)]
for.. in..循环遍历不出symbol的key的
let symbol = Symbol('a');
let json = {
a: 'aa',
b: 'bb',
[symbol] : '我是symbol'
}
for(let item in json){
console.log(item); // a b
}
2. Set & WeakSet
ES6新增的数据结构, 数组其实就是一种数据结构
2.1 Set数据结构
类似于数组,但又跟数组不一样,数组里面可以有重复的值,Set里面不能有重复值
let arr = ['a','b','c','a'];
console.log(arr); // ["a", "b", "c", "a"]
let set = new Set(['a','b','c','a']);
console.log(set); // Set(3) {"a", "b", "c"}
创建数组的两种方式,一字面量,二构造函数
创建Set的方式,使用构造函数
new Set(['a','b'])
接受一个数组参数
let set = new Set(['a','b','c']);
console.log(set); // Set(3) {"a", "b", "c"}
// 例一
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]
// 例二
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5
2.2 Set 数据的方法
2.2.1. 添加内容 add()
往set里面添加内容
let set = new Set();
set.add('a');
set.add('b');
console.log(set); // Set(2) {"a", "b"}
2.2.2. 删除内容 delete()
console.log(set); // Set(2) {"a", "b"}
set.delete('a');
console.log(set); // Set(1) {"b"}
2.2.3. 判断set有没有一个值 has()
set.has('a'); // false
set.has('b'); // true
2.2.4. 获取set数据的个数,长度,size
和length很像就是一个属性,不是方法
set.size; // 1
2.2.5. 清空set数据的所有内容 clear()
let set = new Set(['a','b','c']);
console.log(set); // Set(3) {"a", "b", "c"}
set.clear();
console.log(set) // Set(0) {}
2.2.6 set 循环
let set = new Set(['a','b','c']);
for(var item of set){ // 默认就是values
console.log(item);
}
// a
// b
// c
遍历key
let set = new Set(['a','b','c']);
for(var item of set.keys()){
console.log(item);
}
// a
// b
// c
遍历值
let set = new Set(['a','b','c']);
for(var item of set.values()){
console.log(item);
}
// a
// b
// c
遍历每一项
let set = new Set(['a','b','c']);
for(var item of set.entries()){
console.log(item);
}
// ["a", "a"]
// ["b", "b"]
// ["c", "c"]
// 也可以直接解构
for(var [key,value] of set.entries()){
console.log(key,value);
}
forEach
let set = new Set(['a','b','c']);
set.forEach((value,index) => {
console.log(value,index);
})
// a a
// b b
// c c
2.2.7 set 的add方法的链式操作
因为add返回自己
let set = new Set();
set.add('a').add('b').add('c');
2.2.8. set转为数组
因为只有转为数组后,才能使用数组身上set不具有的一些方法,比如map
let arr = [...new Set()];
数组去重
set 的用处
let arr = [1,3,5,1,2,6,3,1,5,2];
let newArr = [...new Set(arr)];
console.log(newArr); // [1, 3, 5, 2, 6]
还可以字符串去重
let str = 'wuwei';
let newStr = [...new Set(str)].join('')
注意:
- 向 Set 加入值的时候，不会发生类型转换，所以
5和"5"是两个不同的值。 - Set 内部判断两个值是否不同，使用的算法叫做“Same-value equality”，它类似于精确相等运算符（
===），主要的区别是NaN等于自身，而精确相等运算符认为NaN不等于自身。 -
注意：两个对象总是不相等的。
2.2.9 Array.from()可以将 Set 结构转为数组。
const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);
我们都知道数组里面可以放对象,其实set也可以了,
let set = new Set();
let json = {
a: 1,
b: 2
}
set.add(json);
console.log(set); // Set(1) {{…}}
官网说法set里面放数组,你不能放方法
let set = new Set({a:1,b:2});
console.log(set);
// 报错
所以官方给我们提供了一个放对象方法就是WeakSet
3. WeakSet
3.1 WeakSet的使用
WeackSet 为了处理对象弱引用问题
new Set([]) 存储数组
new WeakSet({}) 存储json,这种写法不靠谱
我们确认,初始往里面添加东西,是不行的,最好用add添加,而且没有size属性
用法
let weakset = new WeakSet({a:1,b:2})
console.log(weakset); // 会发现这么写就挂了,官方还没那准
因此weakset只能通过add添加项
let wSet = new WeakSet();
let json = {
a: 1,
b: 2
}
wSet.add(json);
console.log(wSet); // WeakSet {{…}}
没有size属性
let wSet = new WeakSet();
let json = {
a: 1,
b: 2
}
wSet.add(json);
console.log(wSet.size); // undefined
let set = new Set({a:1,b:2});
3.2 WeakSet与Set 不同之处
- 在WeakSet中add 方法传入非对象参数会导致报错, has, delete方法传入非对象则会返回false
- Weak Set 集合不可迭代, 不能使用for...of , forEach循环
- 不支持size属性
- Weak Set不暴露任何迭代器,不能使用keys(), values() 方法
4. Map
类似于对象,但是对象的键key只能是字符串
map的key可以是任意类型
为了解决这个对象属性只能是字符串的问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。
4.1. 设置map set()操作
let map = new Map();
map.set(key,value); // 设置键值
map.set('a','wuwei'); // Map(1) {"a" => "wuwei"}
用object作为key
let map = new Map();
let json = {
a:1,
b:2
}
// json作为key值
map.set(json,'wuwei'); // Map(1) {{…} => "wuwei"}
// json作为value值
map.set('a',json); // Map(1) {"a" => {…}}
4.2. 获取map get()操作
let map = new Map();
let json = {
a:1,
b:2
}
// json作为key值
map.set(json,'wuwei');
// 获取map
map.get(json); // "wuwei"
4.3. 删除一项 delete()
map.delete();
删除成功返回true,删除失败返回false
map.delete(json); // 删除一项
4.4. 判断有没有 has()
返回布尔值,有则为true,没有则为false
map.has(json);
4.5. 清空 clear()
map.clear();
4.6. 循环
循环和set一样
for(let [key,value] of map.entries()){
console.log(key,value)
}
for(let key of map.keys()){}
for(let value of map.values()){}
5. WeakMap
和Weak Set 是弱引用Set集合, Weak Map是弱引用Map集合
weakMap集合中键名必须是一个对象
let wMap = new WeakMap();
let json = {
a:1,
b:2
}
wMap.set(json,'wuwei');
console.log(wMap) // WeakMap {{…} => "wuwei"}
如果key不是对象,就挂了
wMap.set('a','wuwei');
//TypeError: Invalid value used as weak map key
总结
- Set 里面是数组,不重复,没有set,没有get方法(add)
- Map 对json功能增强,key可以是任意类型的值(set,get)
网友评论