文章目录

  • 一、基本用法
  • 二、常用方法
  • 1. 设置：`set()`
  • 2. 获取：`get()`
  • 3. 删除：`delete()`
  • 4. 清除：`clear()`
  • 5. 遍历：`forEach()`
  • 6. 遍历：`for...of`
  • 7. 判断：`has()`
  • 8. 长度：`size`
  • 三、如何选择
  • 1. 内存占用
  • 2. 插入性能
  • 3. 查找速度
  • 4. 删除性能


一、基本用法

Map 是一种新的集合类型，为 JavaScript 这门语言带来了真正的键/值存储机制

  • Object ：只能使用数值、字符串或符号作为键(key)
  • Map ：却能使用任何 JavaScript 数据类型作为键(key)
  • 语法：
// 创造一个空映射
const m = new Map()
/*
	在实例化的时候，可以接收一个二维数组
	里层数组的 [0] 作为 key
	里层数组的 [1] 作为 value
*/
  • 可以使用复杂数据类型作为 key 使用
const m = new Map([
    ['name','Jack'],
    [{name:'Jack'},{name:'Rose'}]
]);
console.log(m); // {"name" => "Jack", {…} => {…}}
// {"name" => "Jack"}
// {Object => Object}
  • 不允许存储重复数据
const m = new Map([
    ['name','Jack'],
    ['name','Jack'],
    [{name:'Jack'},{name:'Rose'}]
]);
console.log(m); // {"name" => "Jack", {…} => {…}}
// {"name" => "Jack"}
// {Object => Object}

二、常用方法

1. 设置：set()

  • 语法：Map数据类型.set(key,value); 
const m = new Map([
    ['name','Jack'],
    [{name:'Jack'},{name:'Rose'}]
]);
m.set('age',18);
m.set([1,2,3],[4,5,6]);
m.set(function(){console.log('a')},function(){console.log('b')});
console.log(m);

js es6 map方法 es6 map用法_js es6 map方法

  • set()返回映射的实例，所以可以将多个添加操作连缀起来，包括初始化
const s = new Set().set("key1","val1");
s.set("key2","val2").add("key3","val3")
console.log(s.size);		// 3

2. 获取：get()

  • 语法：Map数据类型.get(你要获取的key); 
const m = new Map([
    ['name','Jack'],
    [{name:'Jack'},{name:'Rose'}]
]);
console.log(m.get('name')); // Jack
console.log(m.get("{name:'Jack'}")); // undefined
  • 复杂数据类型是不能直接获取，因为他们存储地址不一样，所以是 undefined 
var a = {name:'Jack'};
const m = new Map([
    ['name','Jack'],
    [a,{name:'Rose'}]
]);
// 获取{name:'Jack'}对应的值
console.log(m.get(a)); // {name: "Rose"}

3. 删除：delete()

  • 语法：Map数据类型.delete(要删除的数据); 
var a = {name:'Jack'};
const m = new Map([
    ['name','Jack'],
    [a,{name:'Rose'}]
]);
m.delete(a);
console.log(m); // {"name" => "Jack"}

4. 清除：clear()

  • 语法：Map数据类型.clear();
  • 作用：清除所有数据
var a = {name:'Jack'};
const m = new Map([
    ['name','Jack'],
    [a,{name:'Rose'}]
]);
m.clear();
console.log(m); // {}

5. 遍历：forEach()

  • 语法：Map数据类型.forEach(function(value,key,map){});
  • 遍历map数据结构
var a = {name:'Jack'};
const m = new Map([
    ['name','Jack'],
    [a,{name:'Rose'}]
]);
m.forEach(function(value,key,map){
    console.log(value,'--',key,'--',map);
})
/*
    Jack -- name -- {"name" => "Jack", {…} => {…}}
    {name: "Rose"} "--" {name: "Jack"}"--"{"name" => "Jack", {…} => {…}}
*/

6. 遍历：for...of

  • 语法：for(let value of Map数据类型){};
  • 遍历出来的是里面每一个内容的key 和 value
var a = {name:'Jack'};
const m = new Map([
    ['name','Jack'],
    [a,{name:'Rose'}]
]);
for(let value of m){
    console.log(value);
}
/*
    ["name", "Jack"]
    [{name: "Jack"}, {name: "Rose"}]
*/
  • 通过结构赋值获取具体值
var a = {name:'Jack'};
const m = new Map([
    ['name','Jack'],
    [a,{name:'Rose'}]
]);
// 第一种方法
for(let value of m){
    console.log(value[0],'--',value[1]);
}
/*
    name -- Jack
    {name: "Jack"} "--" {name: "Rose"}
*/
// 第二种方法
for(let [key,value] of m){
    console.log(key,'--',value);
}
/*
    name -- Jack
    {name: "Jack"} "--" {name: "Rose"}
*/

7. 判断：has()

  • 语法：Map数据类型.has(要判断的数据);
  • 返回值：你要判断的数据是不是存在true/false 
const s = new Set(['hello','world','你好','世界']);
// 判断 ‘你好’ 这个值是否存在
var a = {name:'Jack'};
const m = new Map([
    ['name','Jack'],
    [a,{name:'Rose'}]
]);
console.log(m.has('name')); // true

8. 长度：size

  • 语法：Map数据类型.size;
  • 作用：获取 Map 数据结构里面有多少条数据
  • Map数据结构是没有length属性的
var a = {name:'Jack'};
const m = new Map([
    ['name','Jack'],
    [a,{name:'Rose'}]
]);
console.log(m.size);    // 2
console.log(m.length);  // undefined

三、如何选择

  • 对于多数开发任务来说，选择 Object 和Map 只是个人偏好问题，影响不大
  • 不过在于内存和性能，对象和映射之间确实存在显著差异

1. 内存占用

  • 两者存储单个键/值对所占用的内存数量都会随键的数量线性增加
  • 但是给定固定大小的内存，Map 大约可以比 Object 多存储50%的键/值对

2. 插入性能

  • 两者插入新键/值对的消耗相当，插入速度并不会随着键/值对数量而线性增加
  • 但是Map稍微快一丢丢，所以牵涉到大量插入操作，Map性能更佳

3. 查找速度

  • 两者查找键/值对的性能差异较小，查找速度并不会随着键/值对数量而线性增加
  • 一般情况下两者速度相当，某些情况下Object性能更佳
  • 比如：在把 Object 当成数组使用的情况下（比如使用连续整数作为属性），浏览器引擎会自动优化，在内存中使用更高效的布局，但这对Map来说是不可能的。

4. 删除性能

  • Object 使用 delete 删除会出现一些伪删除对象属性操作，包括把属性值设置为 undefined 或 null
  • 而Map则没有这些问题，且速度比插入和查找更快
  • 如果涉及到大量删除操作，那么毫无疑问应该选择Map