es6學習之map和set

lvzishen 發布于2019-08-23 16:48 / 1117人閱讀

摘要：和定義一組鍵值對的集合它是一組鍵值對的數據結構，由于之前的鍵必須是字符串。

Map和Set Map 定義：一組鍵值對的集合

它是一組鍵值對的數據結構，由于之前javascript的鍵（key）必須是字符串。為了使鍵可以是多種類型的于是在最新的es6中引入了map這種數據結構，這樣可以加快查詢速度，類似于查字典

方法和屬性

var m = map() //空map
m.set("學生年齡",6 ) //添加一對新的key-value
m.has("學生年齡") //是否存在key學生年齡 true
m.get("學生年齡") //拿到值 6
m.delete("學生年齡") // 刪除key學生年齡
m.clear()    //清除所有成員 沒有返回值
m.size() // 返回map結構的成員總數 1

需要注意的是如果多次對相同key值插入value，前一次的value值會被覆蓋

map中的鍵實際是對內存地址的引用，舉例說明

var k1 = 222；
var k2 = 222；
map
.set(k1, 123);
.set(k2, 222);

map.get(k1); // 123    
map.get(k2); // 222

因此如果鍵值是對象的話就算值相同也是兩個不同的鍵，如果是簡單類型的話（number，boolean，string），只要值相等，就是同一個鍵，0和-0也被map視為同一鍵，NaN也是同一鍵

遍歷map的方法

keys（）：返回鍵名的遍歷器

values（）：返回鍵值的遍歷器

entries（）：返回所有成員的遍歷器

forEach（）：遍歷所有map成員

map遍歷的順序就是插入的順序

使用實例

var m = new map(
    ["F", "no"],
    ["t", "yes"]
);

for(let key of map.keys()) {
    console.log(key);
}
// f,t

for(let key of map.values()) {
    console.log(key);
}
// no, yes

for(let key of map) {
    console.log(key[0], key[1]);
}
// f no
// t yes

map.forEach( res => {
    console.log(res[0], res[1]);
});
// f no
// t yes

forEach方法還可以接受第二個參數，用來綁定this。

類型轉換

[ ] map如何轉換為數組

運用擴展運算符可以很方便的轉換

var m = map;
m.set("a", 1);
m.set("b", 2);

[...map];
// [["a",1], ["b",2]];

[ ] 數組轉換為map

new Map([[true, 7], [{foo: 3}, ["abc"]]])
// Map {true => 7, Object {foo: 3} => ["abc"]}

[ ] map轉化為對象

如果鍵都是字符串

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

let map = new Map().set("yes",111);
mapToObj(map);
// {yes: 111};

[ ] 對象轉為map

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

objToStrMap({yes: true, no: false});
// [ [ "yes", true ], [ "no", false ] ]

[ ] map轉化為json

如果map鍵名都是字符串的話，可以轉化為對象json

function mapToJson(strMap) {
    return JSON.stringify(mapToObj(strMap)); // map轉化為對象在轉化為json    
}

let map = new Map().set("yes", 111);
strMapToJson(myMap)
// "{"yes":true,"no":false}"

如果鍵名時非字符串的話，轉化為數組json

function mapToJson1(strMap) {
    return JSON.stringify([...strMap]); //map轉化為數組在轉化為數組json
}

let myMap = new Map().set(true, 7).set({foo: 3}, ["abc"]);
mapToArrayJson(myMap)
// "[[true,7],[{"foo":3},["abc"]]]"

json轉化為map同理只是return的是JSON.parse()方法也分為鍵名是字符串和非字符串

Set 特點

類型于數組。但是它的成員值都是唯一的，可以用來做數組去重

構造函數

var a = new Set([1,2,2,3,4,555,5,5,6]);
[...a];
// [1,2,3,4,555,6];

這是一個數組去重的例子在set內部如果有兩個NAN會去掉一個

方法

add（value）: 添加值返回set結構本身

delete（value）：刪除某個值返回布爾值表示是否刪除成功

has（value）：返回布爾值表示該值是否為set的成員

clear（）：清除所有成員

數組去重的兩種方法

