前端_003_js扫盲

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();