随笔 map和set的区别和共同之处

536 阅读3分钟

相同点:set和map都能够起到数组去重的作用,但是内部方法不同

Map

Map 实例属性

  • size属性返回 Map 结构的成员总数。

Map 实例方法

  • Map.prototype.set(key, value)set方法设置键名key对应的键值为value,然后返回整个 Map 结构。如果key已经有值,则键值会被更新,否则就新生成该键。

  • Map.prototype.get(key)get方法读取key对应的键值,如果找不到key,返回undefined

  • Map.prototype.has(key)has方法返回一个布尔值,表示某个键是否在当前 Map 对象之中。

  • Map.prototype.delete(key)delete方法删除某个键,返回true。如果删除失败,返回false

  • Map.prototype.clear()clear方法清除所有成员,没有返回值。

Map 遍历方法

Map 结构原生提供三个遍历器生成函数和一个遍历方法。

  • Map.prototype.keys():返回键名的遍历器。

  • Map.prototype.values():返回键值的遍历器。

  • Map.prototype.entries():返回所有成员的遍历器。

  • Map.prototype.forEach():遍历 Map 的所有成员。

需要特别注意的是,Map 的遍历顺序就是插入顺序。

map内部只能是数组格式,[key ,value], 根据 key 判断是否重复,假如重复的话,后面的元素会替换前面的元素,如 map 假如跟 set 一样使用基本类型的话,那么会报错,如下面的 map1, 假如是obj形式的,则返回如下面的 map2

const map = new Map([
    ['name', '张三'],
    ['name1', '张三'],
    ['name1', '李四'],
    ['title', 'Author']
]);

console.log(map)
[
    {
        key: 'name'
        value: '张三'
    },
    {
        key: 'name1'
        value: '李四'
    },
    {
        key: 'title'
        value: 'Author'
    }
]

const map1 = new Map([1,2,3,4,5]);
error: Iterator value 1 is not an entry object

const map2 = new Map([{key: 'name',value:'123'},{key: 'name',value:'456'},{key:'name',value:'789'}]);

console.log(map2)
[{undefined: undefined}]

Set

Set 实例属性

  • Set.prototype.constructor:构造函数,默认就是Set函数。

  • Set.prototype.size:返回Set实例的成员总数。

set 实例方法

  • Set.prototype.add(value):添加某个值,返回 Set 结构本身。

  • Set.prototype.delete(value):删除某个值,返回一个布尔值,表示删除是否成功。

  • Set.prototype.has(value):返回一个布尔值,表示该值是否为Set的成员。

  • Set.prototype.clear():清除所有成员,没有返回值。

set 遍历方法

  • Set.prototype.keys():返回键名的遍历器

  • Set.prototype.values():返回键值的遍历器

  • Set.prototype.entries():返回键值对的遍历器

  • Set.prototype.forEach():使用回调函数遍历每个成员

set内部可以是基本类型也能如同map一样使用array格式,其他引用类型没有测试 跟map不同的是,set属于前面跟后面重复之后,依然使用前面的,并不会被后面的替换,这点可以根据打印的 set 看到 假如使用array类型的话,因为属于不同的引用地址,所以判断为不同的元素,能够打印多次,但是假如引用地址相同,那么和基本类型一样,前面有了后面不在就不在显示如 set1

const set = new Set([1,2,3,3,3,4,'55',5,'55','66']);
console.log(set) 
[1,2,3,4,'55',5,'66']

const arr = ['name','王五']
const set1 = new Set([    ['name', '王五'],
    ['name1', '张三'],
    arr,
    ['name1', '李四'],
    arr,
    ['title', 'Author'],
    ['name', '王五'],
]);
console.log(set1)
[    ['name', '王五'],
    ['name1', '张三'],
    ['name', '王五'],
    ['name1', '李四'],
    ['title', 'Author'],
    ['name', '王五'],
]

我这里写法也可能是错误的,欢迎各位大佬指正。 另外各位可以去阮一峰大佬的 # ECMAScript 6 入门,看看,肯定比我规范,全面。 我这里只是在后面加了几个例子用于我自己的记录,以防后面忘了。