JavaScript中Set、Map的应用

最新推荐文章于 2024-02-03 18:16:08 发布

戴翔的技术博客

最新推荐文章于 2024-02-03 18:16:08 发布

阅读量553

点赞数 3

分类专栏：前端开发文章标签： javascript html html5

本文链接：https://blog.csdn.net/yuanxiang01/article/details/120860217

版权

前端开发专栏收录该内容

58 篇文章

订阅专栏

0 什么是Set、Map

Set是一系列无序、没有重复值的数据集合。你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即 Set 中的元素是唯一的。

Map是一系列键值对的集合。Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。

1 Set的应用

1.1 数组去重

例1：JavaScript中的Set，利用其特性，将数组[1, 2, 3, 3, 2, 1]去重后返回。

console.log([...new Set([1, 2, 3, 3, 2, 1])]);

输出结果：

[1, 2, 3]

1.2 字符串去重

例2：将字符串’abcdeffab’去重后返回。

console.log([...new Set('abcdeffab')].join(''));

输出结果：

abcdef

1.3 存放DOM元素

例3：使用Set对象存放NodeList，并将p标签中字体颜色改为红色，背景色改为蓝色。
结构层

<body>
	<p>1</p>
	<p>2</p>
	<p>3</p>
</body>

行为层

const s = new Set(document.querySelectorAll('p'));
s.forEach(elem => {
    elem.style.color = 'red';
    elem.style.backgroundColor = 'blue';
});

输出结果：

在这里插入图片描述

2 Map的应用

存放DOM元素

例4：使用Set对象存放NodeList，并将p标签中字体颜色改为红色，背景色改为蓝色。
结构层

<body>
	<p>1</p>
	<p>2</p>
	<p>3</p>
</body>

行为层

const [p1, p2, p3] = document.querySelectorAll('p');
const m = new Map([
    [p1, {
        color: 'red',
        backgroundColor: 'yellow',
        fontSize: '20px'
    }],
    [p2, {
        color: 'green',
        backgroundColor: 'black',
        fontSize: '29px'
    }],
    [p3, {
        color: 'blue',
        fontSize: '10px'
    }]
]);
m.forEach((obj, elem) => {
    for (const p in obj) {
        elem.style[p] = obj[p];
        console.log([p]);
    }
});