js去重方法以及Set、Map、Array.from方法的使用

去重方法1：

arrHeavy(arr){
    let map = new Map()
    for (let item of arr) {
     if (!map.has(item)) {
      map.set(item, item)
     }
    }
    return [...map.values()]

}

去重方法2：

mapGet (arr) {
      for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
          if (arr[i] === arr[j]) {
            // 如果第一个等于第二个，splice方法删除第二个
            arr.splice(j, 1)
            j--
          }
        }
      }
   return arr
}

使用方法：

let arr = [12, 56, 36, 87, 12, 45, 56,78]
console.log(this.mapGet(arr))

使用set去重

let arr = [4, 1, 3, 3, 2, '2'];
let uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [4, 1, 3, 2, "2"]

一、Set

Set对象是ES6中新定义的数据结构，类似于数组，它允许你存储任何类型的唯一值，不管是原始值还是对象引用。

Set方法

• add：添加值，返回Set本身。
• delete：删除值，返回是否删除成功。
• has：判断是否拥有这个值，返回true/false。
• clear：清除所有值。

let s = new Set();
s.add(4);
s.add(1);
s.add(3);
s.add(3);
s.add(2);
s.add(2);
console.log(s); // {4, 1, 3, 2}
console.log(s.has(4)); // true
s.delete(4);
console.log(s); // {1, 3, 2}
console.log(s.has(4)); // false
s.clear();
console.log(s); // {}

二、Map 原生提供三个遍历器:

• keys()：返回键名的遍历器。
• values()：返回键值的遍历器。
• entries()：返回所有成员的遍历器。

1、基本使用：

let map = new Map()
map.set('1', 'a')
map.set('2', 'b')
map.set('3', 'c')
console.log(map.get('1)) //a

let map1 = new Map([
      ['1', 'a'],
      ['2', 'b'],
      ['3', 'c']
    ])
console.log([...map1 ]) //[['1','a'], ['2','b'], ['3','c']]

2、Map结构和数组结构之间的转换 :

//循环遍历使用
// 1 
// 2
// 3
for (let key of map.keys()) {
  console.log(key) 
}
//转成数组使用
console.log([...map.keys()]) //['1', '2', '3']

console.log([...map.keys()]) //['a', 'b', 'c']

console.log([...map.keys()]) //[['1','a'], ['2','b'], ['3','c']]

3、合并多个Map

let newMap = new Map([...map, ...map1])

4、删除前n个值

let arr = [12, 56, 36, 87, 12, 45, 56,78]

//删除数组前2个值

let residueNum = Array.from(map1).slice(2)

 5、

三、Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

Array.from(object, mapFunction, thisValue) 

• object   必需。需转换为数组的对象。
• mapFunction  可选。对数组的每个项目调用的 map 函数。
• thisValue  可选。执行 mapFunction 时用作 this 的值。

1、mapFunction第二个参数，类似map方法的作用，对数组的每个元素处理后再返回新数组

let map1 = new Map(['1', 'a'],['2', 'b'],['3', 'c']])  
 
let arrForm = Array.from(map1, item => item)

console.log(arrForm )  //[['1','a'], ['2','b'], ['3','c']]

2、thisValue第三个参数，map函数中this指向的对象

该参数是非常有用的，我们可以将被处理的数据和处理对象分离，将各种不同的处理数据的方法封装到不同的的对象中去，处理方法采用相同的名字。

在调用Array.from对数据对象进行转换时，可以将不同的处理对象按实际情况进行注入，以得到不同的结果，适合解耦。

这种做法是模板设计模式的应用，有点类似于依赖注入。

let obj = {
   handle: function (n) {
     return n + 1
   }
}
let arrForm = Array.from([1, 1, 3, 5, 3], function (x) {
   return this.handle(x)
}, obj)

console.log(arrForm, 'arrForm') // [2, 2, 4, 6, 4]