集合类型
对象 数组(前两种ES5) Map Set(后两种ES6)
相同点与不同点
相同点:都是以键值对表现
不同点:1、对象键值对无序2、数组是有序 索引保存数组的有序3、对象的KEY只能是Sting 数组的KEY只能是number
4、任意类型5、Set的KEY等于value KEY=value。
对象迭代用 for in 对象不能用for of迭代 若想通过for of 迭代要用迭代器。
数组迭代用 for of
同步与异步
GET与POST区别
GET更简单更快,并且在大部分情况下都能用
以下情况必须用POST
1、无法使用缓存文件(更新服务器上的文件或数据库)
2、向服务器发送大量数据(POST没有数据量限制)
3、发送包含未知字符的用户输入时,POST比GET更加稳定也可靠
同步与异步区别:
同步:提交请求->等待服务器处理->处理完毕后返回 这个期间客户端浏览器不能干任何事情。
异步:请求通过事件触发->服务器处理(这时候浏览器依然可以做其它事情)->处理完毕。
Ajax用法
ajax 翻译成中文叫做“异步无刷新”技术。
ajax请求过程
1、创建XMLHttpRequest 对象
let xhr; // 这个变量拿来装 xhr 对象
if(window.XMLHttpRequest){
// firefox,chrome,opera,safari 等这些浏览器
xhr = new XMLHttpRequest();
} else {
// 说明是 IE6,IE5 及其以下版本
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
2、打开请求 open
发送请求到服务器
首先需要调用 xhr 的 open 方法,建立客户端与服务器之间的连接:
创建HTTP请求 语法 open(method,url,async) 功能:创建HTTP请求 规定请求类型 URL及是否异步处理请求 url是方法中必须要指定的参数
参数说明 method 请求 GET或POST(默认get) url:文件在服务器上的位置 async:true(异步)false(同步
xhr.open(method,url,async)
method请求类型:
2-1、GET 在创建连接时需要将参数放在URL?后。
xhr.open("GET","/users/isUser?name=xiejie&age=18",true);
xhr.send(null);
注:在路由端 GET请求参数const {name,age}=req.query
2-2、POST
POST在创建连接时不需要将参数放在URL后 参数可放在请求体中
xhr.open("POST","/users/isUser",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencodeed;charset=UTF-8");
xhr.send("name=xiejie&age=18");
另一种方式JSON
xhr.setRequestHeader("Content-type", "application/json");
xhr.send(JSON.stringify({name,age}));
3、发送send()
当我们发送了请求之后,从请求发送到响应回来,其实有一系列的状态值
请求未初始化(0):还没有调用 send 方法的时候
服务器建立连接(1):已经调用 send 方法,正在发送请求
请求已接收(2):send 执行完成
请求处理中(3):正在解析响应内容
请求已完成(4):响应内容解析完毕,可以在客户端使用了
一般来讲,我们只需要关心最后一个值为 4 的状态,当状态值为 4 的时候,我们就可以将取回来的数据做出一定的操作。
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
// 做出具体的操作
}
}
ajax 流程 1、创建XMLHttpRequest对象 2、通过open设置请求方式 3、响应XMLHttpRequest对象状态变化的函数onreadystatechange属性发送变化时触发(调用回调函数) 4、发送请求
异步编程
同步任务的特点在于,一次执行一个任务,后面的任务只能排队,只有等待前面的任务结束之后,才能执行下一个同步任务。
所谓异步,有两种解决方案:1. 多线程 2. 单线程非阻塞
所谓单线程非阻塞,就是指将耗时间的任务(异步任务)交给其他模块来进行处理,处理完成之后,再由js的单线程进行处理。
整个js引擎的同步异步任务执行顺序如下:
执行同步任务
如果遇到异步任务,交给异步模块
如果异步处理模块已经处理异步任务,扔到任务队列里面排队,因为必须要等到所有的同步任务执行完之后,才会执行异步任务的结果
所有的同步任务执行完成,从任务队列里面获取异步的执行结果
常见的异步任务有:
setTimeout / setInterval、文件的读写(I/O 操作),网络请求
1、异步的第一个阶段 回调的代码的表现形式:嵌套 不易于阅读
export const callback = () => {
request({
type: "POST",
url: "/users/one",
success(data) {
console.log(data);
request({
type: "POST",
url: "/users/two",
success(data) {
console.log(data);
request({
type: "POST",
url: "/users/three",
success(data) {
console.log(data);
}
});
}
});
}
});
}
2、第二阶段:Promise,通过 promise 将异步函数封装
resolve 异步成功之后执行的函数、 reject 是当有异常的时候执行的函数
export const _promise = () => {
new Promise((resolve, reject) => {
request({
type: "POST",
url: "/users/one",
success(data) {
resolve(data);
}
});
}).then(
data => {
console.log(data);
return new Promise((resolve, reject) => {
request({
type: "POST",
url: "/users/two",
success(data) {
resolve(data);
}
});
}).then(
data => {
console.log(data);
return new Promise((resolve, reject) => {
request({
type: "POST",
url: "/users/three",
success(data) {
resolve(data);
}
});
})
}).then(
data => {
console.log(data);
}
)
}
)
}
3、 第三阶段:generator 函数, 专门用来处理异步
3-1.如何定义generator函数:在 function*
3-2. yield: next() 会把 yield 后面的值给返回出去,value
3-3. next 的参数可以传递到 gen 函数的内部
// 第三阶段 generator 函数 专门处理异步的
/*
1、 如何定义 generator函数:在 function*
2、yield:next() 会把yield后边的值返回出去:value
3、next参数可以传递到gen的函数内部
*/
function *gen(){
const data1=yield new Promise((resolve, reject) => {
request({
type: "POST",
url: "/users/one",
success:resolve
});
});
console.log(data1);
const data2=yield new Promise((resolve, reject) => {
request({
type: "POST",
url: "/users/two",
success:resolve
});
});
console.log(data2);
const data3=yield new Promise((resolve, reject) => {
request({
type: "POST",
url: "/users/three",
success:resolve
});
});
console.log(data3);
}
function run(gen)
{
const it=gen();
function next(data){
const {done,value}=it.next(data);
if(done)return;
value.then(data=>next(data));
}
next();
}
export default()=>{
run(gen);
}
// 第四阶段: async/await
async function _asyncFn() {
const data1 = await new Promise((resolve, reject) => {
request({
type: "POST",
url: "/users/one",
// success: resolve
});
resolve();
});
// console.log(data1);
const data2 = await new Promise((resolve, reject) => {
request({
type: "POST",
url: "/users/two",
success: resolve
});
resolve();
});
// console.log(data2);
const data3 = await new Promise((resolve, reject) => {
request({
type: "POST",
url: "/users/three",
success: resolve
});
});
// console.log(data3);
}
export default () => {
_asyncFn();
};