• 技术文章 >web前端 >前端问答

    es6 map是引用类型吗

    青灯夜游青灯夜游2023-01-11 16:59:00原创96

    map是引用类型;map(集合)是es6新增的一种引用数据类型,表示数据的映射关系。map集合数据类型中数据是以“键/值”的方式存储的,可以使用对象的属性作为键,使用属性来引用值;map可以使用new来创建,例“const myMap = new Map();”。

    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

    map是引用类型。

    es6 map

    在ES6之前,在JavaScript中实现‘键’=>‘值’,也就是我们常说的键值对,是用Object来完成的。但这种实现方式在特殊场景下的有问题的,ES6又出了一个为Map的新集合类型,为这门语言带来正真的键值对存储机制。

    map(集合)是es6新增的一种引用数据类型,表示数据的映射关系;map集合数据类型中数据是以“键/值”的方式存储的,可以使用对象的属性作为键,使用属性来引用值。

    1-1 创建Map

    使用new关键字来实例一个map

    let m = new Map();
    
    console.log(m);
    // Map(0) {}

    创建时初始化:
    传入一个二维数组参数(可迭代对象,内部以数组的方式传入键值)
    每个子数组,第一个元素是map对应的key, 第二个元素是map对应的value

    let m = new Map([[{}, 222], [{}, '123']]);
    
    console.log(m);
    // Map(2) { {} => 222, {} => '123' }

    1-2 Map Api

    1-2-1 添加映射元素

    通过set()方法添加,传入两个参数,第一个传入映射的键,第二个传入映射的值。返回的是该映射集合(意味着可以链式添加)

    let m = new Map();
    
    m.set('prop', '值');
    
    console.log(m);
    // Map(1) { 'prop' => '值' }

    链式添加键值

    let m = new Map();
    
    m.set('prop', '值').set('prop2', false).set('num', {id: 13});
    
    console.log(m);
    // Map(3) { 'prop' => '值', 'prop2' => false, 'num' => { id: 13 } }

    1-2-2 映射集合长度

    使用size属性可以获取到当前集合元素数量

    let m = new Map();
    
    m.set('prop', '值').set('prop2', false).set('num', {id: 13});
    
    console.log(m.size);

    1-2-3 获取元素

    通过get()方法获取到元素,传入获取目标的key

    let m = new Map();
    
    m.set('prop', '值').set('prop2', false).set('num', {id: 13});
    
    console.log(m.get('prop2'));
    // false

    1-2-4 删除元素

    通过delete()方法删除映射集合中的某个元素,返回删除成功或失败的布尔值

    let m = new Map();
    
    m.set('prop', '值').set('prop2', false).set('num', {id: 13});
    
    m.delete('prop2');
    // true
    
    console.log(m.get('prop2'), m.size);
    // undefined 2

    1-2-5 检测元素是否存在

    使用has()方法检测目标元素是否存在,返回检测结果的布尔值

    let m = new Map();
    
    m.set('prop', '值').set('prop2', false).set('num', {id: 13});
    
    m.delete('prop2');
    // true
    
    console.log(m.has('prop2'), m.has('num'));
    // false  true

    1-2-6 清除元素方法

    使用clear()方法可以清除所有的元素, 返回清除成功的布尔值

    let m = new Map();
    
    m.set('prop', '值').set('prop2', false).set('num', {id: 13});
    
    m.clear();
    // true
    
    console.log(m);
    // Map(0) {}

    1-3 顺序与迭代

    map可以根据插入顺序迭代元素
    映射实例会提供(iterator).能够以插入的顺序生成[key, value]形式的数组, 可以通过entries()方法(或者提供的Symbol.iterator)迭代器接口遍历。

    let m = new Map();
    
    m.set('prop', '值').set('prop2', false).set('num', {id: 13});
    
    console.log(m.entries === m[Symbol.iterator]);// true
    
    for(let k1 of m.entries()){
        console.log(k1);
        // [ 'prop', '值' ]
        // [ 'prop2', false ]
        // [ 'num', { id: 13 } ]
        // 遍历的属性即对应映射元素的键值对数组
    }
    
    for(let k2 of m.keys()){
        console.log(k2);
        // prop
        // prop2
        // num
        // 遍历的属性对应映射元素的键
    }
    
    for(let k3 of m.values()){
        console.log(k3);
        // 值
        // false
        // { id: 13 }
        // 遍历的属性对应映射元素的值
    }
    
    for(let k4 of m[Symbol.iterator]()){
        console.log(k4);
        // [ 'prop', '值' ]
        // [ 'prop2', false ]
        // [ 'num', { id: 13 } ]
        // 遍历的属性即对应映射元素的键值对数组
    }

    1-4 与Object对比

    【相关推荐:javascript视频教程编程视频

    以上就是es6 map是引用类型吗的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:ES6 map
    上一篇:es6中includes返回的是什么 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • es6怎么查找某项是否存在• es6怎么去除字符串前后空格• es6暂时性死区是什么意思• es6 装饰器怎么理解• es6 数组怎么移除元素
    1/1

    PHP中文网