js中的set和map类型

作者: 绿芽 | 来源:发表于2022-07-12 11:46 被阅读0次

    Set与map

    Es6中新增加了两个数据类型set和map类型,下面就看下这两个类型的特性和用法。

    一、 Set

    特性和定义

    Set它是一种有序列表并且它的值没有重复。

    创建 Set 并添加项目

    Set 使用 new Set() 来创建,如果想要往Set中添加值可以使用add()方法进行添加。查看Set中有多少项值,使用 size 属性 。如:

        let mySet = new Set();
        mySet.add(1);
        mySet.add("1");
        console.log(mySet.size); // 2
        console.log(mySet) // Set(2) {1, "1"}
    

    上述代码创建了mySet并且向其中添加了两个参数(1,’1’),并分别打印他们的值。由于Set 不会使用强制类型转换来判断值是否重复(内部使用了Object.is()方法来判断两个值是否相同),所以它们都是独立的值。因此我们还可以往里添加两个对象,并且后面的值不会被忽略(因为使用Object.is()方法比较)。如:

    let mySet = new Set();
        mySet.add({});
        mySet.add({});
        console.log(mySet.size); // 2
        console.log(mySet) // Set(2) { {}, {} }
    

    如果 add() 方法添加了两次相同的值,那么在第一次添加之后实际上后面的就会被忽略。如:

        let mySet = new Set();
        mySet.add('a');
        mySet.add('a');
        console.log(mySet.size); // 1
        console.log(mySet) // Set(1) { 'a' }
    

    我们还可以使用数组来初始化一个 Set ,并且 Set 构造器会确保不重复地使用这些值。如:

        let mySet = new Set([1,2,1,1,2,3,4,5,5,5]);
        console.log(mySet.size); // 5
        console.log(mySet) // Set(5) { 1, 2, 3, 4, 5 }
    

    如果我们想查看某个值是否存在与Set中,可以使用has方法继续进行查看。如:

        let mySet = new Set([1,2,1,1,2,3,4,5,5,5]);
        console.log(mySet.size); // 5
        console.log(mySet) // Set(5) { 1, 2, 3, 4, 5 }
        console.log(mySet.has(5)) // true
        console.log(mySet.has(6)) // false 因为6不在Set中所以打印为false
    

    删除Set中的值

    如果我们想要删除Set中的值可以直接使用delete() 方法来删除单个值,或者使用clear() 方法来清空Set。如:

        let mySet = new Set([1,2,1,1,2,3,4,5,5,5]);
        console.log(mySet.size); // 5
        console.log(mySet) // Set(5) { 1, 2, 3, 4, 5 }
        console.log(mySet.has(5)) // true
    
        mySet.delete(5); // 删除5
        console.log(mySet.size); // 4
        console.log(mySet) // Set(4) { 1, 2, 3, 4 }
        console.log(mySet.has(5)) // false 因为删除后找不到5了
    

    Set 上的 forEach() 方法

    Es6给Set添加了循环的方法forEach(),可以方便的处理其中的每一项数据。
    forEach()方法会传入一个回调函数,回调函数可任意传入三个参数

    1. Set 中下个位置的值;
    2. 与第一个参数相同的值;
    3. 目标 Set 自身。
      传给回调函数的第一个与第二个 参数是相同的。(因为数组第二个参数参数的是索引值,但是Set没有键,所以就把自己的值当作键传入)除了参数差异外其他使用和数组基本相同。如:
        let mySet = new Set([1,2,1,1,2,3,4,5,5,5]);
        mySet.forEach((item, key, self) => {
            console.log(key + " " + item);
            console.log(self === mySet);
        });
        // 1 1
        // true
        // 2 2
        // true
        // 3 3
        // true
        // 4 4
        // true
        // 5 5
        // true
    

    将 Set 转换为数组

    上面说到创建Set可以传入一个数组进行创建,如果想要将Set转换为数组类型,使用…展开符即可。如:

        let mySet = new Set([1,2,1,1,2,3,4,5,5,5]);
        console.log([...mySet]); // [ 1, 2, 3, 4, 5 ]
    

    上述代码,先是使用数组创建了Set,然后使用…展开符把Set重新转换为一个数组。而且还利用了Set类型的特性和转换方式一行代码就可以实现数组的去重。

    二、ES6 的 Map

    特性和定义

    ES6 的 Map 类型是键值对的有序列表,而键和值都可以是任意类型(因为它键使用的比较方法也是Object.is()方法)。而Object的key都会被自动的转换为字符串类型,所以 1和 ‘1’是同一个键。

    Map的创建和使用

    Map类型的创建也是使用new Map方法进行创建。 可以使用set()方法传入key和value参数值进行添加每一项数据,使用get()方法传入key获取当前项数据。如:

        let myMap = new Map();
        myMap.set(1, 'one');
        myMap.set('1', 'one1');
        console.log(myMap); // Map(2) { 1 => 'one', '1' => 'one1' }
        console.log(myMap.get(1)); // one
        console.log(myMap.get(2)); // undefined 因为没有2这个key所以获取值为undefined
    

    因为Map的key可以是任何数据类型,所以我们还可以将{}作为key,又因为key是使用Object.is()方法进行比较的,所以可以可以存在多个{}创建的数据项。如:

        let myMap = new Map(),
            key1 = {},
            key2 = {}
        myMap.set(key1, 'one11111');
        myMap.set(key2, 'one22222');
        console.log(myMap.get(key1)); // one11111
        console.log(myMap.get(key2)); // one22222
    

    另一种初始化创建Map的方法是也可以传入一个数组,该数 组中的每一项也必须是数组,内部数组的首个项会作为键,第二项则为对应值。
    并且Map 与 Set 共享了以下三个方法,在 Map 与 Set 上都存在: has(key) :判断指定的键是否存在于 Map 中; delete(key) :移除 Map 中的键以及对应的值; clear() :移除 Map 中所有的键与值。 如:

        let myMap = new Map([["name", "xiaoming"], ["age", 25]]);
        console.log(myMap.has("name")); // true
        console.log(myMap.get("name")); // "xiaoming"
        console.log(myMap.has("age")); // true
        console.log(myMap.get("age")); // 25
        console.log(myMap.size); // 2
    
        myMap.delete("name");
        console.log(myMap.has("name")); // false
        console.log(myMap.size); // 1
        console.log(myMap.has("age")); // true
        console.log(myMap.get("age")); // 25
    
        myMap.clear();
        console.log(myMap.has("age")); // false
        console.log(myMap.get("age")); // undefined
        console.log(myMap.size); // 0
    

    Map 上的 forEach 方法

    Map 的 forEach() 方法类似于 Set 与数组的同名方法,它接受一个能接收三个参数的回调函 数:

    1. Map 中下个位置的值;
    2. 该值所对应的键;
    3. 目标 Map 自身。
      如:
        let myMap = new Map([["name", "xiaoming"], ["age", 25]]);
        myMap.forEach(function(value, key, self) {
            console.log(key + " " + value);
            console.log(self === myMap);
        });
    
        // 打印
        // name xiaoming
        // true
        // age 25
        // true
    

    相关文章

      网友评论

        本文标题:js中的set和map类型

        本文链接:https://www.haomeiwen.com/subject/jutabrtx.html