ES6- Map-1介绍及常用api
时间:2022-07-25
本文章向大家介绍ES6- Map-1介绍及常用api,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
ES6- Map-1介绍及常用api
Map简介
- ES6提供的构造函数,一种新的存储结构,本质是键值对的集合
- 特点:key对应value,key和value唯一,任何值都可以当key
- 用途:可以让对象去当属性,去重
- 原理实现: 链接链表, hash算法, 桶
Map对象的创建
- 初始化默认赋值,需放入数组
let oMap = new Map([["name", "www"],["age", 18],["sex", 20],[{}, 20]]);
console.log(oMap);
- 直接创建
let oMap = new Map();
console.log(oMap);
Map-api介绍
1. add() 往Map中添加键值对
其中还可以添加对象和dom元素
let oMap = new Map();
oMap.set("name","www");
oMap.set("age",19);
oMap.set("sex", true);
// 再添加一般的值以后,我们甚至可以把dom元素放进去当key
let oDiv = document.getElementById("demo");
oMap.set(oDiv, 50);
console.log(oMap);
2. get() 根据key取value
let oMap = new Map([["name", "www"],["age", 18],["sex", 20],[{}, 20]]);
// 当然,如果直接放入空对象当键是取不到的,因为每一次都是重新new一个出来
console.log(oMap.get("name"));
3. delete() 根据key删除键值对
let oMap = new Map([["name", "www"],["age", 18],["sex", 20],[{}, 20]]);
oMap.delete("name");
console.log(oMap);
4. keys() 获取所有的key
let oMap = new Map([["name", "www"],["age", 18],["sex", 20],[{}, 20]]);
console.log(oMap.keys());
5. values() 获取所有的value
let oMap = new Map([["name", "www"],["age", 18],["sex", 20],[{}, 20]]);
console.log(oMap.values());
6. has() 判断map是否具有某个key
let oMap = new Map([["name", "www"],["age", 18],["sex", 20],[{}, 20]]);
console.log(oMap.has("name"));
7.clear() 清空Map
let oMap = new Map([["name", "www"],["age", 18],["sex", 20],[{}, 20]]);
oMap.clear();
console.log(oMap);
8.size() 获取Map的长度
let oMap = new Map([["name", "www"],["age", 18],["sex", 20],[{}, 20]]);
console.log(oMap.size);
9.entries() 相当于获取创建的对象本身
let oMap = new Map([["name", "www"],["age", 18],["sex", 20],[{}, 20]]);
console.log(oMap.entries());
10.Map的遍历方法
1采用forEach()方法
let oMap = new Map([["name", "www"],["age", 18],["sex", 20],[{}, 20]]);
oMap.forEach((ele, key, self) => {
console.log(ele, key, self);
})
2 采用for of 循环
let oMap = new Map([["name", "www"],["age", 18],["sex", 20],[{}, 20]]);
for(let prop of oMap){
console.log(prop[0], prop[1]);
}
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法