当前位置: 首页 > news >正文

前端_003_js扫盲

文章目录

  • var,let,const
  • 严格模式
  • 数据类型
  • 运算符
  • 事件
  • 常用对象
  • 函数绑定
    • call() ,apply(),bind()
  • 闭包
  • 浏览器中事件循环
  • 回调和异步
    • Promise
    • async和await
  • DOM
  • BOM
  • Ajax

var,let,const

let是var的升级版本,对于块作用域,var无法进行限制,let不会存在该问题

另外对于var的声明会进行提升,初始化不会进行提升

严格模式

在脚本或者函数开头添加"use strict"

数据类型

类型描述
numberjs里12==12.0 因为只有一种数字类型
string
boolean
undefined没有值的变量
object
function

注意:NaN和任何值都不相等

运算符

= 前者会自动转类型,后者会严格比较类型

算符描述
typeof返回变量的类型。
instanceof返回 true,如果对象是对象类型的实例。

事件

严格意义上指的是html的DOM事件,可以绑定js函数

onchangeHTML 元素已被改变
onclick用户点击了 HTML 元素
onmouseover用户把鼠标移动到 HTML 元素上
onmouseout用户把鼠标移开 HTML 元素
onkeydown用户按下键盘按键
onload浏览器已经完成页面加载

参考手册参照如下:

https://www.w3school.com.cn/jsref/dom_obj_event.asp

常用对象

数组
let array = [1,'2'];日期
let date = new Date();JSON对象
var obj = JSON.parse(text);  // JSON字符串转对象
var jsonText = JSON.stringify(book); //对象转JSON字符串Set对象
const letters = new Set(["a","b","c"]);
、
Map对象
const maps= new Map([[1],[2]])

函数绑定

call() ,apply(),bind()

call() 方法分别接受参数。

apply() 方法接受数组形式的参数。

call和apply是每个函数的方法,可以修改主体对象引用

函数回调时this会丢失,此时用bind函数

闭包

js中只有全局作用域和函数作用域

如果想实现一个私有的变量,则需要用到闭包(有权访问父作用域的函数)

var add = (function () {var counter = 0;return function () {return counter += 1;}
})();add();
add();
add();// 计数器目前是 3 

浏览器中事件循环

1.浏览器中JS是单线程的,会将同步代码按顺序放在执行栈,依次执行,遇到异步任务时交给其他线程处理,

待当前执行栈所有同步代码执行完后,从任务队列(存放已完成的异步任务)循环检测并取出回调加入执行栈继续执行,有异步任务再交给其他线程,循环往复

2.宏任务和微任务队列是2个不同的队列

事件循环的过程中,执行栈在同步代码执行完成后,优先检查微任务队列是否有任务需要执行,如果没有,再去宏任务队列检查是否有任务执行,如此往复。微任务一般在当前循环就会优先执行,而宏任务会等到下一次循环,因此,微任务一般比宏任务先执行,并且微任务队列只有一个,宏任务队列可能有多个。另外我们常见的点击和键盘等事件也属于宏任务。

常见宏任务 setTimeout(),setInterval(0)

常见微任务 promise.then() promise.catch()

当然这个事件循环机制在浏览器和nodejs里不太一样,具体问题具体分析

回调和异步

1.回调就是函数入参里有函数

2.异步函数

setTimeout() 等待超时

setInterval() 等待间隔

一般异步都是用Promise对象

Promise

new Promise() 执行同步方法

new Promise((resolve,reject)=>{resolve()reject()
}).then(a=>{}).catch(e=>{consoloe.log(e)
})

then() ,catch() 执行异步方法

一般使用都是框架封装的,底层都是用的Promise对象

async和await

async修饰异步函数,修饰返回Promise.resolve(返回值) 得到一个promise对象

await只能用在async函数里,修饰一个Promise对象,如果不是promise对象,会自动修饰Promise.resolve()

await可以理解为then的语法糖,也是一个微任务,但会暂时阻塞后面的代码(这里的阻塞个人理解是后面的代码还是会放到执行栈中,在await修饰的微任务执行完后会立刻执行),否则下面的代码执行顺序无法解释…


async function async1() {console.log('async1 start')let a=await async2()console.log(a)console.log('async1 end')
}async function async2() {console.log('async2')return "async2 finish"
}console.log('script start')
setTimeout(function() {console.log('setTimeout')
}, 0)async1(); new Promise( function( resolve ) {console.log('promise1')resolve();
} ).then( function() {console.log('promise2')
} )console.log('script end')script start
async1 start
async2
promise1
script end
//上面为同步任务
async2 finish //微任务1
async1 end  //同步任务
promise2 //微任务2
setTimeout //宏任务

DOM

就是html => js对象, document对象,后续基本都用的框架封装,原生的基本用不到

BOM

浏览器提供的对象

window对象

screen对象

location对象

navigator对象

history对象

弹出框方法 alert(),confirm(),prompt()

计时器方法(也是window对象提供的方法)

setTimeout(function, milliseconds)

在等待指定的毫秒数后执行函数。

setInterval(function, milliseconds)

cookie是document对象的属性,操纵cookie

Ajax

浏览器提供的http线程,使用XMLHttpRequest 对象会遇到跨域问题,url请求和当前网页必须同域。

经验上我感觉大多是用框架封装后的Ajax进行http请求

// 创建 XMLHttpRequest 对象
const xhttp = new XMLHttpRequest();// 定义回调函数
xhttp.onload = function() {// 您可以在这里使用数据
}// 发送请求
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

http://www.mrgr.cn/news/48265.html

相关文章:

  • OpenCV putText增加中文支持
  • Hash 映射
  • 解决新安装CentOS 7系统mirrorlist.centos.org can‘t resolve问题
  • 抓包 127.0.0.1 (loopback) 使用 tcpdump+wireshark
  • 【java面向对象编程】第六弹----封装、继承、多态
  • Type-C接口电热毯方案
  • 同步和异步的区别
  • 最大二进制奇数 。
  • 定位、地图建立及管理合集
  • 初级学习:Python实现AI并搭建
  • 低代码工单管理app评测,功能与效率解析
  • python各版本新特性简单梳理
  • 如何使用bpmn-js实现可视化流程管理
  • react理念(二)
  • (29)数字信号处理中正弦波的表示
  • 【Python】学习笔记
  • 筛选因数快速法+map
  • 华罗庚名著《数论导引》
  • 如何启动hive
  • 初学Java基础Day17---面相对象之访问修饰符,初识Object,final关键字
  • 深入理解 Java HashMap 的 get() 方法及其相关实现
  • 事件轮询机制
  • Java数组的使用方法
  • 基于SpringBoot+Vue的超市管理系统设计实现(协同过滤算法、图形化分析)
  • 物理学基础精解【67】
  • 【jvm】垃圾回收是否会涉及到虚拟机栈?