ES6——新增數據結構Set與Map的用法


ES6 提供了新的數據結構 Set以及Map,下面我們來一一講解。

一、Set

特性

似於數組,但它的一大特性就是所有元素都是唯一的,沒有重復。

我們可以利用這一唯一特性進行數組的去重工作。

 

1.單一數組的去重

let set6 = new Set([1, 2, 2, 3, 4, 3, 5]) console.log('distinct 1:', set6)

結果:

distinct 1: Set { 1, 2, 3, 4, 5 }

2.多數組的合並去重

let arr1 = [1, 2, 3, 4]
let arr2 = [2, 3, 4, 5, 6] let set7 = new Set([...arr1, ...arr2]) console.log('distinct 2:', set7)

結果:

distinct 2: Set { 1, 2, 3, 4, 5, 6 }

操作----------------------------------

1.add

 

let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
console.log('added:', set1)

結果:

added: Set { 1, 2, 3 }

2.delete

let set1 = new Set() set1.add(1) set1.add(2) set1.add(3) set1.delete(1) console.log('deleted:', set1)

結果:

deleted: Set { 2, 3 }

3.has

let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
set1.delete(1)
console.log('has(1):', set1.has(1))
console.log('has(2):', set1.has(2))

結果:

has(1): false has(2): true

 

4.clear

let set1 = new Set() set1.add(1) set1.add(2) set1.add(3) set1.clear() console.log('cleared:', set1)

結果:

cleared: Set {}

5.size屬性

console.log("容器大小:",set.size); //4

6.Array 轉 Set

let set2 = new Set([4,5,6]) console.log('array to set 1:', set2) let set3 = new Set(new Array(7, 8, 9)) console.log('array to set 2:', set3)

結果:

array to set 2: Set { 4, 5, 6 }
array to set 3: Set { 7, 8, 9 }

7.Set 轉 Array

let set4 = new Set([4, 5, 6]) console.log('set to array 1:', [...set4]) console.log('set to array 2:', Array.from(set4))

結果:

set to array 1: [ 4, 5, 6 ]
set to array 2: [ 4, 5, 6 ]

8.遍歷(keys(),values(),entries())

可以使用Set實例對象的keys(),values(),entries()方法進行遍歷。

由於Set的鍵名和鍵值是同一個值,它的每一個元素的key和value是相同的,所有keys()和values()的返回值是相同的,entries()返回的元素中的key和value是相同的。

let set5 = new Set([4, 5, 'hello'])
console.log('iterate useing Set.keys()')
for(let item of set5.keys()) {
  console.log(item)
}

console.log('iterate useing Set.values()')
for(let item of set5.values()) {
  console.log(item)
}

console.log('iterate useing Set.entries()')
for(let item of set5.entries()) {
  console.log(item)
}

結果:

復制代碼
iterate useing Set.keys()
4 5 hello
iterate useing Set.values() 4 5 hello
iterate useing Set.entries() [ 4, 4 ] [ 5, 5 ] [ 'hello', 'hello' ]

:在向Set加入值時,Set不會轉換數據類型,內部在判斷元素是否存在時用的類似於精確等於(===)的方法,“2”和2是不同的。

 

二、Map  

Javascript的Object本身就是鍵值對的數據結構,但實際上屬性和值構成的是”字符串-值“對,屬性只能是字符串,如果傳個對象字面量作為屬性名,那么會默認把對象轉換成字符串,結果這個屬性名就變成”[object Object]“。

ES6提供了”值-值“對的數據結構,鍵名不僅可以是字符串,也可以是對象。它是一個更完善的Hash結構。

特性

1.鍵值對,鍵可以是對象。
const map1 = new Map() const objkey = {p1: 'v1'} map1.set(objkey, 'hello') console.log(map1.get(objkey))

結果:

hello

 

2.Map可以接受數組作為參數,數組成員還是一個數組,其中有兩個元素,一個表示鍵一個表示值。

const map2 = new Map([ ['name', 'Aissen'], ['age', 12] ]) console.log(map2.get('name')) console.log(map2.get('age'))

結果:

Aissen
12

操作-------------------------------

1.size

獲取map的大小。

const map3 = new Map(); map3.set('k1', 1); map3.set('k2', 2); map3.set('k3', 3); console.log('%s', map3.size)

結果:

3

2.set

設置鍵值對,鍵可以是各種類型,包括undefined,function。
const map4 = new Map();
map4.set('k1', 6)        // 鍵是字符串
map4.set(222, '哈哈哈')     // 鍵是數值
map4.set(undefined, 'gagaga')    // 鍵是 undefined

const fun = function() {console.log('hello');}
map4.set(fun, 'fun') // 鍵是 function

console.log('map4 size: %s', map4.size)
console.log('undefined value: %s', map4.get(undefined))
console.log('fun value: %s', map4.get(fun))

結果:

map4 size: 4
undefined value: gagaga
fun value: fun

也可對set進行鏈式調用。

