数组去重+多维数组扁平化

前言： 数组去重与多维数组扁平化是常见的前端处理数据的方式，低代码实现数据交互与数据展示是良好前端所必备；

一、数据去重：
①Es5的双重for嵌套

function unique(arr) {
   for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
            if (arr[i] == arr[j]) { //第一个等同于第二个，splice方法删除第二个
   	            arr.splice(j, 1);
                j--;
             }
         }
    }
   	return arr;
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))
//结果
[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {}, {}]

缺点	①NaN 和 {} 没有去重

②Es6的Set去重

function unique(arr) {
    return Array.from(new Set(arr))
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))
//结果
[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

缺点	①无法去除 {}空对象

③for循环+indexOf

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array.indexOf(arr[i]) === -1) {
            array.push(arr[i])
        }
    }
    return array;
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))
//结果
[1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {}, {}]

缺点	①NaN、{} 没有去重

④sort()去重

//排序后的结果，遍历对比
function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    arr = arr.sort()
    var arrray = [arr[0]];
    for (var i = 0; i < arr.length; i++) {
       if (arr[i] !== arr[i - 1]) {
            arrray.push(arr[i]);
        }    
    }
    return arrray
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))
//结果
[0, 0, 1, 15, NaN, NaN, "NaN", {}, {}, "a", false, null, "true", true, undefined]

结果	①NaN、{} 没有去重

⑤for循环+includes()

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {
	    if (!array.includes(arr[i])) { 
            array.push(arr[i]);
        }  
    }
    return arrray
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))
//结果
[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

结果	① {} 没有去重

⑥filter

function unique(arr) {
    return arr.filter(function (item, index, arr) {
        return arr.indexOf(item, 0) === index;
    });
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))
//结果
[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {}, {}]

缺点	① {} 没有去重 ② NaN两个都没有了

⑦递归去重

function unique(arr) {
    var array = arr;
    var len = array.length;
    array.sort(function (a, b) { //排序后更加方便去重
        return a - b;
    })
    function loop(index) {
        if (index >= 1) {
            if (array[index] === array[index - 1]) {
                array.splice(index, 1);
            }
            loop(index - 1); //递归loop，然后数组去重
        }
    }
    loop(len - 1);
    return array;
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))
//结果
 [1, "true", false, null, 0, true, 15, NaN, NaN, "NaN", "a", {}, {}, undefined]

缺点	①NaN和 {} 没有去重

⑧Map去重

function arrayNonRepeatfy(arr) {
    let map = new Map();
    let array = new Array(); // 数组用于返回结果
    for (let i = 0; i < arr.length; i++) {
        if (map.has(arr[i])) { // 如果有该key值
            map.set(arr[i], true);
        } else {
            map.set(arr[i], false); // 如果没有该key值
            array.push(arr[i]);
        }
    }
    return array;
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(arrayNonRepeatfy(arr))
//结果
[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

解析： 创建一个空Map数据结构，遍历需要去重的数组，把数组的每一个元素作为key存到Map中。由于Map中不会出现相同的key值，所以最终得到的就是去重后的结果。

缺点	① {} 空对象无法去重

⑨reduce+includes去重

function unique(arr) {
    return arr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []);
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15,false,false, undefined, undefined, null, null, NaN, NaN,'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr));
//结果
[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

缺点	① {} 无法去重

⑩hasOwnProperty

function unique(arr) {
    var obj = {};
    return arr.filter(function(item, index, arr){
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15,false,false, undefined, undefined, null, null, NaN, NaN,'NaN', 0, 0, 'a', 'a', {}, {}];
var arr2 = [123,'123',{},{},null,undefined,'abc',abc]
console.log(unique(arr));  // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]
console.log(unique(arr2)); // [123, "123", {}, null, undefined, "abc"]

去重的最好方式！！！

二、多维数组扁平化处理
①递归函数
（1)

let arr =  [1,2,3,[2,3,[4,5,6]],4,100]
let getNewArr = (arr)=>{
    let newArr = []
    for(let i=0;i<arr.length;i++){
        if(Array.isArray(arr[i])){
            newArr = newArr.concat(getNewArr(arr[i]))
        }else{
            newArr.push(arr[i])
        }
    }
    return newArr
}
console.log(getNewArr(arr)) // [1, 2, 3, 2, 3, 4, 5, 6, 4, 100]

(2)

let arr =  [1,2,3,[2,3,[4,5,6]],4,100]
let getNewArr = (arr)=>{
    let newArr = []
    for(let i=0;i<arr.length;i++){
        if(Array.isArray(arr[i])){
            newArr = newArr.concat(getNewArr(arr[i]))
        }else{
            newArr.push(arr[i])
        }
    }
    return newArr
}
console.log(getNewArr(arr)) // // [1, 2, 3, 2, 3, 4, 5, 6, 4, 100]

②es6的flat()

let arr =  [1,2,3,[2,3,[4,5,6]],4,100]
arr.flat()   //默认是一层数组
arr.flat(2)  //这就是可以扁平化2层了
arr.flat(Infinity)   //这就是所有层