zoukankan      html  css  js  c++  java
  • ES6中map和set用法

    ES6中map和set用法

    --转载自廖雪峰的官方网站

    一、map

    Map是一组键值对的结构,具有极快的查找速度。

    举个例子,假设要根据同学的名字查找对应的成绩,如果用Array实现,需要两个Array:
    var names = ['Michael', 'Bob', 'Tracy'];
    var scores = [95, 75, 85];

    给定一个名字,要查找对应的成绩,就先要在names中找到对应的位置,再从scores取出对应的成绩,Array越长,耗时越长。

    或者通过object键值对的方式来实现存储和查找:
    var names = Object.create({'Michael':95,'Bob':75,'Tracy':85});
    但是如果这个表十分庞大的时候,查询速度也是很感人的。

    所以ES6提供了map方法来提高查询的速度,如果用Map实现,只需要一个“名字”-“成绩”的对照表,直接根据名字查找成绩,无论这个表有多大,查找速度都不会变慢。如果用Map实现,只需要一个“名字”-“成绩”的对照表,直接根据名字查找成绩,无论这个表有多大,查找速度都不会变慢

    var m=new Map();
    m.set('Adam', 67); // 添加新的key-value
    m.set('Bob', 59);
    console.log(m);//Map { 'Adam' => 67, 'Bob' => 59 }
    console.log(m.has('Adam')); // 是否存在key 'Adam': true
    console.log(m.get('Adam')); // 67
    console.log(m.delete('Adam')); // 删除key 'Adam':true
    console.log(m.get('Adam')); // undefined

    ES6中Map相对于Object对象有几个区别:

    1. Object对象有原型, 也就是说他有默认的key值在对象上面, 除非我们使用Object.create(null)创建一个没有原型的对象;

    2. 在Object对象中, 只能把String和Symbol作为key值, 但是在Map中,key值可以是任何基本类型(String, Number, Boolean, undefined, NaN….),或者对象(Map, Set, Object, Function , Symbol , null….);

    3. 通过Map中的size属性, 可以很方便地获取到Map长度, 要获取Object的长度, 你只能用别的方法了;
        Map实例对象的key值可以为一个数组或者一个对象,或者一个函数,比较随意 ,而且Map对象实例中数据的排序是根据用户push的顺序进行排序的, 而Object实例中key,value的顺序就是有些规律了, (他们会先排数字开头的key值,然后才是字符串开头的key值);

    二、set

    Set和Map类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set中,没有重复的key。

    要创建一个Set,需要提供一个Array作为输入:

    var arr=[1,2,3,3,'3'];
    var s1=new Set(arr);
    console.log(s1);//Set { 1, 2, 3, '3' }
    s1.add(4);//重复添加无用
    console.log(s1);//Set { 1, 2, 3, '3', 4 }
    s1.delete(4);
    console.log(s1);//Set { 1, 2, 3, '3' }

    感觉set的用法可以有两个地方

    1. 因为key不能重复,所以可以用来去掉array中的重复元素。

    'use strict';
    // var set = new Set([1,2,1,2,2,1]);
    var arr = [1,2,1,2,2,1];
    //new Set 数组去重
    function unique(arr){
    return Array.from(new Set(arr));
    };
    //使用ES6的方法可以去重.
    console.log(unique(arr));

    1. 可以用来统计键(这个暂时还没想到应用场景)

    小结

    Map和Set是ES6标准新增的数据类型,请根据浏览器的支持情况决定是否要使用。

  • 相关阅读:
    前端设计网站收藏
    JAVA的StringBuffer类
    JDBC连接数据库
    JSP中request属性的用法
    jquery学习
    servlet学习(一)
    javascript 计算器
    xml学习(一)
    网站之单点登录简单思路
    关于ASP.NET中Menu控件在浏览器中不正常显示解决方法
  • 原文地址:https://www.cnblogs.com/polk-blogs/p/7469378.html
Copyright © 2011-2022 走看看