map4.set('k2', 2).set('k3', 4).set('k4', 5)
console.log('map4 size: %s', map4.size)

結果:

map4 size: 7

 

3.get

獲取鍵對應的值。

const map5 = new Map(); map5.set('k1', 6) console.log('map5 value: %s', map5.get('k1'))

結果:

map5 value: 6

 

4.has

判斷指定的鍵是否存在。

const map6 = new Map(); map6.set(undefined, 4) console.log('map6 undefined: %s', map6.has(undefined)) console.log('map6 k1: %s', map6.has('k1'))

結果:

map6 undefined: true map6 k1: false

 

5.delete

刪除鍵值對。

const map7 = new Map(); map7.set(undefined, 4) map7.delete(undefined) console.log('map7 undefined: %s', map7.has(undefined))

結果:

map7 undefined: false

 

6.clear

刪除map中的所有鍵值對。

const map8 = new Map();
map8.set('k1', 1);
map8.set('k2', 2);
map8.set('k3', 3);
console.log('map8, pre-clear size: %s', map8.size)
map8.clear()
console.log('map8, post-clear size: %s', map8.size)

結果:

map8, pre-clear size: 3
map8, post-clear size: 0

遍歷(keys(),values(),entries(),forEach())

提供三個新的方法 —— entries(),keys()和values() —— 用於遍歷數組。它們都返回一個遍歷器對象,可以用for...of循環進行遍歷,唯一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷,entries()是對鍵值對的遍歷。

1.keys()

遍歷map的所有key。

const map9 = new Map();
map9.set('k1', 1);
map9.set('k2', 2);
map9.set('k3', 3);
for (let key of map9.keys()) {
  console.log(key);
}

結果:

k1 
k2 
k3 

 

2.values()

 遍歷map所有的值。

for (let value of map9.values()) { console.log(value); }

結果:

1 
2 
3 

 

3.entries()

遍歷map的所有鍵值對。

方法1:

for (let item of map9.entries()) { console.log(item[0], item[1]); }

結果:

k1 1
k2 2 k3 3

 

方法2:

for (let [key, value] of map9.entries()) { console.log(key, value); }

結果不變。

 

4.forEach()

遍歷map的所有鍵值對。

map9.forEach(function(value, key, map) { console.log("Key: %s, Value: %s", key, value); });

結果:

Key: k1, Value: 1
Key: k2, Value: 2 Key: k3, Value: 3

forEach有第二個參數,可以用來綁定this。

這樣有個好處,map的存儲的數據和業務處理對象可以分離,業務處理對象可以盡可能的按職責分割的明確符合SRP原則。

const output = {
  log: function(key, value) {
    console.log("Key: %s, Value: %s", key, value);
  }
};

map9.forEach(function(value, key, map) {
  this.log(key, value);
}, output);

和其它結構的互轉----------------------

1.Map 轉 Array

使用擴展運算符三個點(...)可將map內的元素都展開的數組。

const map10 = new Map(); map10.set('k1', 1); map10.set('k2', 2); map10.set('k3', 3); console.log([...map10]); //Array.from(map10)

結果:

[ [ 'k1', 1 ], [ 'k2', 2 ], [ 'k3', 3 ] ]

 

2.Array 轉 Map

使用數組構造Map。

const map11 = new Map([ ['name', 'Aissen'], ['age', 12] ]) console.log(map11)

結果:

Map { 'name' => 'Aissen', 'age' => 12 }

 

3.Map 轉 Object

寫一個轉換函數,遍歷map的所有元素,將元素的鍵和值作為對象屬性名和值寫入Object中。

function mapToObj(map) {
  let obj = Object.create(null);
  for (let [k,v] of map) {
    obj[k] = v;
  }
  return obj;
}

const map12 = new Map()
  .set('k1', 1)
  .set({pa:1}, 2);
console.log(mapToObj(map12))

 結果:

{ k1: 1, '[object Object]': 2 }

 

4.Object 轉 Map

同理,再寫一個轉換函數便利Object,將屬性名和值作為鍵值對寫入Map。

 

function objToMap(obj) {
  let map = new Map();
  for (let k of Object.keys(obj)) {
    map.set(k, obj[k]);
  }
  return map;
}

console.log(objToMap({yes: true, no: false}))

結果:

Map { 'yes' => true, 'no' => false }

 

5.Set 轉 Map

const set = new Set([ ['foo', 1], ['bar', 2] ]); const map13 = new Map(set) console.log(map13)

結果:

Map { 'foo' => 1, 'bar' => 2 }

 

6.Map 轉 Set

function mapToSet(map) {
  let set = new Set()
  for (let [k,v] of map) {
    set.add([k, v])
  }
  return set;
}

const map14 = new Map()
  .set('k1', 1)
  .set({pa:1}, 2);
console.log(mapToSet(map14))

 

結果:

Set { [ 'k1', 1 ], [ { pa: 1 }, 2 ] }

 

 原文來源:https://www.cnblogs.com/kongxianghai/p/7309735.html

 

entries(),keys()和values()


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM