扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > 其他 >es6 map有序吗
  • 748

0
分享到

es6 map有序吗

javascriptES6 2022-11-22 23:11:55 748人浏览 泡泡鱼
摘要

本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。一、map集合javascript的对象（object），本质是上键值对的集合，但是传统上只能用字符串当做键值对。为了解决这个问题，es6提供了map数据

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

一、map集合

javascript的对象（object），本质是上键值对的集合，但是传统上只能用字符串当做键值对。

为了解决这个问题，es6提供了map数据结构。它类似对象，也是键值对的集合。但是这个键的范围不限于字符串，各种类型的值（包括对象）都可以当做键。也就是说object结构提供了（字符串-值）的对应，map结构实现

ES6中的map类型是一种储存着许多键值对的有序列表，其中的键名和对应的值支持所有数据类型。键名的等价性判断是通过调用Objext.is()方法来实现的，所以数字5与字符串‘5’会被判定为两种类型，可以分别作为两种独立的键出现在程序中。

注意：有一个例外，map集合中将+0和-0视为相等，与Object.is()结果不同，如果需要“键值对”的数据结构，map比object更合适，具有极快的查找速度

1、属性：size

返回map的元素数

2、基本方法

（1）set()

给map添加数据，返回添加后的map（给已存在的键赋值后会覆盖掉之前的值）

（2）get()

获取某个key的值，返回key对应的值，没有则返回undefined

（3）has()

检测是否存在某个key，返回布尔值

let map = new Map();
 
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
 
console.log(map.size);
console.log(map.get('JacksonWang'));
console.log(map.get('LEO'));
console.log(map.has('Z-'));
 
//输出:    3
//        123
//        456
//        true

（4）delete()

删除某个key及其对应的value，返回布尔值，成功删除则为true

（5）clear()

清除所有的值，返回undefined

let map = new Map();
 
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
 
map.delete('Z-');
console.log(map.size);
 
console.log(map.clear())
 
//输出:  2
//      undefined

3、遍历方式

注意：map的遍历顺序就是插入顺序

（1）keys()

获取map的所有key

（2）values()

获取map的所有值

（3）entries()

获取map的所有成员

let map = new Map();
 
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
 
console.log(map.keys())//打印所有的键
console.log(map.values())//打印所有的值
console.log(map.entries())//以键值对的方式

（4）forEach()

遍历map的所有成员

let map = new Map();
 
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
 
for(const [key,value] of map.entries()){
    console.log(`${key}:${value}`);
}

4、转为数组

map结构转为数组解构

let map1 = new Map([
    [1,'One'],
    [2,'Two'],
    [3,'Three']
])
 
console.log([...map1.keys()]);
console.log(...map1.entries())
console.log([...map1.entries()]);

二、weakmap集合

WeakMap是弱引用Map集合，也用于存储对象的弱引用。WeakMap集合中的键名必须是一个对象，如果使用非对象键名会报错：集合中保存的是这些对象的弱引用，如果在弱引用之外的不存在其他的强引用，引擎的垃圾回收机制会自动回收这个对象，同时会移出WeakMap集合中的键值对。但是只有集合的键名遵循这个规则，键名对应的值如果是一个对象，则保存的对象的强引用，不会触发垃圾回收装置

1、WeakMap集合的用途

（1）存储DOM元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta Http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">WeskMap测试</button>
    <script>
        let btn = document.querySelector('#btn');
        let wmap = new WeakMap();
        wmap.set(btn,{timesClicked:0})//在map中放一个键值对，btn为键
 
        btn.addEventListener('click',function(){
            let temp = wmap.get(btn);//从这里获取键名为btn的值
            temp.timesClicked++;
            console.log(temp.timesClicked)
        },false)
    </script>
</body>
</html>

代码中的myElement是一个DOM节点，每当发生click事件，就更新一下状态。我们将这个状态作为键值放在WeakMap里，对应的键名就是myElement，一旦这个DOM节点删除，该状态就会自动消失，不存在内存泄漏的风险

1.png

（2）注册监听事件的listener对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">WeskMap测试</button>
    <script>
        let btn = document.querySelector('#btn');
        let wmap = new WeakMap();
        wmap.set(btn,{timesClicked:0})//在map中放一个键值对，btn为键
 
        // btn.addEventListener('click',function(){
        //     let temp = wmap.get(btn);//从这里获取键名为btn的值
        //     temp.timesClicked++;
        //     console.log(temp.timesClicked)
        // },false)
        function f1(){
            let temp = wmap.get(btn);//从这里获取键名为btn的值
            temp.timesClicked++;
            console.log(temp.timesClicked)
        }
        btn.addEventListener('click',f1,false)
    </script>
</body>
</html>

所体现的效果是一样的

（3）部署私有属性

function Person(name){
    this._name = name;
}
 
Person.prototype.getName = function(){
    return this._name;
}
//但这是，创建一个Person对象的时候，我们可以直接访问name
let p = new Person('张三');
console.log(p._name)
 
//输出：张三

我们不想让用户直接访问name属性，直接使用下面的方法将name包装成私有属性

