[JavaScript知识库]js数组判断、去重以及扁平化处理

数组判断

判断一个对象是不是数组对象的方法：

• instanceof
• constructor
• Obeject.prototype.toString.call() (推荐)
• Array.isArray() (推荐)

instanceof

通过判断构造函数的prototype属性是否出现在对象的原型链的任何位置

let a = [1, 2, 3];
console.log(a instanceof Array);  // true

constructor

通过判断实例的构造函数属性constructor是否指向构造函数

let a = [1, 2, 3];
console.log(a.constructor === Array);  // true

Obeject.prototype.toString.call()

可以用来检测传入参数的数据类型，除Array外其他的数据类型也行，兼容ES5

let a = [1, 2, 3];
console.log(Object.prototype.toString.call(a) === '[object Array]'); // true

Array.isArray()

直接判断是否是数组类型

let a = [1, 2, 3];
console.log(Array.isArray(a));   // true

但是这个不兼容ES5，所以可以进行兼容性操作

let a = [1, 2, 3];
if(!Array.isArray){
    Array.isArray = function(args) {
        return Object.prototype.toString.call(args) === '[object Array]';
    }
}
console.log(Array.isArray(a));

总结：instanceof和constructor都只能判断由原始构造函数产生的，由于iframe会产生新的全局环境，所以Array会出现问题，推荐使用下面两种。

数组去重

数组去重主要是将数组里面有重复的地方去除：

• 使用Set,利用它的不重复特性，结合Array.from()使用
• 双层循环，利用splice(),将重复元素进行删除
• 一个for循环原数组，用一个空数组保存结果，利用indexOf判断
• 利用sort进行排序后判断，可以直接for循环判断也可以利用递归，从后往前，有重复的话就将其删除
• 利用map或者includes，原理相同，有这个值跳过，没有就进行添加
• 利用filter以及indexOf进行判断，看看当前元素在原始数组的第一个索引是否等于当前索引值

Set + Array.from()

let arr = [3, 5, 1, 9, 5, 8, 1];
let newArr = Array.from(new Set(arr));
// 对于ES6,可以使用展开运算符
// let newArr = [...new Set(arr)];
console.log(newArr);  // [ 3, 5, 1, 9, 8 ]

双层for + splice()

let arr = [3, 5, 1, 9, 5, 8, 1];
for(let i = 0; i < arr.length; i++){
    for(let j = i + 1; j < arr.length; j++){
        if(arr[j] === arr[i]){
            // 删除这个元素
            arr.splice(j, 1);
            j = j - 1;
        }
    }
}
console.log(arr);   // [ 3, 5, 1, 9, 8 ]

for + indexOf()

let arr = [3, 5, 1, 9, 5, 8, 1];
let newArr = [];
for(let i = 0; i < arr.length; i++){
    if(!Array.isArray(arr)){
        console.log('type error!');
        return;
    }
    if(newArr.indexOf(arr[i]) === -1){
        newArr.push(arr[i]);
    }
}
console.log(newArr);  // [ 3, 5, 1, 9, 8 ]

sort() + for循环

let arr = [3, 5, 1, 9, 5, 8, 1];
arr.sort((a, b) => a - b);
for(let i = 1; i < arr.length; i++){
    if(!Array.isArray(arr)){
        console.log('type error!');
        return;
    }
    if(arr[i] === arr[i - 1]){
        arr.splice(i, 1);
        i = i - 1;
    }
}
console.log(arr);  // [ 1, 3, 5, 8, 9 ]

sort() + 递归

let arr = [3, 5, 1, 9, 5, 8, 1];
arr.sort((a, b) => a - b);
if(!Array.isArray(arr)){ 
    console.log('type error!'); 
    return; 
}
const loop = (index) => {
    if(index >= 1){
        if(arr[index] === arr[index - 1]){
            arr.splice(index, 1);
        }
        loop(index - 1);
    }
}
loop(arr.length - 1);
console.log(arr);  // [ 1, 3, 5, 8, 9 ]

