文章目录
- var,let,const
- 严格模式
- 数据类型
- 运算符
- 事件
- 常用对象
- 函数绑定
- call() ,apply(),bind()
- 闭包
- 浏览器中事件循环
- 回调和异步
- Promise
- async和await
- DOM
- BOM
- Ajax
var,let,const
let是var的升级版本，对于块作用域，var无法进行限制，let不会存在该问题
另外对于var的声明会进行提升，初始化不会进行提升
严格模式
在脚本或者函数开头添加"use strict"
数据类型
| 类型 | 描述 |
|---|---|
| number | js里12==12.0 因为只有一种数字类型 |
| string | |
| boolean | |
| undefined | 没有值的变量 |
| object | |
| function | |
注意：NaN和任何值都不相等
运算符
和= 前者会自动转类型，后者会严格比较类型
| 算符 | 描述 |
|---|---|
| typeof | 返回变量的类型。 |
| instanceof | 返回 true，如果对象是对象类型的实例。 |
事件
严格意义上指的是html的DOM事件，可以绑定js函数
| onchange | HTML 元素已被改变 |
|---|---|
| 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();
