争怎路由网/网站教程/内容

JavaScript中Map对象的解析（附示例）

网站教程2024-05-20 阅读
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于JavaScript中Map对象的解析（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一、创建Map对象

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

1.构造函数

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

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 true
console.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); // 2
myMap.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); // 1
console.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对象的解析（附示例）的详细内容，更多请关注php中文网其它相关文章！
				
				
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



      
……
标签:JavaScript中Map对象的解析（附示例）
 
相关阅读