前端_003_js扫盲

var,let,const

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

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

严格模式

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

数据类型

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

运算符

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

事件

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

参考手册参照如下：

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