javascript的一些知识(一)

js数组的遍历

• forEach 遍历数组
• every 遍历数组，返回值遇到false时遍历停止
• map 修改并返回新数组
• filter 过滤并返回新数组
• find 找到并返回数组元素
• findIndex 找到并返回数组索引
• some 是否存在某个元素
• flatMap 拉平数组
• reduce 求和

const arr =[1,2,3]
arr.forEach(v=>{
  console.log(v)
})  //1 2 3

arr.every(v=>{
  console.log(v)
  return false
})  //1

console.log(arr.map(v=>{
  return 1
})) //[1,1,1]

console.log(arr.filter(v=>{
  return v===1
})) //[1]

console.log(arr.find(v=>{
  return v===1
})) //1

console.log(arr.findIndex(v=>{
  return v===1
})) //0

console.log(arr.some(v=>{
  return v===1
})) //true

const arr1 =[1,2,3,[1],[2,[3]]]
console.log(arr1.flatMap(v=>{
  return v
})) //[1,2,3,1,2,[3]]

console.log(arr.reduce((sum,v)=>{
  return sum+v
})) //6

将字符串当作js进行执行

• eval new Function

const code1 = `new Date()`
const code2 = `return new Date()`
console.log(eval(code1))
const func = new Function(code2)
console.log(func())  
//以上效果一样

动态函数实现字符串模板

<div id="main">
  {{name}}
</div>

new Init({
  el:'#main',
  data:{
    name:'abc'
  }
})

function Init(opt){
  this.data = opt.data
  this.el = document.querySelector(opt.el)
  this.el.innerHTML = this.el.innerHTML.replace(/\{\{(.*?)\}\}/g,(a,b)=>{
    return new Function(
      ...Object.keys(this.data),
      `return ${b}`
    )(...Obj.values(this.data))
  })
}

判断元素是否是数组

1.const arr = new Array()
//非标准，部分浏览器不支持
console.log(arr.__proto__===Array.prototype)  //true
//constructor可以被改变
arr.constructor = Number
console.log(arr.constructor ===Array) //false
//检查Array原型是否存在于arr对象实例的原型链上
console.log(arr instanceof Array)  //true
//es6引入
console.log(Array.isArray(arr))   //true
//兼容性最好
console.log(Object.prototype.toString.call(arr)==='[Object Array]')  //true

js常用数据转换

parseInt:将其他进制字符串转换为10进制
toString:可将数字转换为其他进制  (15).toString(16)  //f
Math.ceil:+1取整
Math.floor:-1取整
Math.round:四舍五入
toLocaleString:本地化   new Date().toLocaleString()  2022/11/20
(10800044).toLocaleString()  //10,800,044

##简易下载excel

<button onclick="downloadExcel()"></button>


const downloadExcel=()=>{
  download([
    {id:'ID',name:'姓名',age:'年龄'},
    {id:1,name:'张二',age:22}
  ])
}
const download=(data,name)=>{
  const a = document.createElement('a')
  const result = data.map(v=>{
    return Object.values(v).join('\t')
  }).join('\n')
  a.href = URL.createObjectURL(new Blob([result]))
  a.setAttribute('download',name)
  a.click()
}

关于cookie

1.expires:过期时间
2.path:设置后在指定path下才能返回到
3.domain:设置后在指定域名下才能访问到
4.多cookie:不同域下可以种相同名的cookie
5.httpOnly:cookie面板能看见，但无法被js读取
6.secure:启用时，cookie只会在https下才能被携带
7.samesite:为none时表示允许在第三方访问例如iframe嵌入
8.cookie仍然能被携带

function getCookie(name){
  const value = document.cookie.split(';')
  .filter(v=>v.indexOf(name)===0)
  .map(v=>v.split('=')[1])
  
  return value.length===1?value[0]:value
  
        
}

确保请求一定发出去

• navigator.sendBeacon

深度拷贝

const copyObject = (data) =>{
  let copyData
  if(Array.isArray(data)){
    copyData = []
    data.forEach(v=>{
      copyData.push(copyObject(v))
    })
  }else if(typeOf data === 'object' ){
    copyData = {}
    for(let n  in data){
      copyData[n] = copyObject(data(n))
    }
  }else{
    return data
  }
  return copyData
}

json parse stringify

stringify(json,(key,value)=>{
  switch(key){
    case:    ,
    return []
  }
})


//与parse类似用法

树状结构转扁平化数组

const data = [
  {
    id:1,
    name:a,
    children:[
      {
        id:11,
        name:aa,
        children:[
          {
            id:111,
            name:aaa
          }
        ]
      }
    ]
  }
]

const result = data.reduce(function(prev,curr){
  prev.push({
    id:curr.id,
    name:curr.name,
    parentId:curr.parentId
  })
  curr.children && curr.children.forEach(v=>{
    v.parentId = curr.id
    arguments.callee(prev,v)
  })
  return prev
},[])

