收集面经手撕题：数组去重根据key去重扁平化去重等对象数组根据key去重、简单数组合并去重、对象数组合并去重、数组扁

一、对象数组根据key去重

let arr = [
    { key: 1, value: 'Jack' },
    { key: 2, value: 'Anna' },
    { key: 3, value: 'Mike' },
    { key: 3, value: 'Sara' },
    { key: 4, value: 'Timi' },
];

1.forEach遍历

创建一个空对象，利用对象属性不能重复的特点，判断是否存在某元素的key，不存在则添加到结果数组result中。

 function unique(arr) {
    let obj = {};
    let result = [];
    arr.forEach((item) => {
      if (!obj[item.key]) {
        obj[item.key] = item.value;
        result.push(item);
      }
    });
    return result;
  }

2.使用filter方法

同方法1类似，如果obj[item.key]存在（即已经出现过），则返回0（相当于false），该元素将被过滤掉；如果obj[item.key]不存在（即第一次出现），则将该元素的key添加到obj对象中并返回1（相当于true），该元素将被保留在结果数组中。

function unique(arr) {
    let obj = {};
    return arr.filter((item) => (obj[item.key] ? 0 : (obj[item.key] = 1)));
  }

3.使用Set数据结构+filter方法

如果nst集合中不包含该元素的key（通过!nst.has(item.key)判断），则将该元素的key添加到nst集合中（通过nst.add(item.key)）

function unique(arr) {
    let nst = new Set();
    return arr.filter((item) => !nst.has(item.key) && nst.add(item.key));
  }

二、简单数组合并去重

let arr1 = [1, 2, 3, 4, 5, 6, 2, 3];
let arr2 = [1, 2, 3, 4, 5, 6, 5, 6];

1.使用Set数据结构

let res = Array.from(new Set([...arr1, ...arr2]));
console.log(res);//[1, 2, 3, 4, 5, 6]

2.使用filter+indexOf方法

判断当前索引是否等于元素第一次出现时的索引（即arr.indexOf(item)）

let arr3=arr1.concat(arr2);
function unique(arr){
    return arr.filter((item,index)=>arr.indexOf(item)===index)
}
console.log(unique(arr3));//[1, 2, 3, 4, 5, 6]

三、对象数组合并去重

let arr1 = [{id: 1, name: '小明'}, {id: 2, name: '小红'}, {id: 4, name: '小刘'}]
let arr2 = [{id: 1, name: '小明'}, {id: 2, name: '小红'}, {id: 3, name: '小王'}]

和第一题的对象数组根据key去重一样，就是多了个合并而已let arr3 = [...arr1, ...arr2]，去重参考第一题即可

四、数组扁平化并去重再升序

let arr = [[1, 2, 3], [3, 4, 4, 5], [6, 7, 8, 9, [11, 12, [12, 15]]], 10];

使用Array.flat(Infinity)将arr数组展平为一维数组。
创建一个新的Set对象nst，并将展平后的一维数组作为参数传入，Set对象会自动去重，保留唯一值。
将Set对象转换为数组[...nst]，然后通过sort()方法对数组进行排序。

let nst = new Set(arr.flat(Infinity));
let res = [...nst].sort((a, b) => a - b);
console.log(res);//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 15]

五、原生实现数组合并去重排序

快手和百度的面经都有，要求不能用数组的api，不能用Set等

  let arr1 = [2, 1, 5, 3, 4, 8, 7, 9, 10, 6, 3];
  let arr2 = [5, 4, 6, 2, 5, 1, 5, 6, 10, 9];

  //合并数组
  let mergeArr = [];//如果可以改变原数组则不用新建一个数组
  for (let i = 0; i < arr1.length; i++) {
    mergeArr[mergeArr.length] = arr1[i];
  }
  for (let i = 0; i < arr2.length; i++) {
    mergeArr[mergeArr.length] = arr2[i];
  }

  //去重方法一：
  let uniqueArr = [];
  for (let i = 0; i < mergeArr.length; i++) {
    let isDuplicate = false;
    for (let j = 0; j < uniqueArr.length; j++) {
      if (mergeArr[i] === uniqueArr[j]) {
        isDuplicate = true;
        break;
      }
    }
    if (!isDuplicate) {
      uniqueArr[uniqueArr.length] = mergeArr[i];
    }
  }
  
  //去重方法二：
  let uniqueArr = [];
  let obj={}
  for(let i=0;i<mergeArr.length;i++){
    if(!obj[mergeArr[i]]){
        obj[mergeArr[i]]=1
        uniqueArr[uniqueArr.length]=mergeArr[i];
    }
  }

  //冒泡排序
  for (let i = 0; i < uniqueArr.length - 1; i++) {
    for (let j = 0; j < uniqueArr.length - 1 - i; j++) {
      if (uniqueArr[j] > uniqueArr[j + 1]) {
        let temp = uniqueArr[j];
        uniqueArr[j] = uniqueArr[j + 1];
        uniqueArr[j + 1] = temp;
      }
    }
  }
  console.log(uniqueArr);//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

六、找出任意页面当中不重复的所有html标签

//1.获取所有的html标签(类数组)
document.querySelectorAll('*')
//2.类数组转数组
[...document.querySelectorAll('*')]
//3.通过map获取到tagName
[...document.querySelectorAll('*')].map(v=>v.tagName)
//4.通过Set去重(成了类数组)
new Set([...document.querySelectorAll('*')].map(v=>v.tagName))
//5.转为数组
[...new Set([...document.querySelectorAll('*')].map(v=>v.tagName))]

写在最后

初次发文，较为简陋，如有错误，欢迎在评论区指正
后续有类似题目会补充更新
实习准备投递复习中，希望通过写文章来提升自己！

收集面经手撕题：数组去重 根据key去重 扁平化去重等