资讯专栏INFORMATION COLUMN

es6-Set与Map

big_cat / 750人阅读

摘要:由于和不会被转换为字符串,所以在内部是不同的项,如果他们被转化为字符串,那么都会等于,如果多次调用并传入相同的值作为参数。第二次重复传入并不会被添加到集合中,那么的属性值还是为。的方法和共享了几个方法。小结正式将与引入。

se5中的set与map

在est5中开发者使用对象属性来模拟。set多用于检查键的存在,map多用于提取数据。

{
    let set = Object.create(null)
    set.foo = true;
    //检查属性是否存在
    if (set.foo) {
        //其他操作
    }

    let map = Object.create(null);
    map.foo = "一个值";
    let val = map.foo;

    console.log("map-->:", val); //map-->:一个值"
}

在简单情况下将对象作为map和set来使用都是可行的,但是一旦接触到对象属性的局限性,此方式就会遇到更多的麻烦。

{
    let map1 = Object.create(null),
        key1 = {},
        key2 = {};

    map1[key1] = "foo";
    console.log("key2-->:", map1[key2]);

    let map2 = Object.create(null);
    map2.count = 1;
    //是想检查count的存在,还是非零值?
    if (map2.count) {
        //...
    }
}

map1[key1]和map1[key2]引用了同一个值。由于对象属性只能是string,又因为对象默认的string表达形式是"[object object]"。导致key1和key2被转换为同一个字符串。map2中count的用法存在歧义。该if语句内的代码都会被执行因为1被隐式转换为true。然而count的值为0则会被隐式转为false。在大型应用中这类问题都是难以确认,难以调试的。这也是新增set和map类型的原因。set类型是一种无重复值的有序列表。set允许对它包含的数进行快速访问,从而更有效的追踪各种离散值。

创建set类型

使用new set()来创建。调用add()方法向集合中添加元素,访问集合的size属性获取集合数量。

{
    let set = new Set();

    set.add(5);
    set.add("5");
    console.log("typeof set-->:", typeof set)
    console.log("set-->:", set)
    console.log("size-->:", set.size)
}

set不会使用强制类型转换来判断值是否重复,这意味着set可以同时包含number(5)和string(5),唯一的例外-0和+0在set中被判定是相等的,如果向set集合中添加多个对象,则他们之间彼此独立。

{
    let set = new Set();
    let key1 = {};
    let key2 = {};

    set.add(key1);
    set.add(key2);
    console.log("typeof setobject-->:", typeof set)
    console.log("setobject-->:", set)
    console.log("size-->:", set.size)
}

由于key1和key2不会被转换为字符串,所以在set内部是不同的项,如果他们被转化为字符串,那么都会等于"[object object]",如果多次调用add()并传入相同的值作为参数。那么后续的调用会被忽略。

{
    let set = new Set();

    set.add(5);
    set.add("5");
    set.add(5);
    console.log("typeof set-->:", typeof set)
    console.log("set-->:", set)
    console.log("size-->:", set.size)
}

第二次重复传入numner(5)并不会被添加到set集合中,那么size的属性值还是为2。也可以使用数组来初始化set集合。集合同样会过滤重复的值。

{
    let set = new Set([1, 2, 3, 4, 5, 5, 5, 5, 5, 5]);
    console.log("size-->:", set.size);
}

通过has()可以检测set集合中是否存在某个值。

{
    let set = new Set();

    set.add(5);
    set.add("6");
    console.log("set has-->:", set.has(6));
    console.log("set has-->:", set.has("6"))
    console.log("set has-->:", set.has(5))
    console.log("set has-->:", set.has("5"))
}

set集合中相同的number和sting并不会返回true。调用delete()方法可以移除set中的某一个值,调用clear()方法可以移除所有值。

{
    let set = new Set();

    set.add(5);
    set.add("6");
    console.log("set has-->:", set.has("6"));
    set.delete("6")
    console.log("set has-->:", set.has("6"))
    console.log("size-->:", set.size)
    set.clear();
    console.log("size-->:", set.size)
}

set集合简单易用,可以有效的跟踪多个独立有序的值。

set的forEach

set集合和数组的forEach类似,运行机制也比较类似。forEach()方法的回调接收3个参数:
1.集合中索引的位置。
2.被遍历参数的值
3.集合本身

