【ES6复习笔记】Map(14)

概念

Map 是 JavaScript 中的一种数据结构,它允许你存储键值对,并且可以通过键来访问对应的值。在本教程中,我们将学习如何声明、添加、删除、获取和遍历 Map 集合。

ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合。但是 "键" 的范围不限于字符串,各种类型的值(包括对象)都可以当作键。Map 也实现了 iterator 接口,所以可以使用『扩展运算符』和「for...of...』进行遍历。Map 的属性和方法。

声明 Map

首先,我们需要声明一个 Map 对象。在 JavaScript 中,你可以使用 new Map() 来创建一个新的 Map 实例。

javascript 复制代码
let m = new Map();

Map的属性和方法:

  1. size:返回Map的元素个数。
  2. set(key, value):增加一个新元素,返回当前Map。
  3. get(key):返回键名对象的键值。
  4. has(key):检测Map中是否包含某个元素,返回boolean值。
  5. clear():清空集合,返回undefined。

添加元素

你可以使用 set 方法向 Map 中添加元素。set 方法接受两个参数:键和值。

javascript 复制代码
m.set('name', '星达网络');
m.set('change', function() {
    console.log("我们可以改变你!!");
});
let key = {
    school: 'xkadmin'
};
m.set(key, ['北京', '上海', '深圳']);

获取元素数量

你可以使用 size 属性来获取 Map 中元素的数量。

javascript 复制代码
console.log(m.size);

删除元素

你可以使用 delete 方法从 Map 中删除指定的键值对。

javascript 复制代码
m.delete('name');

获取元素

你可以使用 get 方法获取 Map 中指定键的值。

javascript 复制代码
console.log(m.get('change'));
console.log(m.get(key));

清空 Map

你可以使用 clear 方法清空 Map 中的所有元素。

javascript 复制代码
m.clear();

遍历 Map

你可以使用 for...of 循环来遍历 Map 中的所有键值对。

javascript 复制代码
for(let v of m) {
    console.log(v);
}

完整代码示例

下面是一个完整的代码示例,展示了如何使用 Map 集合。

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map</title>
</head>
<body>
    <script>
        //声明 Map
        let m = new Map();

        //添加元素
        m.set('name', '星达网络');
        m.set('change', function() {
            console.log("我们可以改变你!!");
        });
        let key = {
            school: 'xkadmin'
        };
        m.set(key, ['北京', '上海', '深圳']);

        //size
        console.log(m.size);

        //删除
        m.delete('name');

        //获取
        console.log(m.get('change'));
        console.log(m.get(key));

        //清空
        // m.clear();

        //遍历
        for(let v of m) {
            console.log(v);
        }

        // console.log(m);

    </script>
</body>
</html>
相关推荐
一味做笔记20 分钟前
C语言学习笔记(抱佛脚版)
笔记·学习
qq_5895681023 分钟前
java学习笔记——多线程
java·笔记·学习·intellij-idea
Warolitbos24 分钟前
Redis学习笔记
redis·笔记·学习
echola_mendes34 分钟前
LangChain 结构化输出:用 Pydantic + PydanticOutputParser 驯服 LLM 的“自由发挥”
服务器·前端·数据库·ai·langchain
拉不动的猪38 分钟前
刷刷题46(常见的三种js继承类型及其优缺点)
前端·javascript·面试
关注我:程序猿之塞伯坦1 小时前
JavaScript 性能优化实战:突破瓶颈,打造极致 Web 体验
开发语言·前端·javascript
兰德里的折磨5501 小时前
对于后端已经实现逻辑了,而前端还没有设置显示的改造
前端·vue.js·elementui
hikktn1 小时前
【开源宝藏】30天学会CSS - DAY9 第九课 牛顿摆动量守恒动画
前端·css·开源
V---scwantop---信1 小时前
复古卡通纹理噪点印刷打印照片效果PS特效样机 Texturizer Original Design Effect
笔记
郭涤生2 小时前
第二章:影响优化的计算机行为_《C++性能优化指南》notes
开发语言·c++·笔记·性能优化