成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

20190727-前端筆記-Map結(jié)構(gòu)

everfly / 841人閱讀

摘要：將對象當(dāng)做的一個鍵獲取鍵為的值刪除鍵為的鍵值對判斷是否包含鍵值對但是我在看阮一峰的的時候，看到一些針對自己的問題，不太好理解。

在JS的對象（Object）中，本質(zhì)是就是鍵值對的集合（HASH）
{
"name":"Kisn",
Brith:941018
}

但是在實(shí)際情況使用中，我們不能很好地使用它，它也會導(dǎo)致很多意外。特別是，我想要一個動態(tài)的鍵時.

const data = {};
const element = document.getElementById("myDiv");

data[element] = "metadata";
data["[object HTMLDivElement]"] // "metadata"

所以我們現(xiàn)在有一個數(shù)據(jù)結(jié)構(gòu)，它類似于對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當(dāng)作鍵。

Map 
let m = new Map(),
    o = {a:1};
    
m.set(o,"this is a json")
m.got(0) // "this is a json"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

將對象o當(dāng)做m的一個鍵

new Map().get(x) 獲取鍵為x的值

new Map().delete(x) 刪除鍵為x的鍵值對

new Map().has(x) 判斷是否包含x鍵值對

但是我在看阮一峰的md的時候，看到一些針對自己的問題，不太好理解。我在下面梳理下：

如何new Map()

我看過阮一峰的文章以后，我自己嘗試new一個Map數(shù)據(jù)的，但是老是報錯：

正確的寫法

var m5 = new Map([
    ["asd","name"],
    [{no:1,name:"Kisn",age:25},"intro"]
])

我的理解是new Map()里面是類數(shù)組[],類數(shù)組[]里面才是對象（參數(shù)）=> [[object,value],[object1,value2]]。

注意事項(xiàng)

在Map數(shù)據(jù)結(jié)構(gòu)中，我們需要注意的是，Map的鍵指向的是一個對象，而不是一個具體的值

const map = new Map();

map.set(["a"], 555);
map.get(["a"]) // undefined

為什么會報undefined?

因?yàn)楹芸赡軆蓚€["a"]沒有指向同一個對象，內(nèi)存地址是不一樣的。所以在Map數(shù)據(jù)結(jié)構(gòu)中被視為2個鍵.

const m = new Map();

const key1 = ["a"];
const key2 = ["a"];

m.set(key1,"1")
 .set(key2,2);

m.get(key1) // "1"
m.get(key2) // 2
遍歷方法 
let m = new Map([
["name","Kisn"],
["age","25"],
["job","F2E"]
])

// 遍歷Map的鍵（key）
for(let key of m.keys()){
    console.log(key)
}
// name
// age
// job

// 遍歷Map的值（value）
for(let val of m.values()){
    console.log(val);
}
// Kisn
// 25 
// F2E

// 遍歷Map的建和值
for(let item of map.entries()){
    console.log(item[0],item[1])
}
// or
for(let [key,val] of map.entries()){
    console.log(key,val);
}
// or 忽悠.entries相同
for(let [key, val] of map){
    console.log(key,val);
}

// "name" ,"kisn"
// "age","25"
// "job","F2E"
拓展運(yùn)算符(...) 
let m = new Map([
["name","Kisn"],
["age","25"],
["job","F2E"]
])

[...m]
// ["name","Kisn"],["age","25"],["job","F2E"]`

[...m.entries()]
// ["name","Kisn"],["age","25"],["job","F2E"]`

[...m.keys()]
// ["name","age","job"]

[...m.values()]
//["Kisn","25","F2E"]
我們可以利用Map數(shù)據(jù)結(jié)構(gòu)的map方法和filter做了什么？ 
let m = new Map([
    ["name","Kisn"],
    ["age","25"],
    ["job","F2E"]
])

// 篩選出`key!=="age"`的鍵值對生成一個新的Map數(shù)組
let m2 = new Map(
    [...m].filter([(key,val])=> key !=="age")
)

