what's the advantages of using Map over Object in JavaScript?

what's the advantages of using Map over Object in JavaScript?

在 JavaScript 中使用 Map 相对于 Object 有什么优势？

Map pros

1. Map 支持任何数据类型的作为 key, 而 Object 仅支持字符串 和 Symbols 数据类型作为 key( Object 以 Number形式给出的 Key 将在内部被转换为 String ⚠️)

const map = new Map();
map.set(1, 'a');
// Map(1) {1 => 'a'}
map.keys();
// MapIterator {1}
[...map.keys()].map(i => typeof i);
// ['number'] ✅

const obj = {};
obj[1] = 'a';
'a'
obj;
// {1: 'a'}
Object.keys(obj)
// ['1']
[...Object.keys(obj)].map(i => typeof i);
// ['string'] ❌

2. Map 的 key 保留插入顺序

const map = new Map();
map.set(3, `c`);
map.set(2, `b`) ;
map.set(1, `a`) ;
// ✅
map.keys()
// MapIterator {3, 2, 1}
[...map.keys()].map(console.log)
// 3 0 (3) [3, 2, 1]
// 2 1 (3) [3, 2, 1]
// 1 2 (3) [3, 2, 1]
[...map.keys()].map(i => console.log(i))
// 3
// 2
// 1

const obj = {};
obj[3] = `c`;
obj[2] = `b`;
obj[1] = `a`;
// ❌
Object.keys(obj);
//(3) ['1', '2', '3']
[...Object.keys(obj)].map(i => console.log(i))
// 1
// 2
// 3

Map cons

demos

https://leetcode.com/studyplan/30-days-of-javascript/

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

AI

https://duckduckgo.com/?q=DuckDuckGo&ia=chat

https://gemini.google.com/app/57eb97de314e0fb2

check Object in js

bug ❌

const isObject = (value) => {
  return typeof value === 'object'
  && value !== null
  && !Array.isArray(value)
  && !(value instanceof RegExp)
  && !(value instanceof Date)
  && !(value instanceof Set)
  && !(value instanceof Map)
}

Object.prototype.toString.call() 🚀

Object.prototype.toString.call({});
// '[object Object]' ✅
Object.prototype.toString.call([]);
// '[object Array]'
Object.prototype.toString.call(null);
// '[object Null]'
Object.prototype.toString.call(undefined);
// '[object Undefined]'
Object.prototype.toString.call(``);
// '[object String]'
Object.prototype.toString.call(new Map());

// '[object Map]'
Object.prototype.toString.call(new Set());
// '[object Set]'

Object.prototype.toString.call(new Function());
// '[object Function]'
Object.prototype.toString.call(new Date());
// '[object Date]'
Object.prototype.toString.call(new RegExp());
// '[object RegExp]'
Object.prototype.toString.call(Math);
// '[object Math]'

https://dev.to/alesm0101/how-to-check-if-a-value-is-an-object-in-javascript-3pin

convert Map to Object in js

const log = console.log;

const map = new Map();
// undefined
map.set(`a`, 1);
// Map(1) {"a" => 1}
map.set(`b`, 2);
// Map(1) {"a" => 1, "b" => 2}
map.set(`c`, 3);
// Map(2) {"a" => 1, "b" => 2, "c" => 3}

// Object.fromEntries ✅
const obj = Object.fromEntries(map);

log(`\nobj`, obj);
// obj { a: 1, b: 2, c: 3 }

const log = console.log;

const map = new Map();
// undefined
map.set(`a`, 1);
// Map(1) {"a" => 1}
map.set(`b`, 2);
// Map(1) {"a" => 1, "b" => 2}
map.set(`c`, 3);
// Map(2) {"a" => 1, "b" => 2, "c" => 3}

const autoConvertMapToObject = (map) => {
  const obj = {};
  for (const item of [...map]) {
    const [
      key,
      value
    ] = item;
    obj[key] = value;
  }
  return obj;
}

const obj = autoConvertMapToObject(map)

log(`\nobj`, obj);
// obj { a: 1, b: 2, c: 3 }

const log = console.log;

const map = new Map();
// undefined
map.set(`a`, 1);
// Map(1) {"a" => 1}
map.set(`b`, 2);
// Map(1) {"a" => 1, "b" => 2}
map.set(`c`, 3);
// Map(2) {"a" => 1, "b" => 2, "c" => 3}

const autoConvertMapToObject = (map) => {
  const obj = {};
  [...map].forEach(([key, value]) => (obj[key] = value));
  return obj;
}

const obj = autoConvertMapToObject(map)

log(`\nobj`, obj);
// obj { a: 1, b: 2, c: 3 }

https://stackoverflow.com/questions/37437805/convert-map-to-javascript-object/64148482#64148482

refs

https://stackoverflow.com/questions/18541940/map-vs-object-in-javascript

https://www.syncfusion.com/blogs/post/javascript-map-vs-object

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---