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')); // false
Map迭代
您可以使用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); // 0
Set的特点是没有重复的元素
因此,在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)); // false
Set迭代
您可以使用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,可以灵活地进行数据管理和重复处理。