let Person = (function(){
    let privateData = new WeakMap();
    function Person(yourname){
        privateData.set(this,{_name:yourname})//this当前这个键的对象
    }
    Person.prototype.getName = function(){
        return privateData.get(this)._name;//
    }
    return Person;
})();//定义好了函数就开始执行
 
let p = new Person('jack');
console.log(p._name)//因为name的私有型，所以在外不可访问
console.log(p.getName())

以上就是es6 map有序吗的详细内容，更多请关注编程网其它相关文章！

--结束END--

本文标题: es6 map有序吗

本文链接: https://lsjlt.com/news/173440.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • es6 map有序吗
    本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。一、map集合JavaScript的对象（object），本质是上键值对的集合，但是传统上只能用字符串当做键值对。为了解决这个问题，ES6提供了map数据...
    99+
    2022-11-22
    javascript ES6
  • es6的map是有序吗
    本篇内容主要讲解“es6的map是有序吗”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“es6的map是有序吗”吧!map是有序的。ES6中的map类型是一种储存着许多键值对的有序列表，其中的键名...
    99+
    2023-07-04
  • js map方法是es6的吗
    本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。JavaScript中的map()方法详解（均采用es6语法）JavaScript map() 方法可以对数组的每个元素调用指定的回调函数，并返回包含结果...
    99+
    2023-05-14
    map ES6
  • es6 map是引用类型吗
    本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。map是引用类型。es6 map在ES6之前，在JavaScript中实现‘键’=>‘值’，也就是我们常说的键值对，是用Object来完成的。但这种...
    99+
    2023-05-14
    ES6 map
  • es6中set类型是有序的吗
    这篇文章主要介绍了es6中set类型是有序的吗的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇es6中set类型是有序的吗文章都会有所收获，下面我们一起来看看吧。es6中set类型是有序的。set类型是es6中新...
    99+
    2023-06-29
  • es6有arguments吗
    这篇文章主要介绍了es6有arguments吗的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇es6有arguments吗文章都会有所收获，下面我们一起来看看吧。es6有arguments，但箭头函数是不识别ar...
    99+
    2023-07-04
  • es6中map()方法有什么用
    这篇文章将为大家详细讲解有关es6中map()方法有什么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 在es6中，map()方法用于对数组...
    99+
    2024-04-02
  • es6有闭包吗
    本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。一、变量作用域变量根据作用域的不同分为两种：全局变量和局部变量。函数内部可以使用全局变量。函数外部不可以使用局部变量。当函数执行完毕，本作用域内的局部变量...
    99+
    2022-11-22
    javascript ES6 闭包
  • es6中map和foreach有哪些区别
    本篇内容主要讲解“es6中map和foreach有哪些区别”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“es6中map和foreach有哪些区别”吧! ...
    99+
    2024-04-02
  • java map的key排序吗
    java map的key排序吗java为数据结构中的映射定义了一个接口java.util.Map,他实现了四个类，分别是：HashMap，HashTable，LinkedHashMapTreeMap，Map不允许键重复，但允许值重复1.Ha...
    99+
    2016-04-13
    java基础 java map key 排序
  • es6的set和map的区别有哪些
    今天小编给大家分享一下es6的set和map的区别有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来...
    99+
    2024-04-02
  • es6中filter和map的区别有哪些
    今天小编给大家分享一下es6中filter和map的区别有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们...
    99+
    2024-04-02
  • es6中map和object的区别有哪些
    本篇内容介绍了“es6中map和object的区别有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！区别：1、Map的键可以是任意值，而O...
    99+
    2023-07-04
  • es6中有&符号吗
    本篇内容介绍了“es6中有&符号吗”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！有&符号。在es6中，“&&...
    99+
    2023-07-04
  • ES6中Map结构怎么用
    这篇文章主要介绍了ES6中Map结构怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体如下：Map 数据结构类似于对象，也是键值对的集...
    99+
    2024-04-02
  • ES6中Set和Map怎么用
    这篇文章将为大家详细讲解有关ES6中Set和Map怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。一.SetES6提供了新的数据结构Set。类似于数组，只不过其成员值...
    99+
    2024-04-02
  • java可以对map的key排序吗
    Map是键值对的集合接口，它的实现类主要包括：HashMap,TreeMap,Hashtable以及LinkedHashMap等。 （推荐学习：java课程）TreeMap：基于红黑树（Red-Black tree）的 Navigab...
    99+
    2017-10-20
    java入门 java
  • java中map可以按key排序吗？
    map可以按key排序吗？map可以按key排序，下面通过实例来看看。示例：Java Map 按Key排序和按Value排序package test; import java.util.ArrayList; import java.uti...
    99+
    2019-04-18
    java教程 java map
  • map是不是es6中的方法
    这篇文章主要讲解了“map是不是es6中的方法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“map是不是es6中的方法”吧！ m...
    99+
    2024-04-02
  • ES6的Set、Map、Symbol实例分析
    这篇文章主要介绍“ES6的Set、Map、Symbol实例分析”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“ES6的Set、Map、Symbol实例分析”文章能帮助大家解决问题。Set  ...
    99+
    2023-06-17
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作