Map和Set的区别，Map和Object的区别

Map和Set的区别，Map和Object的区别

一、什么是Set

Set是唯一值的集合类似与数组，常用于数组去重

Set 对象的几个常用方法和属性

new Set() 创建新的 Set 对象。
add() 向 Set 添加新元素。
clear() 从 Set 中删除所有元素。
delete() 删除由其值指定的元素。
has() 如果值存在则返回 true。
forEach() 为每个元素调用回调。
keys() 返回 Set 对象中值的数组。
size 返回元素个数。

类型转换

// Array 转 Set
var mySet = new Set(["value1", "value2", "value3"]);
// 用...操作符，将 Set 转 Array
var myArray = [...mySet];
// String 转 Set
var mySet = new Set('hello'); // Set(4) {"h", "e", "l", "o"}
// 注：Set 中 toString 方法不能将 Set 转换成 String

Set 对象作用

1. 去重

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

2. 求并集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var union = new Set([...a, ...b]); // {1, 2, 3, 4}

3. 求交集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}

4. 求差集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var difference = new Set([...a].filter(x => !b.has(x))); // {1}

二、什么是Map

Map的特性

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
Map 对象记得键的原始插入顺序。
Map 对象具有表示映射大小的属性。

Map 对象的几个常用方法和属性

new Map() 创建新的 Map 对象。
set() 为 Map 对象中的键设置值。
get() 获取 Map 对象中键的值。
entries() 返回 Map 对象中键/值对的数组。
keys() 返回 Map 对象中键的数组。
values() 返回 Map 对象中值的数组。

Map对象的遍历

1.for… of

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");