map/includes + for循环

let arr = [3, 5, 1, 9, 5, 8, 1];
let map = new Map(), newArr = [];
for(let i = 0; i < arr.length; i++){
    if(map.has(arr[i])){
        map.set(arr[i], true);
    } else {
        map.set(arr[i], false);
        newArr.push(arr[i]);
    }
}
console.log(newArr);  // [ 3, 5, 1, 9, 8 ]

let arr = [3, 5, 1, 9, 5, 8, 1];
let newArr = [];
if(!Array.isArray(arr)){
    console.log("type error!");
    return;
}
for(let i = 0; i < arr.length; i++){
    if(!newArr.includes(arr[i])){
        newArr.push(arr[i]);
    }
}
console.log(newArr);  // [ 3, 5, 1, 9, 8 ]

filter + indexOf

function unique(arr) { 
    return arr.filter((item, index, arr) => {
        //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
        return arr.indexOf(item, 0) === index;
    })
 }
console.log(unique([3, 5, 1, 9, 5, 8, 1]));  // [ 3, 5, 1, 9, 8 ]

数组扁平化操作

将数组里面的数组（数组里面包含数组）打开，最后合并为一个数组

• 递归
• reduce
• flat
• 扩展运算符
• toString()
• apply

递归

var arr = [1,2,[3,4,5,[6,7,8],9],10,[11,12]];
const bph = (arr) => {
    let arr1 = [];
    arr.forEach(x => {
        if(x instanceof Array){
            arr1 = arr1.concat(bph(x));
        } else {
            arr1.push(x);
        }
    })
    return arr1;
}
console.log(bph(arr));  // [1, 2, 3, 4,  5,6,  7, 8, 9, 10,11, 12]

reduce

var arr = [1,2,[3,4,5,[6,7,8],9],10,[11,12]];
const bph = (arr) => {
    return arr.reduce((prev, cur) => {
        return prev.concat(Array.isArray(cur) ? bph(cur) : cur)}, [])
}
console.log(bph(arr));  // [1, 2, 3, 4,  5,6,  7, 8, 9, 10,11, 12]

flat:参数默认为层数

var arr = [1,2,[3,4,5,[6,7,8],9],10,[11,12]];
console.log(arr.flat(1));  // [ 1, 2, 3, 4, 5, [ 6, 7, 8 ], 9, 10, 11, 12 ]
console.log(arr.flat(2));  // [1, 2, 3, 4,  5,6,  7, 8, 9, 10,11, 12]
console.log(arr.flat(Infinity));  //[1, 2, 3, 4,  5,6,  7, 8, 9, 10,11, 12];

扩展运算符

var arr = [1,2,[3,4,5,[6,7,8],9],10,[11,12]];
const bph = (arr) => {
    let arr1 = [];
    let flag = true;
    arr.forEach(x => {
        if(x instanceof Array){
            arr1.push(...x);
            flag = false;
        } else {
            arr1.push(x);
        }
    })
    if(flag) return arr1;
    return bph(arr1);
}
console.log(bph(arr));  // [1, 2, 3, 4,  5,6,  7, 8, 9, 10,11, 12]

toString()

var arr = [1,2,[3,4,5,[6,7,8],9],10,[11,12]];
let arr1 = arr.toString().split(',').map(x => {
    return parseInt(x);
})
console.log(arr1);  // [1, 2, 3, 4,  5,6,  7, 8, 9, 10,11, 12]

apply

var arr = [1,2,[3,4,5,[6,7,8],9],10,[11,12]];
const bph = (arr) => {
    // some方法用于检测数组中的元素是否满足指定条件（函数提供）
    // 如果有一个元素满足条件，则表达式返回 true , 剩余的元素不会再执行检测
    while(arr.some(x => Array.isArray(x))){
        arr = [].concat.apply([], arr);
    }
    return arr;
}
console.log(bph(arr));  // [1, 2, 3, 4,  5,6,  7, 8, 9, 10,11, 12]