导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

object 键名为复杂类型的问题

• 会把复杂类型 toString 后设置为键名

var m = {};
var x = {id: 1},
    y = {id: 2},
    z = [1, 2, 3];
m[x] = 'foo';
m[y] = 'bar';
m[z] = 'arr';
console.log(m[x]);
console.log(m[y]);
console.log(m[z]);
console.log(m);

具备 iterator 接口的数据结构

var m = new Map([['name', 'zhangsan'], ['age', 10]]);
console.log(m);

键名可以为任何值（包括函数、对象或任何原始值）

var map = new Map();
map.set([5], 555);
console.log(map.get([5])); // undefined 数组是个引用

var map = new Map();
var arr = [5];
map.set(arr, 555);
console.log(map.get(arr));

特殊键名情况

var map = new Map();
map.set(-0, 123);
console.log(map.get(+0))
console.log(+0 === -0);
console.log(Object.is(+0, -0));

var map = new Map();
map.set(undefined, 1);
map.set(null, 2);
map.set(NaN, 3);
console.log(map);
console.log(map.get(undefined));
console.log(map.get(null));
console.log(map.get(NaN));

var map = new Map();
console.log(map);

set、size、delete、clear 跟 Set 类似

var m = new Map();
var x = {id: 1},
    y = {id: 2};
m.set(x, 'foo'); 
m.set(y, 'bar'); // 返回值是map结构，也可以进行链式调用
console.log(m.size); // 2
console.log(m.delete(x)); // 返回布尔值
console.log(m.clear()); // 返回undefined

Map 和 数组、对象 互转

⭐️ Map 转 数组

const map = new Map([
	['name', 'Lance'],
  ['age', 26]
]);
map.set('weight', 135);
const arr = [...map];

console.log(map);
console.log(arr);

⭐️ 数组 转 Map

const arr = [
	['name', 'Lance'],
  ['age', 26],
  ['weight', 135]
]

const map = new Map(arr);

console.log(map);

⭐️ Map 转 对象（键名是字符串）

const map = new Map([
	['name', 'Lance'],
  ['age', 26]
]);

const person = {};

function strMapToObj(map) {
	let obj = Object.create(null); // 纯净对象,无原型
  
  for ([key, value] of map) {
    obj[key] = value;
  }
  
  return obj;
}
console.log(strMapToObj(map));

对象 转 Map

const person = {
	name: 'Lance',
  age: 26
}

function objToMap(obj) {
	let map = new Map();
  
  for (const [key, value] of Object.entries(obj)) {
  	map.set(key, value);
  }
  
  return map;
}

console.log(objToMap(person));