{
    let set = new Set(["a", "b", "c", "d", "e"]);
    set.forEach((k, val, owner) => {
        console.log("set-forEach-k-->:", k);
        console.log("set-forEach-val-->:", val);
        console.log("set-forEach-owner-->:", owner);
    })
}
将set转换为数组

将数组转换为set集合的过程很简单,需要给set集合传入数组即可。将集合转回数组,只需要使用展开运算符即可。

{
    let arr = [1, 2, 3, 4, 5, 5, 5, 5, 5, 5];
    let set = new Set(arr);
    let newArr = [...set];
    //ps: 代码行数太多可以压缩下
    let newArr2 = [...new Set([1, 2, 3, 4, 5, 5, 5, 5, 5, 5])];
    console.log(newArr, newArr2)
}
创建map类型

map类型是键值对的有序列表,键和值都可以是任意类型,可以调用set()方法传递一个键和一个关联的值,来给马屁添加项;此后使用键名来调用get()方法获取对应的值。

{
    let map = new Map();
    map.set("title", "es6");
    map.set("year", 2016);

    console.log("map-title-->", map.get("title"))
    console.log("map-year-->", map.get("year"))
}
map的方法

map和set共享了几个方法。以下的方法和属性map和set上都存在:
1.forEach(val, k, owner): 遍历map
2.has(key):判断指定的键值是否存在
3.delete(key):移除map中键以及对应的值
4.clear():移除map中所有的键和值
5.size:指明包含多个键值对。

{
    let map = new Map();
    map.set("title", "es6");
    map.set("year", 2016);

    map.forEach((val, k, owner) => {
        console.log("map-forEach-k-->:", k);
        console.log("map-forEach-val-->:", val);
        console.log("map-forEach-owner-->:", owner);
    })
    console.log("map-size-->:", map.size);

    console.log("map-has-->:", map.has("title"));

    map.delete("title");
    console.log("map-->:", map);

    map.clear();
    console.log("map-->:", map);
}
小结

es6正式将set与map引入。在此之前往往使用对象来模拟,但是由于与对象属性有关的限制,这么做会经常遇到问题。
这里并没有弱引用weakset和weakmap,有这方面需要的可以自己去查阅

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95329.html

相关文章

  • 20190727-前端笔记-Map结构

    摘要:将对象当做的一个键获取键为的值删除键为的键值对判断是否包含键值对但是我在看阮一峰的的时候,看到一些针对自己的问题,不太好理解。 在JS的对象(Object)中,本质是就是键值对的集合(HASH) { name:Kisn, Brith:941018 } 但是在实际情况使用中,我们不能很好地使用它,它也会导致很多意外。特别是,我想要一个动态的键时. const data = {}; con...

    everfly 评论0 收藏0
  • es6 Map和WeakMap

    摘要:事实上,不仅仅是数组,任何具有接口且每个成员都是一个双元素的数组的数据结构都可以当做构造函数的参数。返回所有成员的遍历器需要特别注意的是,的遍历顺序就是插入顺序。转为转为,正常情况下,所有键名都是字符串。 Map JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。为了解决这个问题,ES6 提...

    sPeng 评论0 收藏0
  • es6 Map和set

    摘要:返回一个布尔值,表示该值是否为的成员。清除所有成员,没有返回值。该数组中的每一项也必须是数组,内部数组的首个项会作为键,第二项则为对应值。返回所有成员的遍历器需要特别注意的是,的遍历顺序就是插入顺序。 Js大部分历史时期都只存在一种集合类型,也就是数组类型。数组在 JS 中的使用正如其他语言的数组一样,但缺少更多类型的集合导致数组也经常被当作队列与栈来使用。数组只使用了数值型的索引,而...

    superPershing 评论0 收藏0
  • ES6系列---Set集合Map集合

    摘要:中模拟与长久以来,数组一直是中唯一的集合类型。用数组初始化集合事实上,只要是可迭代对象数组集合集合,都可以作为构造函数的参数。构造函数通过迭代器从参数中提取值。 ES5中模拟Set与Map 长久以来,数组一直是JavaScript中唯一的集合类型。如果开发者们需要使用非数值型索引,就会用非数组对象创建所需的数据结构,而这就是Set集合与Map集合的早期实现。 一般来说,Set集合常被用...

    happyhuangjinjin 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<