var arr = [1,2,3,4,4,5];
var aSet = new Set(arr);
[...aSet];
//[1,2,3,4,5] 

var bSet = new Set(arr);
arr = Array.from(bSet); // [1,2,3,4,5]

由于set的keys（）和values（）完全一樣所以無法通過set[xxx]的方式找到其內部的值，

遍歷set的方法

keys（）：返回鍵名和遍歷器

values（）：返回鍵值和遍歷器

entires（）：返回鍵值對的遍歷器

forEach（）：使用回調函數遍歷每個成員

  let set = new Set(["red", "green", "blue"]);
  
  for (let item of set.keys()) {
    console.log(item);
  }
  // red
  // green
  // blue
  
  for (let item of set.values()) {
    console.log(item);
  }
  // red
  // green
  // blue
  
  for (let item of set.entries()) {
    console.log(item);
  }
  // ["red", "red"]
  // ["green", "green"]
  // ["blue", "blue"]

forEach對空數組不會執行回調函數

GPU云服務器云服務器學習之substr() 深度學習之概要 webrtc學習之九 linux學習之centos

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103305.html

ES6學習之 -- 解構（使數據訪問更便捷）

摘要：數組的解構賦值規定允許按照一定模式，從數組和對象中提取值對變量進行賦值，我們稱之為解構。的規則是，只要有可能導致解構的歧義，就不得使用圓括號。數組的解構賦值 ES6規定：允許按照一定模式，從數組和對象中提取值對變量進行賦值，我們稱之為解構。以前賦值只能直接指定值 let a = 1; let b = 2; let c = 3; ES6允許以下這種做法 let [a, b, c] = ...

mrcode 2019-08-21 18:32 評論0 收藏0
ES6學習之 -- Set數據結構

摘要：類似于數組，但是中不存在重復元素。可以接受一個數組或者其他具有接口的數據結構作為參數從上面的代碼可以看出有去重的功能。去重還有另一個方法將數據結構的數據轉換成數組。清除實例的指定成員。返回一個布爾值，表示某個值是否在實例之中。 Set Set類似于數組，但是Set中不存在重復元素。Set可以接受一個數組（或者其他具有itarable接口的數據結構）作為參數 const set = ne...

wawor4827 2019-08-21 18:34 評論0 收藏0
Vim入門學習之二(cheat sheet)

摘要：有種東西學了記不住，是正則表達式，就是了。最近在用寫個，我一個按鍵盤的，又沒什么太多的閑錢去購買高大上的，不得已開始用上了學的好多遍都沒學會的。有10種東西學了記不住，00是正則表達式，10就是Vim了。最近在用python寫個side project，我一個按鍵盤的，又沒什么太多的閑錢去購買高大上的IDE，不得已開始用上了學的好多遍都沒學會的Vim。Vim有多牛X，隨便問一個代碼...

Shimmer 2019-07-31 10:49 評論0 收藏0
Vim入門學習之二(cheat sheet)

摘要：有種東西學了記不住，是正則表達式，就是了。最近在用寫個，我一個按鍵盤的，又沒什么太多的閑錢去購買高大上的，不得已開始用上了學的好多遍都沒學會的。有10種東西學了記不住，00是正則表達式，10就是Vim了。最近在用python寫個side project，我一個按鍵盤的，又沒什么太多的閑錢去購買高大上的IDE，不得已開始用上了學的好多遍都沒學會的Vim。Vim有多牛X，隨便問一個代碼...

muzhuyu 2019-06-28 10:13 評論0 收藏0
Java 容器學習之 HashMap

摘要：底層的數據結構就是數組鏈表紅黑樹，紅黑樹是在中加進來的。負載因子哈希表中的填滿程度。前言把 Java 容器的學習筆記放到 github 里了，還在更新~其他的目前不打算抽出來作為文章寫，感覺挖的還不夠深，等對某些東西理解的更深了再寫文章吧Java 容器目錄如下： Java 容器一、概述二、源碼學習 1. Map 1.1 HashMap 1.2 LinkedHashM...

Alex 2019-08-15 18:01 評論0 收藏0