ES6 MAP

最新推荐文章于 2022-05-29 17:27:16 发布

五仁卤鸡翅

最新推荐文章于 2022-05-29 17:27:16 发布

阅读量156

点赞数

分类专栏： ES6 文章标签： javascript es6

本文链接：https://blog.csdn.net/MoonNight608/article/details/104330738

版权

ES6 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

介绍

本文是在学习ES6时做的一些学习笔记，所有的笔记请查看：ES6 学习笔记

Map

1、 Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
2、key可以是任意类型的数据
3、可以用 for…of foreach循环进行遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MAP</title>
</head>
<body>
<script>
const people = new Map();
people.set('jelly',23);
people.set('mary',25);
people.set('mify',30);

// 对象可以为key
people.set({},3)

// 获取属性值
people.get('jelly') // 23

// 获取长度
people.size() // 4

// 判断是否包含某个键
people.has('jelly')// true

// 删除某个值
people.delete('mary')  // 删除掉了mary

// 删除所有元素，clear()
people.clear()

for(let person of people){
    console.log(person)  //输出数组形式的数据['jelly',23],['mary',25]
}


// 可以在初始化map时传入数据
const fruits = new Map([['apple',6],['banana',5]]);

</script>
</body>
</html>

MAP应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MAP</title>
</head>
<body>
<button>Fire</button>
<button>Dancer</button>
<button>Ice Cream</button>
<button>Hamburger</button>
<script>
const clickCounts = new Map();
const buttons = document.querySelectorAll('button');
// 给每个button添加点击事件，使用map将每个按钮作为key。
buttons.foreach(button=>{
    clickCounts.set(button,0);
    button.addEventListener('click',function(){
        cosnt val = clicKCounts.get(this);
        clickCounts.set(this,val+1);
        console.log(clickCounts);
    })
})


</script>
</body>
</html>

WeakMap:
1、没有size()属性
2、不能循环
3、key只能是对象
4、如果weakmap里的元素没有在其它地方引用，会有自动清理机制，
但是Map里没有该功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>weakMap</title>
</head>
<body>
<script>
let jelly={name: 'jelly'}
let miffy = {name: 'miffy'}

const strong = new Map();
const weak = new WeakMap();

strong.set(jelly,'jelly is the best');
weak.set(miffy,'miffy is the 2nd best');

strong.size() // 长度为1
weak.size() // undefined

// WeakMap不支持for...of 循环,会报错
for(let person of weak){
    
}
//不支持clear()
weak.clear() //不支持clear()

//key必须是对象,如下写法会报错
weak.set('fruit','apple')

// 如果将jelly、miffy设置为null,则weak中会自动清理，变成空
// 但是strong还会存在该引用，不会变成空


</script>
</body>
</html>

五仁卤鸡翅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6 MAP

目录介绍Map介绍本文是在学习ES6时做的一些学习笔记，所有的笔记请查看：ES6 学习笔记Map1、 Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。2、key可以是任意类型的数据3、可以用 for…of foreach循环进行遍历<!DOCTYPE html><html lang="en"><head> ...
复制链接

扫一扫

专栏目录