前端常考手写系列--类型判断、数组扁平化

「这是我参与2022首次更文挑战的第18天，活动详情查看：2022首次更文挑战」

前言

现在的面试过程中已经不仅仅问你某个api如何如何用了，都要让手写出来，这还是很考验我们对代码的了解程度的，借这个机会来整理一些常用的手写函数，以便不时之需。

数据类型判断

数据类型判断可以使用typeof()，但typeof()在判断null、date等内容时会出现错误。网上有很多判断数据类型的方法，通过constructor、instanceof等等，但都或多或少存在一些不足，下面分享一个万能的写法

    function typeJudgment(param){
        return Object.prototype.toString.call(param).slice(8,-1).toLowerCase()
    }

在chrome控制台运行如下

数组去重

通过filter来对数组进行去重，原理就是判断当前项的下标和第一个相同值的下边是否相同，相同则返回

    function duplicateRemoval(arr){
        let newArr = arr.filter((item,index,array)=>{
            return arr.indexOf(item)===index
        })
        return newArr
    }

运行结果如下

在日常的工作中我们已可以直接使用Set的特性来进行数组去重，如下

    function duplicateRemoval(arr){
        let newArr = new Set(arr)
        let res = [...newArr]
        return res
    }

数组扁平化

数组扁平化就是把数组中的所有项都变成基本数据类型，也就是单个项不再是一个数组，可以直接使用数组原型链上的flat()方法，这样就可以实现多维数组转为一维数组，flat()中的参数是一个数字，表示目标数组目前是有几层

    console.log([1,[2,[3,[4,[5]]]]].flat(4))//[1,2,3,4,5]

实现flat()

    function myselfFlat(arr){
        let res = []
        for(let i=0;i<arr.length;i++){
            if(Array.isArray(arr[i])){//通过Array.isArray来判断当前项是否是数组，如果是数组就递归调用，如果不是就直接push进res数组
                res = res.concat(myselfFlat(arr[i]))
            }else{
                res.push(arr[i])
            }
        }
        return res
    }

测试用例如下

上面的方式是使用递归的方法实现的，使用es6中的展开运算符会更加的简单

    function myselfFlat(arr){
        while(arr.some(item => Array.isArray(item))){//这里用Array中的some()方法来判断arr中的项或子项是否是数组
            arr = [].concat(...arr)//利用concat的特性，多个参数时会自动去掉数组的'[]'
        }
        return arr
    }

测试用例如下

总结

数据类型的判断还是挺有用的，在项目的开发中总是要显示后端返回的数据，但这是数据有不确定性，如果我们不做判断可能造成页面报错，所以以后就用Object.prototype.toString.call().slice(8,-1).toLowerCase()就可以了，数组扁平化一般面试的时候会用到，也作为一个记忆点记住就可以了。