50个js方法
2022-06-20 本文已影响0人
skoll
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 .以后写组件库的时候用的上