美文网首页ES6
ES6基本的语法(十一) Map

ES6基本的语法(十一) Map

作者: StevenTang | 来源:发表于2021-02-24 12:39 被阅读0次

Map

  • Map 是 ES6 提供的构造函数,能造出一种新的存储数据的结构。本质上为键值对的集合
  • key 对应 value,key 和 value 唯一,任何值都可以当属性
  • 可以让对象当属性,去重

基本用法

let op = new Map([["name","ccc"],["age","3"]])
console.log(op);
// Map(2) {"name" => "ccc", "age" =>"3"}

let op = new Map([[{},"ccc"]])
console.log(op);
// Map(2) {{} => "ccc"}

Map 中任何值都可以当属性,上面的代码中,用了一个空对象当做属性。

Map 上的方法


// set(); 增加属性和属性值
let op = new Map();
op.set('name','ccc');
op.set({},'xxx');

// get(); 取出属性值
op.get("name"); // 输出 ccc
// 在取值原始值的时候要用一个变量去接受
const obj = {};
op.get(obj); // 输出 xxx

// delete 删除 不举例
// clear 清空 不举例
// has 是否有属性 不举例

// size map 构造对象出来的长度
op.size() // 输出 4

// keys 拿到属性
op.keys() // MapIterator {"name", {}}

// forEach 遍历
op.forEach(ele =>{
    console.log(ele)
    // 输出 ccc , xxx
})

// for of 遍历
for(let porp of op) {
    console.log(porp);
    // 输出 ["name","ccc"] [{},"xxx"] 返回键值对
    // 想要拿到属性和值
    console.log(porp[0], porp[1])
}

模拟实现 Map

原理实现

  • 链接链表
  • hash算法

链接链表


let a = {
    name: 'ttt',
    next: b
}

let b = {
    name: 'xxx',
    next: c
}

let c = {
    name: 'ccc',
    next: null
}

链式结构.png

这种 a.next 可以访问到 ba.next.next 可以访问到 c,连成链的方式叫链表,Map 在存值的时候就用到了链表的概念。在 Map 里面的成员都存到了对象里面去,之后再放到数组里面去

let op = new Map([['name1', 'ttt'],['name2', 'xxx']]);

/* 把 Map 里面的成员存到对象里面去 */

{
    key: 'name1',
    value: 'ttt'
}
{
    key: 'name2',
    value: 'ccc'
}

// 桶
[
    {},
    // 链式存储
    {
        next:{
            key: 'name1',
            value: 'ttt',
             // 按照 key 值固定对象 通过 hash 算法固定
            next: {
                key: 'name2',
                value: 'ccc'
            }
        }
    },
    {},
    {},
    {},
    {},
    {},
    {}
]

上面的代码,就是把 Map 里面的成员变量存到对象里面去,在通过数组链式存储,通过 key 值利用 hash 固定对象。利用 hash 算法的主要目的是要把不定范围的值转换成特定范围的值。比如在存值的时候 key 的类型是不一样的,可能是 String、Number,所以要把这些不定范围的值转换成特定范围的值。

Map实现原理

相关文章

  • ES6基本的语法(十一) Map

    Map Map 是 ES6 提供的构造函数,能造出一种新的存储数据的结构。本质上为键值对的集合 key 对应 va...

  • javascript/jquery-遍历数组/对象的几种方式

    遍历数组/对象的几种方式 常用的方法:for、for in、for of(es6语法)、forEach、map、f...

  • Set 和 Map 数据结构

    本文介绍 Set、WeakSet、Map、WeakMap 的基本用法 一、Set 1.1、基本用法 ES6 提供了...

  • ES6基本的语法(十二) Map模拟实现

    模拟实现 Map 首先上在一篇的文章我介绍了 Map 的主要特点 不重复 任何类型的值都可以作为属性 主要围绕这几...

  • [react]3、基本语法

    1、类的定义 1、ES5语法类的定义 2、ES6语法类的定义 3、map高阶函数 2、JSX语法 JSX是一种Ja...

  • js map对象

    map对象属于ES6的方法1.迭代器生成map基本创建使用new Map()创建对象。同时也剋使用迭代器使用 2 ...

  • Python学习记录

    基本语法 Python lambda介绍 常用函数 python map( )函数用法map将传入的函数f依次作用...

  • RxJava2.X版本-map语法

    一、map语法练习 1、Obserable创建 2、观察者-Consumer创建 3、日志 总结 1、map 基本...

  • react基础

    基本语法ReactDOM.render():渲染虚拟dom,注意大小写map方法生成列表arr .map(func...

  • 前端高频面试题

    ES6语法:let const 箭头函数 Map Set 字符串模版 块级 数组与字符串[https://deve...

网友评论

    本文标题:ES6基本的语法(十一) Map

    本文链接:https://www.haomeiwen.com/subject/knqsfltx.html