console.log(result)



//搜索某一项
const result = data.reduce(function(prev,curr){
  prev.push({
    id:curr.id,
    name:curr.name,
    parentId:curr.parentId,
    ref:curr
  })
  curr.children && curr.children.forEach(v=>{
    v.parentId = curr.id
    arguments.callee(prev,v)
  })
  return prev
},[])

const findIndex = result.find(v=>v.id ===22)
if(findItem){
  console.log(findIndex.ref)
}

扁平化数组转化成树状结构

const data = [
  {id:1,name:a},
  {id:12,name:aa,parentId:1}
]

const result = data.reduce(function(prev,curr,i arr){
  curr.children = arr.filter(v=>v.parentId === curr.id)
  if(!curr.parentId){
    prev.push(curr)
  }
  return prev
},[])
console.log(result)

reduce函数

• prev = 上一次return的结果，可以赋初始值

正则表达式

\d =>[0-9]
\s =>空白符包括换行
\S =>非空白符
\n =>换行
\w =>等价[A-Za-z0-9_]
\W =>[^A-Za-z0-9_]
. =>匹配换行符 (\n ,\r)之外的任何字符，相当于[^\n\r]
* =>匹配长度，等价于{0, }
+ =>长度大于1，等价{1, }
? => 长度0-1位，等价{0,1}
[] =>组合 [0-9a-z.$] 相当于0-9或者a-z或者.或者$
{} => 长度限制{0,5}表示0-5，{5}表示长度5,{1,}表示长度大于1
^ =>以什么开头，如果出现在[]里，表示非
$ =>以什么结尾
[\u4e00-\u9fa5] 匹配中文
() =>分组
.*? =>非贪婪匹配，找到一个就停止，例如/\d.*?/  匹配到第一个数字就停止

js实现简单的发布订阅

const Event = {
  _listen:[],
  emit(name,data){
    this._listen.forEach(v=>{
      v.name === name && v.callback(data)
    })
  },
  on(name,callback){
    this._listen.push({name,callback})
  },
  off(name,fn){
    this._listen = this._listen.filter((v,i)=>{
      return !(v.name === name && (fn===v.callback || !fn))
    })
  }
}
const fn =(data)=>{
  console.log(data)
}
Event.on('run',fn)
Event.on('run',()=>{
  console.log(22)
})
Event.off('run',fn)
Event.emit('run',{a:1})

js查漏补缺

1. var存在变量提升，项目中不要使用var,用let或者const
2. == 在比较时会进行类型转换
3. === 会对值进行比较，项目中建议一律使用===
4.  undefined == null true
5. true+ false  //1
6. true+1  //2
7.  []+1 //1

8. typeof instanceof
- typeof用来监测基础数据类型，Array,Map,RegExp都不属于基础数据类型。通过Object.prototype.toString.call()检测
- instanceof用于检测Array是否在Arr的实例对象原型链上 
console.log(arr instance Array)
9. every方法
只要有一个不通过就返回false
10. reduce方法
- 参数prev,curr,index,arr
- prev上一个的值
-  curr当前值
-  index当前索引
- arr原数组

js事件循环

• js是单线程的，但是需要一种机制来处理多个块的执行，且执行每个块时调用js引擎，这种机制称为事件循环。
• 事件循环分3部分：主线程，执行栈，任务队列，异步代码都会被丢进宏/微队列中。
• 宏任务：script,setTimeout,setInterval,setImmeditate,I/O,UI,rendering.
• 微任务：process,nextTick,promise.then(),object.observe,MutationObserver
• 主线程只有一个，且执行顺序为：
  1.主线程首先执行完同步任务，然后去任务队列中执行宏任务。
  2.如果在执行过程中发现有微任务，这时候先执行微任务，再执行宏任务。
  3.全部执行完毕后，等待主线程调用。
  4.调用完成之后，再去任务队列中查看是否还有异步任务等待调用，如此反复，依次执行。

promise

const p1 = new Promise((resolve,reject)=>{
    if(true){
		resolve(1)
    }else{
		reject(-1)
	}
})
p1.then(v=>{
	console(v)
}).catch(err=>{
	console.log(err)
})

//例子1
const wait = (time) =>{
	return new Promise((resolve,reject)=>{
		setTimeout(()=>{
			resolve(time)
		},time)
	})
}
wait(1000).then(res=>{console.log(1)})
//例子2
在fetch,axios中返回的是一个promise
//例子3
promise.all([p1,p2,...])

//async和await
- 加了async关键字后，return返回值都是promise对象
const test1 = async ()=>{
	return 1
}
等同于
const test1 = ()=>{
	return Promise.resolve(1)
}

//执行时加await关键字。
//且await可以让代码块顺序执行。

创建自己的npm仓库

－ npm i -g verdaccio

postMessage解决iframe跨域通信的问题