JavaScript中Map对象的解析(附示例)

本篇文章给大家带来的内容是关于javascriptmap对象的解析(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一、创建Map对象

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值

1.构造函数

语法:new Map([iterable])
参数:

立即学习“Java免费学习笔记(深入)”;

iterable  可以是一个数组或者其他 iterable 对象,其元素或为键值对,或为两个元素的数组;每个键值对都会添加到新的 Map,null 会被当做 undefined

let arr = [1,2,3];let myMap = new Map(arr.entries());console.log(myMap.get(0)); // 1

登录后复制

二、Map实例属性

myMap.size 可访问属性返回 Map 对象的元素数量

size 属性的值是一个整数,表示 Map 对象有多少个键值对。size 是只读属性,它对应的 set 方法是 undefined,即不能改变它的值

let myMap = new Map();myMap.set("a", "alpha");myMap.set("b", "beta");myMap.set("g", "gamma");console.log(myMap.size); // 3

登录后复制

三、Map实例方法

1.set()

语法:myMap.set(key, value)

参数:
        key 必填,添加到Map对象的元素的key值
        value 必填,添加到Map对象的元素的value值

let myMap = new Map();myMap.set("bar", "foo"); myMap.set(1, "foobar");// 在Map对象中更新一个新元素myMap.set("bar", "baz");

登录后复制

2.get()

语法:myMap.get(key)

参数:
        key 想要获取的元素的键

返回值:返回一个Map对象中与指定键相关联的值,如果找不到这个键则返回undefined

let myMap = new Map();myMap.set("bar", "foo");console.log(myMap.get("bar"));  // "foo"console.log(myMap.get("baz"));  // undefined

登录后复制

3.has()

语法:myMap.has(key)

参数:
         key 必填,用来检测是否存在指定元素的键值

返回值:如果指定元素存在于Map中,则返回true。其他情况返回false

let myMap = new Map();myMap.set("bar", "foo");console.log(myMap.has("bar"));  // returns trueconsole.log(myMap.has("baz"));  // returns false

登录后复制

4.delete() 方法用于移除 Map 对象中指定的元素

语法:myMap.delete(key)

参数:
        key 必须,从 Map 对象中移除的元素的键(key)

返回值:如果 Map 对象中存在该元素,则移除它并返回 true;否则如果该元素不存在则返回 false

let myMap = new Map();myMap.set("bar", "foo");myMap.delete("bar"); // 返回 true。成功地移除元素console.log(myMap.size); // 0

登录后复制

5.clear()方法会移除Map对象中的所有元素

语法:myMap.clear()

let myMap = new Map();myMap.set("bar","baz");myMap.set(1,"foo");console.log(myMap.size); // 2myMap.clear();

登录后复制

6.entries()

语法:myMap.entries()

返回值:返回一个新的包含[key, value]对的Iterator对象,返回的迭代器的迭代顺序与Map对象的插入顺序相同

let myMap = new Map();myMap.set("0", "foo");myMap.set(1, "bar");myMap.set({}, "baz");let mapIter = myMap.entries();console.log(mapIter.next().value); // ["0", "foo"]console.log(mapIter.next().value); // [1, "bar"]console.log(mapIter.next().value); // [Object, "baz"]

登录后复制

7.keys() 返回一个新的 Iterator 对象。它包含按照顺序插入Map对象中每个元素的key值

语法:myMap.keys()

let myMap = new Map();myMap.set("0", "foo");myMap.set(1, "bar");myMap.set({}, "baz");let mapIter = myMap.keys();console.log(mapIter.next().value); // "0"console.log(mapIter.next().value); // 1console.log(mapIter.next().value); // Object

登录后复制

8.values() 方法返回一个新的Iterator对象。它包含按顺序插入Map对象中每个元素的value值

语法:myMap.values()

let myMap = new Map();myMap.set("0", "foo");myMap.set(1, "bar");myMap.set({}, "baz");let mapIter = myMap.values();console.log(mapIter.next().value); // "foo"console.log(mapIter.next().value); // "bar"console.log(mapIter.next().value); // "baz"

登录后复制

9.forEach()

语法:myMap.forEach(callback[, thisArg])

参数:

callback 必要,每个元素所要执行的函数
thisArg 可选,callback 执行时其 this 的值

let myMap = new Map([["foo", 3], ["bar", {}], ["baz", undefined]]);myMap.forEach((value,key,map) => {console.log("key =",key,",value =",value); //key = foo ,value = 3});

登录后复制

以上就是JavaScript中Map对象的解析(附示例)的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2738836.html

(0)
上一篇 2025年3月8日 01:55:13
下一篇 2025年3月8日 01:55:20

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JavaScript中Set对象的介绍(附示例)

    本篇文章给大家带来的内容是关于javascript中set对象的介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、创建Set对象实例 Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用 1.…

    编程技术 2025年3月8日
    200
  • JavaScript中Number对象的介绍(代码示例)

    本篇文章给大家带来的内容是关于javascript中number对象的介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、创建Number实例对象 /** * new Number(value); * va…

    编程技术 2025年3月8日
    200
  • React中虚拟dom与diff算法的讲解(附代码)

    本篇文章给大家带来的内容是关于react中虚拟dom与diff算法的讲解(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 虚拟dom Jsx 表面写的是html,其实内部执行的是一段js createElement…

    2025年3月8日 编程技术
    200
  • vue文件如何使用echarts.js?(两种方法介绍)

    本篇文章给大家带来的内容是关于vue文件如何使用echarts.js?(两种方法介绍),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 最近工作中需要用到echarts,由于项目是用的vue-cli开发的。在网上搜到vue中…

    2025年3月8日
    200
  • 带你详细解读JS原型链

    本篇文章给大家带来的内容是关于带你详细解读js原型链,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 之前对js原型和原型链的理解一直觉得很绕,绕来绕去的,在看了《JavaScript高级程序设计》和各种文章之后,终于对原型…

    2025年3月8日 编程技术
    200
  • JavaScript的数据类型有哪些?js数据类型的介绍

    本篇文章给大家带来的内容是关于javascript的数据类型有哪些?js数据类型的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、JavaScript有几种类型的值? Javascript有两种数据类型,分别是基本…

    2025年3月8日
    200
  • javascript函数节流和防抖的应用场景介绍

    本篇文章给大家带来的内容是关于php变量作用域的用法介绍(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 throttle 节流 事件触发到结束后只执行一次。 应用场景 触发mousemove事件的时候, 如鼠标移动…

    编程技术 2025年3月8日
    200
  • ES6中Generator的自动执行详解

    本篇文章给大家带来的内容是关于es6中generator的自动执行详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 单个异步任务 var fetch = require(‘node-fetch’);function* g…

    编程技术 2025年3月8日
    200
  • javascript错误处理机制的介绍(附示例)

    本篇文章给大家带来的内容是关于javascript错误处理机制的介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 有时候,在自己封装的工具函数中,不传参或传入了错误类型的参数,也要适当的抛出一些错误以示警告;使…

    编程技术 2025年3月8日
    200
  • javascript中作用域链的详细介绍(附示例)

    本篇文章给大家带来的内容是关于javascript中作用域链的详细介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 概述 JavaScript 中的可执行代码有其执行上下文,在执行上下文中,有三个重要的元素: …

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论