// 将会显示两个 log。 一个是 "0 = zero" 另一个是 "1 = one"
for (var [key, value] of myMap) {
  console.log(key + " = " + value);
}
for (var [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}
/* 这个 entries 方法返回一个新的 Iterator 对象，它按插入顺序包含了 Map 对象中每个元素的 [key, value] 数组。 */

// 将会显示两个log。 一个是 "0" 另一个是 "1"
for (var key of myMap.keys()) {
  console.log(key);
}
/* 这个 keys 方法返回一个新的 Iterator 对象， 它按插入顺序包含了 Map 对象中每个元素的键。 */

// 将会显示两个log。 一个是 "zero" 另一个是 "one"
for (var value of myMap.values()) {
  console.log(value);
}
/* 这个 values 方法返回一个新的 Iterator 对象，它按插入顺序包含了 Map 对象中每个元素的值。 */

2.forEach（）

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");

// 将会显示两个 logs。 一个是 "0 = zero" 另一个是 "1 = one"
myMap.forEach(function(value, key) {
  console.log(key + " = " + value);
}, myMap)

Map 对象的操作

1. Map 与 Array的转换

var kvArray = [
  ["key1", "value1"],
  ["key2", "value2"]
];

// Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象
var myMap = new Map(kvArray);

// 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
var outArray = Array.from(myMap);

2. Map 的克隆

var myMap1 = new Map([
  ["key1", "value1"],
  ["key2", "value2"]
]);
var myMap2 = new Map(myMap1);

console.log(original === clone);
// 打印 false。 Map 对象构造函数生成实例，迭代出新的对象。

3. Map 的合并

var first = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
var second = new Map([
  [1, 'uno'],
  [2, 'dos']
]);

// 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的，对应值即 uno，dos， three
var merged = new Map([...first, ...second]);

三、map和object的比较

共同点

二者都是以key-value的形式对数据进行存储;

不同点

1. key的数据类型范围不同
   obj可以作为key的仅有number、string、symbol。
   map均可以。

2. key的顺序不同。
   obj通过obj.keys（）打印出来的属性顺序是 number–字符串
   map的key顺序是声明顺序。

3. 创建方式不同。
   obj有三种创建方式 字面量{}、new Object（） 、构造函数。
   map仅支持new Map（）

4. key的调用不同。
   map只能用原生的get方法调用。

5. 设置属性的方式不同
   map只能使用set（key，val）方法设置属性。

6. Size属性
   map有size属性，对象没有。Map.size 返回 Map 中元素的数量，而 Object 的键值对个数只能手动计算

四、扩展

数组去重：

1. Set去重

function unique(arr) {
  // 兼容，但其实也没必要，现在大多是浏览器都支持ES5
  if (!Array.isArray) {
    Array.isArray = function(arg) {
      return Object.prototype.toString.call(arg) === '[object Array]';
    };
  }
  if (!Array.isArray(arr)) {
    return arr
  }
  /** Array.from()方法从类似数组或可迭代对象创建一个新的(浅拷贝)的数组实例
      Array.from(arrayLike,mapFn,thisArg)
      arrayLike：必选，想要转换成数组的伪数组对象或可迭代对象
      mapFn：可选，如果指定了该参数，新数组中的每个元素会执行该函数
      thisArg：可选，执行回调函数mapFn时this对象
      可迭代的对象包括ES6新增的数据结构Set和Map
  **/
  return Array.from(new Set(arr))
}

2. 双重for循环加splice

function unique(arr) {
  if (!Array.isArray(arr)) {
    return arr
  }
  let len = arr.length
  for (let i = 0; i < len; i++) {
    for (let j = i + 1; j < len; j++) {
      if (arr[i] === arr[j]) {
        arr.splice(j, 1)
        len--
        j--
      }
    }
  }
  return arr
}

3. 利用indexOf去重

使用indexOf方法有两种思路实现去重。

思路一： 遍历数组判断新数组中有没有当前项，没有放入新数组

function unique(arr) {
  if (!Array.isArray(arr)) {
    return arr
  }
  const res = [];
  for (let i = 0; i < arr.length; i++) {
    if (res.indexOf(arr[i]) === -1) res.push(arr[i]);
  }
  return res;
}

思路二： 将第一项放进新数组，从第二项开始遍历，若当前项元素在数组第一次出现的位置不等于当前的位置，则代表此元素前边已经存在，忽略掉，否则放进新数组。

function unique(arr) {
  if (!Array.isArray(arr)) {
    return arr
  }

  const res = [arr[0]];
  for (let i = 1; i < arr.length; i++) {
    if (arr.indexOf(arr[i]) === i) res.push(arr[i]);
  }
  return res;
}

4. 使用includes

其实这种方法和上边indexOf方法思路大同小异
includes() 此方法返回一个布尔值，判断给定的值是否存在于数组中，和字符串的includes方法基本类似

function unique(arr) {
  if (!Array.isArray(arr)) {
    return arr
  }

  const res = [];
  for (let i = 0; i < arr.length; i++) {
    if (!res.includes(arr[i])) res.push(arr[i]);
  }
  return res;
}

5. 使用sort进行去重

思路：先排序，相邻两项比较，若不相同放新数组，否则忽略

//JavaScript
function unique(arr) {
  if (!Array.isArray(arr)) {
    return arr
  }
  arr.sort() // 注意细节，sort()方法没有返回值，会改变可变对象
  const res = [arr[0]];
  for (let i = 1; i < arr.length; i++) {
    if (arr[i] !== arr[i - 1]) res.push(arr[i]);
  }
  return res;
}

6、利用hasOwnProperty()

hasOwnProperty() 方法：返回一个布尔值，表示对象自身属性中是否具有指定的属性。
思路：利用对象的键名不可重复的特点。

function unique(arr) {
  if (!Array.isArray(arr)) {
    return arr
  }
  let obj = {};
  return arr.filter(function(item, index, arr) {
    return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
  })
}

7. 利用hash表

思路：也是利用对象的键名不可重复的特点。

function unique(arr) {
  var n = {},
    res = []; //n为hash表，res为临时数组
  for (var i = 0; i < arr.length; i++) {
    if (!n[arr[i]]) {
      n[arr[i]] = true;
      res.push(arr[i]);
    }
  }
  return res;
}

8. 使用Map

思路：创建一个空Map数据结构，遍历需要去重的数组，把数组的每一个元素作为key存到Map中，和上边hash的思路基本一致。

function unique(arr) {
  let map = new Map();
  let res = [];
  for (let i = 0; i < arr.length; i++) {
    if (!map.has(arr[i])) {
      map.set(arr[i], false);
      res.push(arr[i]);
    }
  }
  return res;
}