Maps 和 Objects

對象和新的集合類型Map結構上十分的相似,對采用key-value對的形式境氢。但語法上還是有差異蟀拷,比如定義一個對象和定義一個Map碰纬。

1.定義差異

定義一個對象可以采用對象字面量的形式,或者使用dot . 操作符來定義各個屬性问芬,而Map只能使用構造器或者 set 方法:

var myMap = new Map([["name", "James"], ["age", 26]]);
myMap.set("job", "software engineer");

定義對象:

var obj = {};
obj.name = "James";
obj.age = 26;
obj.job = "software engineer";
// 或者
var obj = {
    name: "James",
    age: 26,
    job: "software engineer"
};

2.Map構造器中傳入對象

我們知道Map構造器中只能傳入數(shù)組悦析,不能傳入對象,但是我們可以通過一個npm包 mapify 來彌補這個缺失:

import{mapify} from "es6-mapify";
var map = mapify({name: "james", age: 26});
// map: Map {"name" => "james", "age" => 26}

// 同樣我們可以通過另一個包將map集合轉變成對象
import{demapify} from "es6-demapfy";
var demap = demapify(map);
// demap: {name: "james", age: 26}

3.將一個對象轉換成Map集合

Map集合自身是可迭代的此衅,因此有很多方法可以使用强戴,比如 keys(),values(),entrties(),forEach()等等

對象: 比如游戲中的一些參數(shù)

var charSet = {

aler102:{id:"aler102", name:"Aleria", gender:"female",vocation:"mage",species:"half-elf"},

thor319:{id:"thor312", name:"Thor", gender:"male",vocation:"warrior",species:"half-orc"},

rean831:{id:"rean831", name:"Reanna", gender:"female",vocation:"monk",species:"human"},

gunt615:{id:"gunt615", name:"Gunther", gender:"male",vocation:"smith",species:"human"},

ness789:{id:"ness789", name:"Nessa", gender:"female",vocation:"mage",species:"human"}

}

利用 Object.keys() 將對象中的鍵值變?yōu)閿?shù)組, 然后 使用 forEach() 轉換成Map集合

var myMap = new Map();
Object.keys(charSet).forEach( key => {
    myMap.set(key, charSet[key]);
});

// 現(xiàn)在myMap為:

Map {
"aler102" => Object {id: "aler102", name: "Aleria", gender: "female", vocation: "mage", species: "half-elf"}, 
"thor319" => Object {id: "thor312", name: "Thor", gender: "male", vocation: "warrior", species: "half-orc"}, 
"rean831" => Object {id: "rean831", name: "Reanna", gender: "female", vocation: "monk", species: "human"},
"gunt615" => Object {id: "gunt615", name: "Gunther", gender: "male", vocation: "smith", species: "human"},
 "ness789" => Object {id: "ness789", name: "Nessa", gender: "female", vocation: "mage", species: "human"}
}

可以利用Map集合對其中的數(shù)據(jù)進行操作挡鞍,比如說取出摸個鍵值對:

var targetMap = new Map();
myMap.forEach(function(value, key, ownerMap) {
    if (value.gender === "male" && value.vocation === "smith") {
        targetMap.set(key, value);
    }
});

// targetMap:
Map {
"gunt615" => Object {id: "gunt615", name: "Gunther", gender: "male", vocation: "smith", species: "human"}
}

原文地址ES5 Objects vs. ES6 Maps – The differences and similarities

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末骑歹,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子墨微,更是在濱河造成了極大的恐慌道媚,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,948評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件欢嘿,死亡現(xiàn)場離奇詭異衰琐,居然都是意外死亡也糊,警方通過查閱死者的電腦和手機炼蹦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,371評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來狸剃,“玉大人掐隐,你說我怎么就攤上這事〕伲” “怎么了虑省?”我有些...
    開封第一講書人閱讀 157,490評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長僧凰。 經(jīng)常有香客問我探颈,道長,這世上最難降的妖魔是什么训措? 我笑而不...
    開封第一講書人閱讀 56,521評論 1 284
  • 正文 為了忘掉前任伪节,我火速辦了婚禮,結果婚禮上绩鸣,老公的妹妹穿的比我還像新娘怀大。我一直安慰自己,他們只是感情好呀闻,可當我...
    茶點故事閱讀 65,627評論 6 386
  • 文/花漫 我一把揭開白布化借。 她就那樣靜靜地躺著,像睡著了一般捡多。 火紅的嫁衣襯著肌膚如雪蓖康。 梳的紋絲不亂的頭發(fā)上铐炫,一...
    開封第一講書人閱讀 49,842評論 1 290
  • 那天,我揣著相機與錄音钓瞭,去河邊找鬼驳遵。 笑死,一個胖子當著我的面吹牛山涡,可吹牛的內(nèi)容都是我干的堤结。 我是一名探鬼主播,決...
    沈念sama閱讀 38,997評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼鸭丛,長吁一口氣:“原來是場噩夢啊……” “哼竞穷!你這毒婦竟也來了?” 一聲冷哼從身側響起鳞溉,我...
    開封第一講書人閱讀 37,741評論 0 268
  • 序言:老撾萬榮一對情侶失蹤瘾带,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后熟菲,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體看政,經(jīng)...
    沈念sama閱讀 44,203評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,534評論 2 327
  • 正文 我和宋清朗相戀三年抄罕,在試婚紗的時候發(fā)現(xiàn)自己被綠了允蚣。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,673評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡呆贿,死狀恐怖嚷兔,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情做入,我是刑警寧澤冒晰,帶...
    沈念sama閱讀 34,339評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站竟块,受9級特大地震影響壶运,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜浪秘,卻給世界環(huán)境...
    茶點故事閱讀 39,955評論 3 313
  • 文/蒙蒙 一蒋情、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧秫逝,春花似錦恕出、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,770評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春的畴,著一層夾襖步出監(jiān)牢的瞬間渊抄,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,000評論 1 266
  • 我被黑心中介騙來泰國打工丧裁, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留护桦,地道東北人。 一個月前我還...
    沈念sama閱讀 46,394評論 2 360
  • 正文 我出身青樓煎娇,卻偏偏與公主長得像二庵,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子缓呛,可洞房花燭夜當晚...
    茶點故事閱讀 43,562評論 2 349

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理催享,服務發(fā)現(xiàn),斷路器哟绊,智...
    卡卡羅2017閱讀 134,633評論 18 139
  • 1.Set 基本用法 ES6提供了新的數(shù)據(jù)結構Set因妙。它類似于數(shù)組,但是成員的值都是唯一的票髓,沒有重復的值攀涵。Set本...
    雨飛飛雨閱讀 1,844評論 0 7
  • 一、ES6簡介 ? 歷時將近6年的時間來制定的新 ECMAScript 標準 ECMAScript 6(亦稱 ...
    一歲一枯榮_閱讀 6,062評論 8 25
  • (六) 愛問:“昨聞先生'止于至善'之教洽沟,已覺功夫有用力處以故,但與朱子'格物'之訓,思之終不能合玲躯【莸拢” 先生曰:“'格...
    蘇蘇落葉閱讀 721評論 0 0
  • 你總是那么渴望 渴望著他的早 晚安 清晨你會聞著花香 聽著他的早安 午時鳄乏,你總會想起他給你的早安跷车,卻又貪婪那聲...
    cfac4f7ac1ec閱讀 104評論 0 1