JS新增物件Map和Set
阿新 • • 發佈:2018-12-19
JS新增物件Map、Set
Map
Map對映是ES6裡面新增的一個物件,是一組鍵值對的結構,具有極快的查詢速度。
<script type="text/javascript"> // 初始化Map需要一個二維陣列,或者直接初始化一個空Map var m1 = new Map([['a', 'a1'], ['b', 'b2'], ['c', 'c3']]); var m11 = new Map([['a', 'a1'], ['b', 'b2'], ['c', 'c3']]); var m2 = new Map(); console.log(m1); // 返回Map {"a" => "a1", "b" => "b2", "c" => "c3"} console.log(typeof(m1)); // object, Map仍屬於 object console.log(m1 == m11) // flase 雖然兩個Map裡面的值一樣,但是是屬於不同的object // 1. size屬性,返回 Map的元素數 console.log(m1.size); // 3 // 2. keys() 獲取Map的所有key console.log(m1.keys()); // 返回 MapIterator {"a", "b", "c"} // 3. values() 獲取Map的所有value console.log(m1.values()); // 返回 MapIterator {"a1", "b2", "c3"} // 4. entries() 獲取Map所有成員 console.log(m1.entries()); // 返回 MapIterator {"a" => "a1", "b" => "b2", "c" => "c3"} // 5. forEach() 迴圈操作對映元素 m1.forEach(function(value, key, map) { // value: key對應的值, // key: Map的key,(map引數已省略情況下,key可省略) // map: Map本身,(該引數是可省略引數) console.log(value); // key對應的值 a1 b2 c3 console.log(key); // key a b c console.log(map); // Map本身 Map Map Map }); // 6. set() 給Map新增資料, 返回新增後的Map console.log(m2.set('a', 1)); // 返回Map {"a" => 1} console.log(m2.set('b', 2)); // {"a" => 1, "b" => 2} console.log(m2.set('a', 11)); // {"a" => 11, "b" => 2} 給已存在的鍵賦值會覆蓋掉之前的值, // 7. has() 檢測是否存在某個key, 返回布林值,有:true; 沒有:false console.log(m2.has('a')); // true console.log(m2.has('c')); // false // 8. get() 獲取某個key的值,返回key對應的值,沒有則返回undefined console.log(m2.get('a')); // 11 console.log(m2.get('c')); // undefined // 9. delete() 刪除某個key及其對應的value,返回布林值,成功:true; 失敗:false console.log(m2.delete('b')); // true console.log(m2.delete('d')); // false console.log(m2.get('b')); // undefined, 因為b已經刪除 // 10. clear() 清除所有的值,返回 undefined console.log(m1.clear()); // undefined console.log(m1); // {} </script>
Set
Set也是ES6新增的物件,Set是一組key的集合,但不儲存value, 而且key不重複,可自動排重
<script type="text/javascript"> // 初始化Map需要提供一個Array作為輸入,或者直接建立一個空Set var s1 = new Set(['a', 'b', 'c']); var s11 = new Set(['a', 'b', 'c']); var s2 = new Set(['a', 'a', 'b', 'b', 'c', 'c']); var s3 = new Set(); console.log(s1); // 返回 Set(3) {"a", "b", "c"} console.log(s2); // 返回 Set(3) {"a", "b", "c"} console.log(typeof(s1)); // object console.log(s1 == s11) // false console.log(s1 == s2) // false // 1. size屬性 返回Set的元素數 console.log(s1.size); // 3 // 2. keys() 獲取Set的所有key console.log(s1.keys()); // 返回 SetIterator {"a", "b", "c"} // 3. values() 獲取Set的值,返回結果和 keys()一樣 console.log(s1.values()); // 返回 SetIterator {"a", "b", "c"} // 4. entries() 獲取Set所有成員,返回同keys() console.log(s1.entries()); // 返回 SetIterator {"a", "b", "c"} // 5. forEach() 迴圈操作集合元素 s1.forEach(function(v, k, s){ // v、k是集合的鍵,s是集合本身 console.log(v); // a b c console.log(k); // a b c console.log(s); // Set Set Set }); // 6. add() 給集合新增資料 返回新增後的Set console.log(s3.add('aa')); // Set(1) {"aa"} console.log(s3.add('bb')); // Set(2) {"aa", "bb"} console.log(s3.add('aa')); // Set(2) {"aa", "bb"} 新增重複的值,會被排重掉, // 7. has() 查詢集合中是否包含某個元素 返回布林值 有:true; 沒有:false console.log(s3.has('aa')); // true console.log(s3.has('ff')); // false // 8. delete() 刪除集合中的某個元素 返回布林值 console.log(s3.delete('aa')); // true console.log(s3.delete('ee')); // false console.log(s3); // Set(1) {"bb"} // 9. clear() 清除集合的所有值 返回undefined console.log(s1.clear()); // undefined console.log(s1); // Set(0) {} </script>