本文是 重溫基礎 系列文章的第十一篇。
今日感覺:注意身體,生病花錢又難受。前端
系列目錄:git
本章節複習的是JS中的Map和Set對象,是個集合。es6
前置知識:
Map和Set對象是在ES6中被引入的,做爲一種由key
值標記的數據容器。
Map和Set對象承載的數據元素能夠按照插入時的順序,被迭代遍歷。github
介紹:
Set
數據結構相似數組,但全部成員的值惟一。
Set
自己爲一個構造函數,用來生成Set
數據結構,使用add
方法來添加新成員。正則表達式
let a = new Set();
[1,2,2,1,3,4,5,4,5].forEach(x=>a.add(x));
for(let k of a){
console.log(k)
};
// 1 2 3 4 5
複製代碼
基礎使用:數組
let a = new Set([1,2,3,3,4]);
[...a]; // [1,2,3,4]
a.size; // 4
// 數組去重
[...new Set([1,2,3,4,4,4])];// [1,2,3,4]
複製代碼
注意:微信
Set
中添加值的時候,不會類型轉換,即5
和'5'
是不一樣的。[...new Set([5,'5'])]; // [5, "5"]
複製代碼
屬性和方法:數據結構
屬性:函數
Set.prototype.constructor
:構造函數,默認就是Set
函數。Set.prototype.size
:返回Set
實例的成員總數。操做方法:post
add(value)
:添加某個值,返回 Set 結構自己。delete(value)
:刪除某個值,返回一個布爾值,表示刪除是否成功。has(value)
:返回一個布爾值,表示該值是否爲Set的成員。clear()
:清除全部成員,沒有返回值。let a = new Set();
a.add(1).add(2); // a => Set(2) {1, 2}
a.has(2); // true
a.has(3); // false
a.delete(2); // true a => Set(1) {1}
a.clear(); // a => Set(0) {}
複製代碼
數組去重:
let a = new Set([1,2,3,3,3,3]);
複製代碼
數組去重:
// 方法1
[...new Set([1,2,3,4,4,4])]; // [1,2,3,4]
// 方法2
Array.from(new Set([1,2,3,4,4,4])); // [1,2,3,4]
複製代碼
遍歷和過濾:
let a = new Set([1,2,3,4]);
// map 遍歷操做
let b = new Set([...a].map(x =>x*2));// b => Set(4) {2,4,6,8}
// filter 過濾操做
let c = new Set([...a].filter(x =>(x%2) == 0)); // b => Set(2) {2,4}
複製代碼
獲取並集、交集和差集:
let a = new Set([1,2,3]);
let b = new Set([4,3,2]);
// 並集
let c1 = new Set([...a, ...b]); // Set {1,2,3,4}
// 交集
let c2 = new Set([...a].filter(x => b.has(x))); // set {2,3}
// 差集
let c3 = new Set([...a].filter(x => !b.has(x))); // set {1}
複製代碼
keys()
:返回鍵名的遍歷器。values()
:返回鍵值的遍歷器。entries()
:返回鍵值對的遍歷器。forEach()
:使用回調函數遍歷每一個成員。Set
遍歷順序是插入順序,當保存多個回調函數,只需按照順序調用。但因爲Set
結構沒有鍵名只有鍵值,因此keys()
和values()
是返回結果相同。
let a = new Set(['a','b','c']);
for(let i of a.keys()){console.log(i)}; // 'a' 'b' 'c'
for(let i of a.values()){console.log(i)}; // 'a' 'b' 'c'
for(let i of a.entries()){console.log(i)};
// ['a','a'] ['b','b'] ['c','c']
複製代碼
而且 還可使用for...of
直接遍歷Set
。
let a = new Set(['a','b','c']);
for(let k of a){console.log(k)}; // 'a' 'b' 'c'
複製代碼
forEach
與數組相同,對每一個成員執行操做,且無返回值。
let a = new Set(['a','b','c']);
a.forEach((v,k) => console.log(k + ' : ' + v));
複製代碼
因爲傳統的JavaScript
對象只能用字符串當作鍵,給開發帶來很大限制,ES6增長Map
數據結構,使得各類類型的值(包括對象)均可以做爲鍵。
Map
結構提供了「值—值」的對應,是一種更完善的 Hash 結構實現。 基礎使用:
let a = new Map();
let b = {name: 'leo' };
a.set(b,'my name'); // 添加值
a.get(b); // 獲取值
a.size; // 獲取總數
a.has(b); // 查詢是否存在
a.delete(b); // 刪除一個值
a.clear(); // 清空全部成員 無返回
複製代碼
注意:
let a = new Map([
['name','leo'],
['age',18]
])
複製代碼
let a = new Map();
a.set(1,'aaa').set(1,'bbb');
a.get(1); // 'bbb'
複製代碼
undefined
。new Map().get('abcdef'); // undefined
複製代碼
let a = new Map();
let a1 = ['aaa'];
let a2 = ['aaa'];
a.set(a1,111).set(a2,222);
a.get(a1); // 111
a.get(a2); // 222
複製代碼
遍歷方法: Map 的遍歷順序就是插入順序。
keys()
:返回鍵名的遍歷器。values()
:返回鍵值的遍歷器。entries()
:返回全部成員的遍歷器。forEach()
:遍歷 Map 的全部成員。let a = new Map([
['name','leo'],
['age',18]
])
for (let i of a.keys()){...};
for (let i of a.values()){...};
for (let i of a.entries()){...};
a.forEach((v,k,m)=>{
console.log(`key:${k},value:${v},map:${m}`)
})
複製代碼
將Map結構轉成數組結構:
let a = new Map([
['name','leo'],
['age',18]
])
let a1 = [...a.keys()]; // a1 => ["name", "age"]
let a2 = [...a.values()]; // a2 => ["leo", 18]
let a3 = [...a.entries()];// a3 => [['name','leo'], ['age',18]]
複製代碼
let a = new Map().set(true,1).set({f:2},['abc']);
[...a]; // [[true:1], [ {f:2},['abc'] ]]
複製代碼
let a = [ ['name','leo'], [1, 'hi' ]]
let b = new Map(a);
複製代碼
function fun(s) {
let obj = Object.create(null);
for (let [k,v] of s) {
obj[k] = v;
}
return obj;
}
const a = new Map().set('yes', true).set('no', false);
fun(a)
// { yes: true, no: false }
複製代碼
function fun(obj) {
let a = new Map();
for (let k of Object.keys(obj)) {
a.set(k, obj[k]);
}
return a;
}
fun({yes: true, no: false})
// Map {"yes" => true, "no" => false}
複製代碼
function fun (s) {
let obj = Object.create(null);
for (let [k,v] of s) {
obj[k] = v;
}
return JSON.stringify(obj)
}
let a = new Map().set('yes', true).set('no', false);
fun(a);
// '{"yes":true,"no":false}'
複製代碼
(2)Map鍵名有非字符串,轉爲數組JSON:
function fun (map) {
return JSON.stringify([...map]);
}
let a = new Map().set(true, 7).set({foo: 3}, ['abc']);
fun(a)
// '[[true,7],[{"foo":3},["abc"]]]'
複製代碼
function fun (s) {
let strMap = new Map();
for (let k of Object.keys(s)) {
strMap.set(k, s[k]);
}
return strMap;
return JSON.parse(strMap);
}
fun('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}
複製代碼
(2)整個 JSON 就是一個數組,且每一個數組成員自己,又是一個有兩個成員的數組:
function fun2(s) {
return new Map(JSON.parse(s));
}
fun2('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}
複製代碼
本部份內容到這結束
Author | 王平安 |
---|---|
pingan8787@qq.com | |
博 客 | www.pingan8787.com |
微 信 | pingan8787 |
每日文章推薦 | github.com/pingan8787/… |
JS小冊 | js.pingan8787.com |
歡迎關注個人微信公衆號【前端自習課】