iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 11
5

身為 javaScript 工程師,聽到 key pair value 第一個一定想到 Object。那跟同樣是 Key pair value 的 Map 有什不一樣呢?

來比較吧!

建立 object 有下列幾種方法

// 1 literal
// 最常見到也是最推薦的
let objLiteral = {
	id: 1,
	name: 'Hannah'
}

// 2 by constructor
// 比較不建議因為效能較差
let objConstructor = new Object()
objConstructor['id'] = 1;


// 3 using Object.prototype.create
// 通常用在繼承別人的 prototype 
let objCreate = Object.create(null);
Object.defineProperty(objCreate, 'id', {
	value: 1
})

Map 只有一種

//Empty Map
let map1 = new Map()

// have value when define
let map = new Map([['id',1], ['name','Hannah']]);

內建方法

https://ithelp.ithome.com.tw/upload/images/20190912/20106426NVpIBiLxWQ.png

實務上我們的確可以用 Object 來模擬 Map

class myMap{
    constructor(){
        this.items = {}
    }
	set (key, value) {
		this.items[key] = value;
	};
	delete (key) {
		if(this.has(key)){
			delete this.items[key];
			return true;
		}
		return false;
	};
	has (key) {
		return this.items.hasOwnProperty(key)
	};
	get (key) {
		return this.has(key) ? this.items[key] : undefined;
	};
	clear () {
		this.items = {}
	};
	size () {
		return Object.keys(this.items).length;
	};
	keys () {
		return Object.keys(this.items);
	};
	values () {
		return Object.values(this.items);
	};
};
const dictionary = new myMap();;
dictionary.set('Mark', 'mark@gmail.com');
dictionary.set('Ivy', 'ivy@gmail.com');
dictionary.set('Mary', 'mary@gmail.com');
console.log(dictionary.values())

但是

ES5 Object key 一定要是 String

這在使用上多了一些限制,你可能要寫很多額外程式去處理功能需求。就算 ES6 的 Object key type 不只 String,但 key 還是必須是 simple types。不然你試試 obj 當 key 看看 ~~
而 Map 前一章有提過 key 值可以接受任何 type

Objects 抓值效率比較差

可以看連結 Object.keys 效率並沒有很好,但你若用 for in 去抓值,可能會抓到父層的值 (當然你可以用 es6 for of 啦 js 夠熟悉 )

Object 裡的元素是沒有順序性的

var myObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(myObj )); // console: ['2', '7', '100']

var myMap =new Map([[100,'a'],[2,'b'], [7, 'c' ]])
myMap.keys() // {100, 2, 7}

Map instanceof Object,但 Object 並沒有 instanceof Map

var map = new Map([[1,2],[3,4]]);
console.log(map instanceof Object); //true

var obj = new Object();
console.log(obj instanceof Map); //false

看來 Map 似乎都比 Object 好,那我們就可以不用 Object ? No No No

適合用 Object 時機

  • Object 是最基礎也最重要概念,貫穿整個 javaScript。當我們只需要儲存一些簡單的資料,並且確定 Key 值是 simple type (String、Number、Symbol...)。那用 Object 會快很多 (你用 Map 還是要 new Map() 出來沒別的方法。而 literal 建立比 constructor 快多了)
  • 如果你想要寫類似下面程式碼
var obj = {
    id: 1, 
    name: "It's Me!", 
    print: function(){ 
        return `Object Id: ${this.id}, with Name: ${this.name}`;
    }
}
console.log(obj.print());//Object Id: 1, with Name: It's Me.
  • 如果你要處裡 JSON,因為 JSON 跟 Object 之間很容易轉換

適合用 Map 時機


參考文章

如有錯誤或需要改進的地方,拜託跟我說。
我會以最快速度修改,感謝您

上一篇
Map
下一篇
[LeetCode #1] Map
系列文
前端工程師用 javaScript 學演算法32

1 則留言

0

印象中Vue還沒支援Set和Map的reactivity,
上次有個data適合用Set,
結果出bug找了半天才發現Vue尚未支援。
好像在哪裡看到Vue3才會支援。

hannahpun iT邦新手 5 級 ‧ 2019-09-13 00:12:53 檢舉

以我理解 Set Map 都是原生語法,照理說只要瀏覽器支援,不管你用甚麼前端框架都應該支援
稍微看了一下 Vue 似乎是有 Vue.set(this.b,'first','first') 的東西。這我就不知道支援程度了
但假如是用 new Set() 應該都 ok 才對
不知道有沒有回答道 XD

larrykkk iT邦新手 5 級 ‧ 2020-02-11 08:57:40 檢舉

那個set 跟js的set不一樣

我要留言

立即登入留言