JavaScript处理数据的集合包括Object(对象)和Array(数组)。
这些对象也被称为构建对象,因为它们是在JavaScript中预先准备好的,具有以下性质。
对象,存储带有键的数据的集合。
数组,存储有序集合。
随着 ES6 中 Map 和 Set 的引入,您现在可以更灵活地处理数据。
因此,这次在介绍 Map 和 Set 的同时,也会说明 Object 和 Array 的区别。
Map
Map 是一个带键的数据项的集合,就像一个 Object 一样。
在 ES5 之前,Object 被用作 Map 的替代品。
但是它们最大的差别是 Map 允许任何类型的键(key)。
Map的基本用法
从这里,让我们看看如何使用 Map。
Map创建/初始化
new Map() 创建一个Map()
const map = new Map();
使用元素创建Map
创建Map时也可以设置初始值。存储键值对。
const map = new Map([ [1, 'One'], [2, 'Two'], [3, 'Three'] ]);
添加和删除元素
Map提供了set和get方法。
可以使用map.set(key,value)添加值,也可以使用map.get(key)检索值。
//创建 Map const map = new Map(); // 添加元素 map.set(1, 'One'); // 检索元素 console.log(map.get(1)); //"One"
如果多次使用相同的键名使用 set 方法,最后添加的值将覆盖它。
const map = new Map(); map.set(1, 'One'); map.set(1, '一'); map.set(1, '1'); console.log(map.get(1)); // "1"
此外,在下面我们可以看到,键并不局限于字符串,它可以是任何类型的键。这是“Object”和“Map”的主要区别。
const map = new Map();
map.set(1, 'number');
map.set('1', 'string');
map.set(false, 'boolean');
console.log(map.get(1)); // "number"
console.log(map.get('1')); // "string"
console.log(map.get(false)); // "boolean"获取元素数量
要获得Map中元素的数量,可以size方法。
新创建的 Map 将返回 0。
const map1 = new Map(); const map2 = new Map([ [1, 'One'], [2, 'Two'], [3, 'Three'] ]); console.log(map1.size); // 0 console.log(map2.size); // 3
检查元素是否存在
要检查Map中是否存在元素,可以使用has方法。
如果map.has(key)存在键,则返回true,否则返回false。
const map = new Map();
map.set(1, 'One');
console.log(map.has(1)); // true
console.log(map.has('1')); // falseMap迭代
您可以使用forEach方法在Map中进行迭代。
Map的forEach方法传递的是键,而不是数组中的索引。
const map = new Map([
[1, 'One'],
[2, 'Two'],
[3, 'Three']
]);
map.forEach((value, key) => {
console.log(key, value);
});
// 1, "One"
// 2, "Two"
// 3, "Three"还可以使用以下方法在Map中执行迭代操作。
这时,for…和of句一起使用。
map.keys() —— 遍历并返回一个包含所有键的可迭代对象,
map.values() —— 遍历并返回一个包含所有值的可迭代对象,
map.entries() —— 遍历并返回一个包含所有实体 [key, value] 的可迭代对象,for..of 在默认情况下使用的就是这个。
const map = new Map([
[1, 'One'],
[2, 'Two'],
[3, 'Three']
]);
// 遍历所有的键
for (let number of map.keys()) {
console.log(number);
}
// 1
// 2
// 3
// 遍历所有的值
for (let number of map.values()) {
console.log(number);
}
// "One"
// "Two"
// "Three"
// 遍历所有的实体 [key, value]
for (let number of map.entries()) {
console.log(number);
}
// [1, "One"]
// [2, "Two"]
// [3, "Three"]Set
Set 是一个可以存储无键值的集合。
Array和Set具有相似的性质,可以保存多个引用类型或原始类型的值。
与Array的主要区别在于,Set不能具有重复的值。
所以当你想保证一个值是唯一的,或者你想检查它是否有一个值时,则Set非常有用。

Set的基本用法
让我们看看如何使用Set。
创建/初始化Set
可以使用new Set()创建一个新的Set,并且还可以在创建时包含初始值。
const set = new Set(); const set = new Set(['One', 'Two', 'Three']);
获取元素数量
要获得Set中元素的数量,可以size方法。
新创建的 Set 将返回 0。
const set1 = new Set(); const set2 = new Set(['One', 'Two', 'Three']); console.log(set1.size); // 0 console.log(set2.size); // 3
添加和删除元素
Set拥有可以追加和删除要素的方法。
你可以在set.add(value)中添加值,在set.delete(value)中删除任何值。
此外,在set.clear()中,删除set的所有元素。
const set = new Set();
const person = { name: 'Emma' };
// 添加元素
set.add('One');
set.add(1);
set.add(person);
console.log(set.size); // 3
// 删除元素
set.delete('One');
console.log(set.size); // 2
// 删除所有元素
set.clear();
console.log(set.size); // 0Set的特点是没有重复的元素
因此,在add方法添加已经有的值的情况下,则会忽略该值。
const set = new Set();
set.add('One');
console.log(set.size); // 1
// 因为重复,所以不添加
set.add('One');
console.log(set.size); // 1检查元素是否存在
要检查Set中是否存在元素,可以使用has方法。
如果set.has(key)存在键,则返回true,否则返回false。
const set = new Set();
set.add('One');
console.log(set.has('One')); // true
console.log(set.has(1)); // falseSet迭代
您可以使用forEach方法或者for..of在Set中进行迭代。
const set = new Set(['One', 'Two', 'Three']);
set.forEach((num) => {
console.log(num);
});
// "One"
// "Two"
// "Three"
for (let num of set) {
console.log(num);
}
// "One"
// "Two"
// "Three"将Set转换为数组
Set 和 Array 的属性非常相似,不同之处在于它们是否可以具有相同的值。
但是,可以在保留 Set 功能的同时将 Set 转换为 Array。
通过结合spread运算符,您可以轻松创建一个不重复的数组。
const array = [1, 2, 3, 1, 2, 3]; // 创建具有重复值的数组 const set = new Set(array); // 从数组创建Set const newArray = [...set]; // 将Set转换为数组 console.log(newArray); // [1, 2, 3]
结语
这一次,我解释了Map和Set。
通过采用Map和Set,可以灵活地进行数据管理和重复处理。
词雅网