// 循環(huán)`m`,形成一個的數(shù)據(jù)
let m3 = new Map(
    [...m].map(([k,v]) => [`${k}:`,v] )
)
參考

ES6-Set&Map

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106075.html

相關(guān)文章

  • RAINBOND源碼構(gòu)建JAVA項(xiàng)目配置MAVEN倉庫

    摘要：清除構(gòu)建緩存為每一個服務(wù)的構(gòu)建環(huán)境提供緩存，項(xiàng)目會對的安裝目錄，配置目錄，和本地倉庫目錄提供了緩存，用戶通過以下設(shè)置清理緩存。本文檔詳細(xì)介紹了源碼構(gòu)建項(xiàng)目時的各種詳細(xì)設(shè)置與操作。 概述 根據(jù)大量的Rainbond用戶反饋，我們發(fā)現(xiàn)在Rainbond源碼構(gòu)建java-maven項(xiàng)目的過程中，最容易出現(xiàn)問題的一環(huán)就是獲取構(gòu)件失敗。 比如： [ERROR] Failed to execute...

    MockingBird 評論0 收藏0

  • 前端筆記(四) ES6常用語法

    摘要：函數(shù)更好的尾遞歸優(yōu)化實(shí)現(xiàn)傳入類數(shù)組對象且每次的值在改變。尾遞歸實(shí)現(xiàn)改寫一般的遞歸函數(shù)確保最后一步只調(diào)用自身。返回一個遍歷器對象用循環(huán)遍歷。和循環(huán)它是一種遍歷器接口為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問機(jī)制。 解構(gòu)賦值 //數(shù)組的解構(gòu)賦值 let [a, b, c] = [1, 2, 3]; a // 1 b // 2 c // 3 let [a, [[b], c]] = [1, [[2]...

    church 評論0 收藏0

  • 玩轉(zhuǎn) React【第02期】：戀上 React 模板 JSX

    摘要：今天我們來看一種優(yōu)雅的編寫的代碼的一種方式。有了之后，可以幫助我們在編寫模板的時候結(jié)構(gòu)更加簡單清晰。以上是筆者歸納總結(jié)，如有誤之處，歡迎指出。 showImg(https://segmentfault.com/img/bVbiT3u?w=900&h=383);往期回顧 前文中我們講解了利用 ReactElement 來編寫React程序,但是我們也看到這種方式編寫 React 特別的麻...

    ivydom 評論0 收藏0

  • golang學(xué)習(xí)筆記（一）——golang基礎(chǔ)和相關(guān)數(shù)據(jù)結(jié)構(gòu)

    摘要：小白前端一枚，最近在研究，記錄自己學(xué)習(xí)過程中的一些筆記，以及自己的理解。此外，結(jié)構(gòu)體也支持嵌套。在函數(shù)聲明時，在函數(shù)名前放上一個變量，這個變量稱為方法的接收器，一般是結(jié)構(gòu)體類型的。 小白前端一枚，最近在研究golang，記錄自己學(xué)習(xí)過程中的一些筆記，以及自己的理解。 go中包的依賴管理 go中的切片 byte 和 string go中的Map go中的struct結(jié)構(gòu)體 go中的方...

    lyning 評論0 收藏0

  • 《廖雪峰JavaScript-快速入門》筆記

    摘要：文章內(nèi)容來源廖雪峰快速入門賦值注釋數(shù)據(jù)類型不區(qū)分整數(shù)和浮點(diǎn)數(shù)，統(tǒng)一用表示。條件判斷使用來進(jìn)行條件判斷。最新的規(guī)范引入了新的數(shù)據(jù)類型，是一組鍵值對的結(jié)構(gòu)，具有極快的查找速度。一個數(shù)組實(shí)際上也是一個對象，它的每個元素的索引被視為一個屬性。 文章內(nèi)容來源：廖雪峰JavaScript-快速入門 賦值 var x = 1; 注釋 // comment /* comment */ 數(shù)據(jù)類型 Num...

    caozhijian 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<