1.數(shù)據(jù)類(lèi)型Symbol
1.1 理解Symbol
1.1.1為什么用Symbol
ES5里面對(duì)象的屬性名都是字符串更耻，如果你需要使用一個(gè)別人提供的對(duì)象凯正，你對(duì)這個(gè)對(duì)象有哪些屬性也不是很清楚撬码，但又想為這個(gè)對(duì)象新增一些屬性酪呻，那么你新增的屬性名就很可能和原來(lái)的屬性名發(fā)送沖突，顯然我們是不希望這種情況發(fā)生的痒筒。所以酝豪，我們需要確保每個(gè)屬性名都是獨(dú)一無(wú)二的涛碑，這樣就可以防止屬性名的沖突了。因此孵淘，ES6里就引入了Symbol蒲障，用它來(lái)產(chǎn)生一個(gè)獨(dú)一無(wú)二的值。
1.1.2. Symbol是什么
定義:Symbol實(shí)際上是ES6引入的一種原始數(shù)據(jù)類(lèi)型
1.1.3. Symbol的使用
let sym = Symbol('aa');
console.log(sym); // Symbol(aa)
typeof sym; // "symbol"
1.1.4 Symbol函數(shù)前不能用new
Symbol函數(shù)不是一個(gè)構(gòu)造函數(shù)瘫证，前面不能用new操作符揉阎。所以Symbol類(lèi)型的值也不是一個(gè)對(duì)象，不能添加任何屬性背捌，它只是一個(gè)類(lèi)似于字符型的數(shù)據(jù)類(lèi)型毙籽。如果強(qiáng)行在Symbol函數(shù)前加上new操作符，會(huì)報(bào)錯(cuò)毡庆，如下：
console.log(Symbol); //Symbol是函數(shù)坑赡，是基本數(shù)據(jù)類(lèi)型烙如，用于創(chuàng)建symbol數(shù)據(jù)
let sym = new Symbol(); //不是構(gòu)造函數(shù)，不能new
// Uncaught TypeError: Symbol is not a constructor(…)
1.1.5 Symbol使用注意事項(xiàng)
注意
Symbol 前面不能加new,加new就報(bào)錯(cuò)
Symbol() 返回的是一個(gè)唯一值,通常使用最為唯一的key使用
symbol是一種單獨(dú)的數(shù)據(jù)類(lèi)型,就叫symbol,是基本數(shù)據(jù)類(lèi)型
-
如果symbol作為了key,那么用for..in..循環(huán),是循環(huán)不出來(lái)symbol的key的
let sym = Symbol();
let sym2 = Symbol();
console.log(sym==sym2); //Symbol創(chuàng)建的是獨(dú)一無(wú)二的值
console.log(sym);
console.log(typeof sym);
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函數(shù)的參數(shù)
1.2.1 字符串作為參數(shù)
用上面的方法生成的Symbol值不好進(jìn)行區(qū)分毅否，Symbol函數(shù)還可以接受一個(gè)字符串參數(shù)亚铁，來(lái)對(duì)產(chǎn)生的Symbol值進(jìn)行描述，方便我們區(qū)分不同的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函數(shù)加了參數(shù)之后徘溢，控制臺(tái)輸出的時(shí)候可以區(qū)分到底是哪一個(gè)值；
- Symbol函數(shù)的參數(shù)只是對(duì)當(dāng)前Symbol值的描述捆探，因此相同參數(shù)的Symbol函數(shù)返回值是不相等的然爆；
1.2.2 對(duì)象作為參數(shù)
如果Symbol函數(shù)的參數(shù)是一個(gè)對(duì)象，就會(huì)調(diào)用該對(duì)象的toString方法黍图，將其轉(zhuǎn)化為一個(gè)字符串曾雕，然后才生成一個(gè)Symbol值。所以助被，Symbol函數(shù)的參數(shù)只能是字符串翻默。
let sym = Symbol({});
console.log(sym); // Symbol([object Object])
1.3 Symbol值不可以進(jìn)行運(yùn)算
既然Symbol是一種數(shù)據(jù)類(lèi)型，那我們一定想知道Symbol值是否能進(jìn)行運(yùn)算恰起。告訴你，Symbol值是不能進(jìn)行運(yùn)算的,不僅不能和Symbol值進(jìn)行運(yùn)算趾牧，也不能和其他類(lèi)型的值進(jìn)行運(yùn)算检盼，否則會(huì)報(bào)錯(cuò)。
Symbol值可以顯式轉(zhuǎn)化為字符串和布爾值翘单，但是不能轉(zhuǎn)為數(shù)值吨枉。
let sym1 = Symbol('symbol1')
let sym2 = Symbol('symbol2')
sym1 + sym2; // TypeError: Cannot convert a Symbol value to a number
// 轉(zhuǎn)字符串
String(sym1); // "Symbol(symbol1)"
// 轉(zhuǎn)布爾值
Boolean(sym1); // true
// 轉(zhuǎn)數(shù)字
Number(sym1); // TypeError: Cannot convert a Symbol value to a number
1.4. Symbol 作為屬性
Symbol就是為對(duì)象的屬性名而生，那么Symbol值怎么作為對(duì)象的屬性名呢哄芜？有下面幾種寫(xiě)法：
let obj = {};
let sym = Symbol();
// 第一種寫(xiě)法
obj[sym] = 'mySymbol';
// 第二種寫(xiě)法
obj = {
[sym]: 'mySymbol'
}
// 第三種寫(xiě)法
Object.defineProperty(obj, sym, {value: 'mySymbol'});
obj.sym; // undefined
obj.sym = 'Symbol';
obj[sym] // mySymbol
obj['sym'] // 'Symbol'
- 使用對(duì)象的Symbol值作為屬性名時(shí)貌亭，獲取相應(yīng)的屬性值不能用點(diǎn)運(yùn)算符；
- 如果用點(diǎn)運(yùn)算符來(lái)給對(duì)象的屬性賦Symbol類(lèi)型的值认臊，實(shí)際上屬性名會(huì)變成一個(gè)字符串圃庭，而不是一個(gè)Symbol值；
- 在對(duì)象內(nèi)部失晴，使用Symbol值定義屬性時(shí)剧腻，Symbol值必須放在方括號(hào)之中，否則只是一個(gè)字符串涂屁。
1.5. Symbol值作為屬性名的遍歷
使用for...in和for...of都無(wú)法遍歷到Symbol值的屬性书在，Symbol值作為對(duì)象的屬性名，也無(wú)法通過(guò)Object.keys()拆又、Object.getOwnPropertyNames()來(lái)獲取了儒旬。
//獲取Symbols屬性,打印值
let sym = Symbol('a');
let sym2 = Symbol('b');
let obj ={
[sym]:'aa',
[sym2]:'bb',
name:'xiaoming',
age:19
}
console.log(obj);
//console.log(Object.keys(obj));// 構(gòu)造函數(shù)的靜態(tài)方法獲取所有屬性的集合栏账，獲取不到symbol
//console.log(Object.getOwnPropertyNames(obj));//獲取自己身上的屬性名稱(chēng),獲取不到symbol
console.log(Object.getOwnPropertySymbols(obj)); //獲取自己身上的Symbols屬性
let arr = Object.getOwnPropertySymbols(obj);//拿到屬性
arr.forEach((item) => {
console.log(obj[item]); //打印屬性對(duì)應(yīng)的值
})
但是，不同擔(dān)心,我們可以使用Object.getOwnPropertySymbols()方法獲取一個(gè)對(duì)象上的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時(shí) symbol屬性是循環(huán)不出來(lái)的
let sym = Symbol();
let sym2 = Symbol();
let obj ={
[sym]:'aa',
[sym2]:'bb',
name:'xiaoming',
age:19
}
for(let key in obj){
console.log(key); //for in時(shí) symbol屬性是循環(huán)不出來(lái)的
}
for.. in..循環(huán)遍歷不出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新增的數(shù)據(jù)結(jié)構(gòu), 數(shù)組其實(shí)就是一種數(shù)據(jù)結(jié)構(gòu)
2.1 Set數(shù)據(jù)結(jié)構(gòu)
類(lèi)似于數(shù)組,但又跟數(shù)組不一樣,數(shù)組里面可以有重復(fù)的值,Set里面不能有重復(fù)值
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"}
創(chuàng)建數(shù)組的兩種方式,一字面量,二構(gòu)造函數(shù)
創(chuàng)建Set的方式,使用構(gòu)造函數(shù)
new Set(['a','b'])
接受一個(gè)數(shù)組參數(shù)
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 數(shù)據(jù)的方法
2.2.1. 添加內(nèi)容 add()
往set里面添加內(nèi)容
console.log(Set); //Set是內(nèi)置構(gòu)造函數(shù)
let set =new Set(); //無(wú)參數(shù)創(chuàng)建Set,數(shù)據(jù)靠后天加入
set.add(20);//一次只能傳一個(gè)參數(shù)挡爵，也可以傳引用類(lèi)型
console.log(set); //通過(guò)構(gòu)造出來(lái)的對(duì)象，可以查看自己和原型上的方法凉翻、屬性
set.add ('xiaoming').add ('xiaohong').add ('xiaokai');//鏈?zhǔn)教砑?console.log(set);
2.2.2. 刪除內(nèi)容 delete()
let set =new Set([10,30,40,60,20]);
console.log(set);
console.log(set.delete(40));//刪除成功返回true了讨，失敗返回false
console.log(set);
2.2.3. 判斷set有沒(méi)有一個(gè)值 has()
let set =new Set([10,30,40,60,20]);
console.log(set.has(40));//包含參數(shù)返回true，沒(méi)有false
2.2.4. 獲取set數(shù)據(jù)的個(gè)數(shù),長(zhǎng)度,size
和length很像就是一個(gè)屬性,不是方法
set.size; // 1
2.2.5. 清空set數(shù)據(jù)的所有內(nèi)容 clear()
let set =new Set([10,30,40,60,20]);
console.log(set.clear());//清空不需要參數(shù)制轰，返回undefined
console.log(set);
2.2.6 set 循環(huán)（迭代就是循環(huán)里面所有的值）
打印console.log(set);可以看到set原型上有Symbol(Symbol.iterator)前计，說(shuō)明有迭代器，可以使用for of迭代
let set =new Set([10,30,40,60,20]);
for(let key of set){
console.log(key);
}
迭代器的值是個(gè)函數(shù)Symbol(Symbol.iterator): ? values()垃杖，當(dāng)調(diào)用完男杈，迭代器返回一個(gè)對(duì)象SetIterator {}
let set =new Set([10,30,40,60,20]);
for(let key of set){
console.log(key);
}
console.log(set);//打印出來(lái)set有索引，但不是正常理解的數(shù)組索引
console.log(set.values()); //拿到值
console.log(set.keys()); //拿到值
console.log(set.entries()); //值組成的數(shù)組
for(let key of set.values()){
console.log(key);
}
for(let key of set.keys()){
console.log(key);
}
for(let key of set.entries()){
console.log(key);
}
set.forEach(function(){
console.log(arguments); //forEach出來(lái)也是沒(méi)有索引的调俘，值和索引一樣
})
let set = new Set(['a','b','c']);
for(var item of set){ // 默認(rèn)就是values
console.log(item);
}
遍歷key
let set = new Set(['a','b','c']);
for(var item of set.keys()){
console.log(item);
}
遍歷值
let set = new Set(['a','b','c']);
for(var item of set.values()){
console.log(item);
}
遍歷每一項(xiàng)
let set = new Set(['a','b','c']);
for(var item of set.entries()){
console.log(item);
}
// ["a", "a"]
// ["b", "b"]
// ["c", "c"]
// 也可以直接解構(gòu)
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);
})
2.2.7 set 的add方法的鏈?zhǔn)讲僮?/p>
因?yàn)閍dd返回自己
let set = new Set();
set.add('a').add('b').add('c');
2.2.8. set轉(zhuǎn)為數(shù)組
因?yàn)橹挥修D(zhuǎn)為數(shù)組后,才能使用數(shù)組身上set不具有的一些方法,比如map
let arr = [...new Set()];
// set的作用:數(shù)組去重
let arr = [10,20,30,40,30,20,10];
let set =new Set(arr);
console.log(set);
let arr2= [...set];//去重后的set轉(zhuǎn)為數(shù)組
//let arr2 = Array.from(set);//也可使用from
console.log(arr2);
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 加入值的時(shí)候伶棒，不會(huì)發(fā)生類(lèi)型轉(zhuǎn)換，所以5和"5"是兩個(gè)不同的值彩库。
- Set 內(nèi)部判斷兩個(gè)值是否不同肤无，使用的算法叫做“Same-value equality”，它類(lèi)似于精確相等運(yùn)算符（===）骇钦，主要的區(qū)別是NaN等于自身宛渐，而精確相等運(yùn)算符認(rèn)為NaN不等于自身。
- 注意：兩個(gè)對(duì)象總是不相等的眯搭。
2.2.9 Array.from()可以將 Set 結(jié)構(gòu)轉(zhuǎn)為數(shù)組窥翩。
const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);
我們都知道數(shù)組里面可以放對(duì)象,其實(shí)set也可以了,
let set = new Set();
let json = {
a: 1,
b: 2
}
set.add(json);
console.log(set); // Set(1) {{…}}
官網(wǎng)說(shuō)法set里面放數(shù)組,你不能放方法
let set = new Set({a:1,b:2});
console.log(set);
// 報(bào)錯(cuò)
所以官方給我們提供了一個(gè)放對(duì)象方法就是WeakSet
3. WeakSet
3.1 WeakSet的使用
WeackSet 為了處理對(duì)象弱引用問(wèn)題
new Set([]) 存儲(chǔ)數(shù)組
new WeakSet({}) 存儲(chǔ)json,這種寫(xiě)法不靠譜
我們確認(rèn),初始往里面添加?xùn)|西,是不行的,最好用add添加,而且沒(méi)有size屬性
用法
let weakset = new WeakSet({a:1,b:2})
console.log(weakset); // 會(huì)發(fā)現(xiàn)這么寫(xiě)就掛了,官方還沒(méi)那準(zhǔn)
因此weakset只能通過(guò)add添加項(xiàng)
let wSet = new WeakSet();
let json = {
a: 1,
b: 2
}
wSet.add(json);
console.log(wSet); // WeakSet {{…}}
沒(méi)有size屬性
let wSet = new WeakSet();
let json = {
a: 1,
b: 2
}
wSet.add(json);
console.log(wSet.size); // undefined
3.2 WeakSet與Set 不同之處
- 在WeakSet中add 方法傳入非對(duì)象參數(shù)會(huì)導(dǎo)致報(bào)錯(cuò), has, delete方法傳入非對(duì)象則會(huì)返回false
- Weak Set 集合不可迭代, 不能使用for...of , forEach循環(huán)
- 不支持size屬性
- Weak Set不暴露任何迭代器,不能使用keys(), values() 方法
//set強(qiáng)類(lèi)型引用
// let obj ={};
// let set = new Set();
// set.add(obj); //obj被重新賦值后，之前的內(nèi)存地址也不會(huì)被js垃圾回收機(jī)制清理掉鳞仙，因?yàn)樗膬?nèi)存地址還在set里
// obj =123;
// console.log(set);
//WeakSet弱類(lèi)型引用
let obj ={};
let weakset = new WeakSet();
weakset.add(obj);
// obj =123;
console.log(weakset);
for(let key of weakset){
console.log(key); //沒(méi)有迭代器寇蚊，不能使用for of
}
4. Map
為了解決這個(gè)對(duì)象屬性只能是字符串的問(wèn)題，ES6 提供了 Map 數(shù)據(jù)結(jié)構(gòu)棍好。它類(lèi)似于對(duì)象仗岸，也是鍵值對(duì)的集合，但是“鍵”的范圍不限于字符串梳玫，各種類(lèi)型的值（包括對(duì)象）都可以當(dāng)作鍵爹梁。也就是說(shuō)，Object 結(jié)構(gòu)提供了“字符串—值”的對(duì)應(yīng)提澎，Map 結(jié)構(gòu)提供了“值—值”的對(duì)應(yīng)姚垃，是一種更完善的 Hash 結(jié)構(gòu)實(shí)現(xiàn)。如果你需要“鍵值對(duì)”的數(shù)據(jù)結(jié)構(gòu)盼忌，Map 比 Object 更合適积糯。
4.1. 設(shè)置map set()操作
let map = new Map();
map.set(key,value); // 設(shè)置鍵值
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. 刪除一項(xiàng) delete()
map.delete();
刪除成功返回true,刪除失敗返回false
map.delete(json); // 刪除一項(xiàng)
4.4. 判斷有沒(méi)有 has()
返回布爾值,有則為true,沒(méi)有則為false
map.has(json);
4.5. 清空 clear()
map.clear();
4.6. 循環(huán)
循環(huán)和set一樣
for(let [key,value] of map.entries()){
console.log(key,value)
}
for(let key of map.keys()){}
for(let value of map.values()){}
let map=new Map();
let obj={'歷史':10,'語(yǔ)文':20}
map.set('name','張三');
map.set(123,123);
map.set(obj,obj);
for(let key of map){
console.log(key);
}
//等價(jià)于
for(let aa of map.entries()){
console.log(aa);
}
//等價(jià)于
console.log(map.entries());
// 直接打印屬性掂墓、值
for(let [index ,key] of map.entries()){
console.log(index,key);
}
//只打印屬性或值
for(let key of map.keys()){
console.log(key);
}
5. WeakMap
和Weak Set 是弱引用Set集合, Weak Map是弱引用Map集合
weakMap集合中鍵名必須是一個(gè)對(duì)象
let wMap = new WeakMap();
let json = {
a:1,
b:2
}
wMap.set(json,'wuwei');
console.log(wMap) // WeakMap {{…} => "wuwei"}
如果key不是對(duì)象,就掛了
wMap.set('a','wuwei');
//TypeError: Invalid value used as weak map keya
