前端笔记(一)

112 阅读3分钟

一.EventLoop(事件循环)

1> 为什么会出现它呢 由于js是一门单线程语言,同一时间只能做一件事,如果遇到耗时的异步任务 如:ajax请求 settimeout(延时器)setinterval(定时器)promise….. 可能会造成程序假死

2>完了防止程序假死 提高代码运行效率 js把任务分为了同步和异步任务

 2>1. 同步任务又叫非耗时任务,指的是在主线程上排队执行的任务,只有前一个执行完毕后一个才会开始执行

 2>2.异步任务又叫耗时任务,异步任务由js委托给宿主环境执行完 然后把回调放任务队列中 等主线程的同步任务执行完,主线程会依次执行任务队列中的异步任务的回调 主线程会不断循环这一过程(事件循环)

宿主环境指的是js的执行环境 一般为浏览器和node

 3>宏任务和微任务

 3>1. js把异步任务又细分为 宏任务和微任务

常见的宏任务有ajax 定时器 延时器 文件操作… 常见的微任务有 promise.then、.carch和.finally promise的执行器函数是同步调用

 3>2.宏任务和微任务的执行是交替执行的

每一个宏任务执行完毕之后,都会检查是否存在微任务如果有则执行完所有的微任务,在执行宏任务 “先同后异 ,有微则微 ,无微则宏”

例1

import fs from ‘fs‘

console.log(‘a’)

fs.readFIle(‘./xxx/xxx.txt’,’utf8’,(err,data)=>{

//这里判定文件读取成功 if(err)return

console.log(‘b’)

}) setTimeout(()=>{

console.log(‘c’)

},0) console.log(‘d’)

输出什么呢? adcb

例2

setTimeout(()=>console.log(4))

new Promise((resolve,reject)=>{

resolve()

console.log(1)

}).then(()=>{

console.log(3)

})

console.log(2)

输出什么呢? 1234

二.for in和for or的区别

数组
     for in遍历得到的是数组元素的索引
     for or遍历得到的是数组元素本身

对象
    for in 遍历得到对象属性名 通过属性名得到属性值 对象(属性名)
    for or 不能遍历对象 

数组对象
    一般结合for orfor in遍历

for in返回的是索引 用来遍历对象多

for or返回的是该值 遍历数组 多

三.es6模块化

 最大的特点:通用于浏览器端于服务端的模块化

它的出现是为了取代AMD CMD Commonjs

 定义:每个模块干一件事 各个模块直接间接联系         极大的降低了程序的耦合度

          每个js文件都是一个单独的模块 

          导入用import关键字

          导出用export

为什么会出现模块化

早些年开发 功能代码全放在一个js文件中,代码过于庞大,牵一发而动全身,可读性低 ,不利于后期维护,耦合度高 背离软件开发原则

三.一

三种导入导出模式

1.默认

默认导入:imort 自定义名(符合命名规范) from ‘url’

注意点:一个模块只有一个export default

默认导出:export default { 变量名, 方法名 不用带括号 }

2按需

按需导出:

export 要导出的成员

可多次按需导出,导入的成员必须于导出的成员名称一致 可以用as关键字重命名 可以结合默认导出一起使用

按需导入:

inport{导出成员名}from ‘url’

直接导入 import ‘url’ 会执行一次里面的代码

今天的总结就到这里 我是小白,可能有些地方理解的还不够,希望各位大神多加指点 谢谢🙏