美文网首页
50个js方法

50个js方法

作者: skoll | 来源:发表于2022-06-20 00:28 被阅读0次

1 .将一个多维数组降维

1 .已有的方法

const arr=[1,[2,3],[[4,5],6]]
        console.log(arr.flat(1))

2 .实现的关键以及细节

1 .原来数组有空位怎么处理,flat方法是直接删除
2 .遍历数组,判断当前元素是否为数据,不是数组直接保存,是数组,展开后保存

遍历数组的方式

1 .(for 循环,for..of)for..in是为了循环遍历对象属性而构建的.不建议和数组一起用
2 .数组自己的方法,forEach,reduce,map
3 .数组的迭代器方法 keys,values,entries。这种仅仅是获得了遍历器对象,还需要搭配for..of来进行遍历

如何判断元素是否为数组

1 .isArray方法
2 .arr instanceof Array
3 .Object.prototype.toString.call(arr)

数组空位处理

1 .forEach,reduce,map遇到空位会直接忽略
2 .for...of不会,会当做undefined处理,所以用这个额方法的时候要做容错。
3 .这种ts能操作么?如果是动态传进来的数据,ts应该不行吧
4 .基于ts的动态接口数据配置的详解

1 .根据要的数据生成mock数据格式,给后端和前端一起参考
2 .https://zhuanlan.zhihu.com/p/72412792 这里这个文章的思路

2 数据类型判断

1 .slice是负数的用法

function type(obj){
     return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase()
 //NaN是个number类型
}

3 数组去重

function unique(arr){
            const res=arr.filter((item,index,array)=>{
                return array.indexOf(item)===index
            })
            return res
        }

        function unique2(arr){
            return [...new Set(arr)]
        }

1 .缺点,复杂类型不能去掉

1 .[1, 2, 3, null, undefined]
2 .null和undefined是可以去掉的,但是NaN直接消失了
3 .因为Set的去重参照的是(===),数组中的元素对象,虽然可能数值相等,但是地址不相等。所以Set无法实现去重
4 .如果是简单类型的话,可以用这个,如果是复杂类型的话,需要传递函数进去,接口函数。要把引用类型转换为字符串做去重。也就是今天学了半天的valueOf,toString那一套

2 .那实现unique的方式要是map那种形式

let arr = [{ 'name': 11 }, 1, 2, { 'name': 11 }, 41, 41, 41, 12]
    
        function unique(arr){
            let len=arr.length
            let i=0
            let m=new Map()
            while (i<len){
                let itemType=typeof arr[i]
                if(itemType==='object'){
                    //let mapKey=arr[i].toString()
                    //let mapKey=String(arr[i])
                    let mapKey=JSON.stringify(arr[i])
                    m.set(mapKey,arr[i])
                }else{
                    m.set(i,arr[i])
                }
                i++
            }
            return [...m.values()]
        }
//注意这里对象的key是json.stringify,不然生成的都是object,根本分不出来哪个是哪个。。

3 .NaN类型如何去重>判断一个数是不是NaN,不是object类型,a!=a,自己都不等于自己的一定是NaN,除了引用类型 typeOf==number,并且自己不等于自己

Object.is(NaN,NaN)
true
//为啥。

4 深度克隆

1 .需要考虑的问题

1 .各种内置对象比如Date,RegExp,函数
2 .循环引用:每次对之前的赋值进行一次保存,下次出现就不在操作了

2 .循环引用

var obj = {
    a: 1,
    b: 2,
    c: [1,2,3],
    d: {aa: 1, bb: 2},
}
obj.e = obj

3 .JSON.stringify()实现拷贝的弊端

1 .undefined,函数,symbol值,在序列化中都会被忽略,或者转换成null(在数组中)
2 .函数,undefined被单独转换时,会返回undefined
3 .对包含循环引用的对象,会抛出异常

4 .最后代码,支持对象循环引用,其他复杂类型

var obj = {
            a: 1,
            b: 2,
            c: [1,2,3],
            d: {aa: 1, bb: 2},
            //e: obj
            // 这样写到里面还不行,此时的e是undefined,还没有定义
        }
        obj.e=obj

        function deepClone(obj){
            const m=new WeakMap()
            const copy=function(obj){
                if (typeof obj!='object')return
                if(m.has(obj))return m.get(obj)
//第二次进来的时候直接拿值,就不走下面的逻辑了

                let constructor=target.constructor
                if(/^(RegExp|Date)$/i.test(constructor.name)){
                    return new constructor(target)
                }

                const newObj=Array.isArray(obj)?[]:{}
                m.set(obj,newObj)
//以obj为key,存已经克隆后的新的newObj,这里只是一个空的值,但是后面会继续操作newObj把他的属性set上去
                for(let key of Object.keys(obj)){
                    if(typeof obj[key]==='object'){
                          newObj[key]=copy(obj[key]) 
                    }else{
                        newObj[key]=obj[key]
                    }
                }
                return newObj
            }
            return copy(obj)   
        }
        const b=deepClone(obj)
        obj.c.push(5)
        obj.c.push(6)

5 .也就是说weakMap的key可以是object,并且他会比较两个key的值是不一样的.

字符串模板

1 .以后写组件库的时候用的上

相关文章

网友评论

      本文标题:50个js方法

      本文链接:https://www.haomeiwen.com/subject/igudvrtx.html