Monday
、jQuery知识点：
1、找元素：$("选择器"); === document.querySelectorAll("选择器")
2、创建元素：$("标签"); === document.createElement("标签名")
3、$(DOM节点); - JQ专属，目的：将DOM转为JQ对象：因为JQ的方法更简单
4、上树：$("父").append(新); === appendChild
5、动画：$("某某人").animate({ - JQ专属新API，甚至连过渡都可以省略不写
css的改变
},执行的时长,callback);
6、JS没有的，其余兄弟：$("xx").siblings();
7、JS没有的，获取下标：$("xx").index();
发现：JQ就算找到的是一个集合，可以直接操作，具有隐式迭代（悄悄的循环了）
一个$为什么能做这么多事？
因为用到了一个技术叫做重载（arguments）！
得到所有的实参，$方法底层一定判断了你传入的实参的不同执行了不同的操作
2、Node.js的第三方框架：express中两个核心概念
1、路由：客户端发来的请求中的一部分，通过判断路由不同响应不同的内容
如何使用express搭建一个服务器，判断路由不同响应不同的内容：
1、下载：npm i express
2、引入：var express=require("express");
app.get("路由",(req,res)=>{
req.query.键名;
res.send("<h1>我是服务器端的一句话</h1>");
res.sendFile(__dirname+"/public/03index.html");
})
特殊：post请求要麻烦一点点：
1、下载引入一个第三方模块（中间件）：var bodyParser = require('body-parser')
2、app.use(bodyParser.urlencoded({extended:false}))
3、app.post("路由",(req,res)=>{
req.body.键名;
})
如果是全栈开发，一个人随便搞，但是如果是前后端分离开发，那么要么讨论路由叫什么，要么会提供给你接口开发文档
2、中间件：
express是一个自身功能极简的框架，完全是由路由和中间件构成的一个开发框架，从本质上来说，一个express应用就是不断的调用各种路由和各种中间件
中间件是一个函数，它可以访问请求对象req，响应对象res,和web应用中处于请求 - 响应循环流程的中间部分
中间件的功能包括:
执行任何代码
修改请求和响应对象
终止请求 - 响应循环
调用堆栈中下一个中间件，
全局中间件的语法：
app.use((req,res,next)=>{
})
局部中间件的语法：
var 中间件名称=(req,res,next)=>{
}
app.get/post("路由",中间件名称,callback)
固定套路：
1、获取post的请求消息，见上面
2、内置中间件加载静态资源：app.use(express.static("静态资源的文件夹名"))
Tuesday
概念：HTML5十大新特性？HTML5其实并不一定是标签技术，还带有一些JS操作，其实属于一个概念
1、语义化标签
2、视频音频
3、增强型表单控件
4、webStorage（客户端存储技术）
5、canvas绘图 - 三阶段你会学习一个框架：echarts.js - 画图：柱状图、饼状图、雷达图（数据可视化）
6、svg绘图 - 画矢量图，放大缩小，图片都不会失真，字体小图标（阿里图标一大堆）
7、webSocket - 广播收听模式
8、webWorker - 秘书
9、拖拽API
10、地理定位
1、webSocket - H5提供了，代码不复杂重点在原理的理解上
http协议 - 属于 “请求 - 响应”模型，只有客户端发起请求消息，服务器端才能响应消息，没有请求就没有响应。
一个请求，只能得到一个响应，但是有些场景中，此模型就力不从心，实时走势图、在线聊天室等等。
解决：定时器 + ajax（心跳请求） - 请求过于复杂，服务器压力太大了，不够频繁
webSocket协议：属于“广播 - 收听”模型，客户端连接到服务器端就不会再断开了，永久的连接的，
双方就可以随意的像对方发送消息，而且是不对等发送，ws协议实时走势图、在线聊天室有优势。
如何使用：
WS服务器端 - 用Node.js编写
使用步骤：
1、下载引入
2、创建一个ws服务器端：
var server=new ws.Server({port:8008});
3、为服务器端设置连接监听
server.on("connection",(socket)=>{
socket.send("说话");
socket.on("message",(data)=>{
data;
})
})
WS客户端：用JS编写
使用步骤：
1、连接：socket=new WebSocket("ws:127.0.0.1:8008");
2、听：socket.onmessage=e=>{e.data}
3、说：socket.send("说话")
Wednesday
5、*****解构赋值：- 三阶段必用
顾名思义：解析结构后进行赋值 - 赋值的新方式，并且得到了增强
如果赋值符号，左右两边的结构一样的，就会悄悄地解开/脱掉结构再一一的进行赋值
语法：
1、像数组一样的解构赋值
var [a,b,c]=[1,2,3];
2、像对象一样的解构赋值
var {a,b=0,c}={c:3,a:1,b:2};
3、*调用函数时，传入实参的顺序无所谓了
function zwjs({name,age,hobby}){
return `我的名字叫${name}今年${age}岁喜欢${hobby}`
}
console.log(zwjs({age:18,hobby:"学习",name:"袍哥"}));
以后但凡你碰到了某个API，里面允许你传入的是一个对象，而且传入的键值对的顺序不重要，它的底层一定就是解构赋值
4、函数的return原本只能有一个，return的本意是退出函数
function f1(){
var name="袍哥";
var age=18;
return [name,age];
}
var [name,age]=f1();
6、Set和Map新的数据类型
1、Set：非常的类似数组，只允许传入数组参数，最大的最用就是数组去重，然后还要转回数组才能使用更多的API
创建：var s=new Set(arr);
转回数组：var arr=[...s];
其余API：可以直接看原型，一眼就能看得懂。
2、Map：非常的类似对象，但是是真没用
创建：var m=new Map();
添加：m.set("属性名","属性值");
获取：m.get("属性名");
其余API：可以直接看原型，一眼就能看得懂。
7、*****class关键字：简化面向对象开发（封装、继承、多态） - 三阶段：react框架时会用到的
class flyer {
constructor(name,speed){
this.name=name;
this.speed=speed;
}
fly(){
return `${this.name}正在以时速${this.speed}飞行`
}
}
class plane extends flyer{
constructor(name,speed,zk){
super(name,speed);
this.zk=zk;
}
fly(){
return `${this.name}正在以时速${this.speed}飞行可以载客${this.zk}人`
}
}
8、***模块化开发：目的：1、分工合作 2、新的引入方式
如何使用：
1、分支模块，公开暴露自己的成员
export var obj={}
2、主模块，需要引入其他模块的东西
import {obj as 别名} from "./文件路径.js"
注意：
1、./ 和 .js 都是不能省略的
2、如果使用了别名，原名就不可以再用了
3、<script src="主模块.js" type="module"></script>
9、*****Promise对象：
承诺 - 异步代码本身是不会卡住后续代码的，如果同时存在多个异步代码，那到底谁先谁后，有了Promise过后我们也可以控制异步顺序
function ajax1(resolve){
setTimeout(()=>{
document.write("<h1>1111111111111111111111111</h1>")
resolve();
},Math.random()*5000);
}
function ajax2(){
return new Promise((resolve)=>{
setTimeout(()=>{
document.write("<h1>2222222222222222222222222</h1>")
resolve();
},Math.random()*5000);
})
}
function ajax3(){
setTimeout(()=>{
document.write("<h1>3333333333333333333333333</h1>");
resolve();
},Math.random()*5000);
}
new Promise(ajax1).then(ajax2).then(ajax3);
不会自己手写promise，只会在一些方法的底层，你输出的时候发现他是一个promise对象
Thursday
ES7：
1、Array API：Includes
再ES7之前，如果我们想要判断一个数组中是否包含某个元素，需要通过 indexOf 获取结果，判断是否为-1。
再ES7之后，我们可以通过includes来判断一个数组中是否包含一个指定元素，根据情况，如果包含则返回true，否则返回false
var arr=[1,2,3,4,5];
console.log(arr.includes(3));
console.log(arr.includes(6));
2、指数运算符：
在ES7之前，计算数字的乘方需要通过 Math.pow(底数,幂) 来完成。
在ES7之后，增加了 ** 运算符，可以对数字来计算乘方
底数**幂
ES8：
1、Object values
之前我们可以通过 Object.keys(obj) 来获取一个对象所有的key
在ES8中提供了 Object.values 来获取所有的value值：
var wsc={
dog:"阿拉斯加",
phone:"威图",
gf:"一堆"
}
console.log(Object.keys(wsc));
console.log(Object.values(wsc));
但是，始终还得我们自己循环才能拿到每一个，何必不一来就for in循环呢
2、String Padding
某些字符串我们需要对其进行前后的填充，来实现某种格式化效果，在ES8就增加了两个字符串的API：padStart 和 padEnd 方法
var str="hello";
console.log(str.padStart(10,"a"));
console.log(str.padEnd(10,"a"));
使用场景：比如时间是一位数时，我们需要填充一个0
var h="3".padStart(2,"0");
var m="5".padStart(2,"0");
var s="9".padStart(2,"0");
console.log(`${h}:${m}:${s}`);
3、尾部逗号的添加
在ES8中，我们才允许在函数定义和调用时多加一个逗号，原来是会报错的
function f1(x,y,){
console.log(x,y);
}
f1(1,2,)
4、***asnyc 和 await：
async作为一个关键字放到函数前面，用于表示函数是一个异步函数，异步函数意味着该函数的执行不会再阻碍我们后续代码。
async function f1(){
return "啦啦啦啦";
}
f1().then(rs=>{
console.log(rs);
});
console.log("后续代码");
意味着我们的任何个函数都可以变为异步
await是等待的意思，那么他在等待什么呢？它后面跟着什么呢？其实它后面可以方任何表达式，不过我们更多的是放一个返回的Promise对象的表达式
async function f1(){
return 1;
}
async function f2(){
return 2;
}
async function f3(){
return await f1()+await f2();
}
f3().then(rs=>{
console.log(rs);
})
console.log("后续代码");
ES9：
1、扩展运算符：
ES6（ES2015）引入Rest参数和扩展运算符，三个点（...）仅用于数组的，现在可用范围更广
function f1(a,b,...c){
console.log(a);//1
console.log(b);//2
console.log(c);//[3,4,5,6,7];
}
f1(1,2,3,4,5,6,7)
展开操作符以相反的方式工作，将数组转换为可以传递给参数的单独参数，例如：Math.max()
var arr=[312,5,45,767,9,78,23,6546,8465];
console.log(Math.max(...arr));
ES9为对象提供了和数组一样的扩展运算符：
var obj={
a:1,
b:2,
c:3,
}
var {a,...x}=obj;
console.log(a);//1
console.log(x);//{b:2,c:3}
var obj={
a:1,
b:2,
c:3,
}
var {a,...x}=obj;
console.log(a);//1
console.log(x);{b:2,c:3}
function f1({a,...x}){
console.log(a);//1
console.log(x);//{b:2,c:3}
}
f1({a:1,b:2,c:3})
var obj1={a:1,b:2,c:3};
var obj2={...obj1,z:26};
console.log(obj2)//{a:1,b:2,c:3,z:26}
ES10：
1、flat/flatMap
1、flat() - 方法会按照一个可指定的深度递归遍历数组，并将所有的元素与遍历到的子数组中的元素合并为要一个数组
例如一个数组中有很多层，第一层数组中还有第二层，第二才能中还有第三层...
var arr=[10,20,[30,40,[50,60,[70,[80,90]]]]];
console.log(arr.flat(4));//[10,20,30,40,50,60,70,80,90];
2、flatMap - 方法首先使用map遍历函数遍历每个元素，然后将结果压缩成一个新数组
注意1：flatMap是先进行了map操作，在做的flat操作
注意2：flatMap中的flat相当于深度为1
var arr=["Hello World","Hello Coder","你好 中国"];
var newArr=arr.flatMap(str=>str.split(" "))
console.log(newArr);//["Hello", "World", "Hello", "Coder", "你好", "中国"]
2、trimStart/trimEnd;
去除一个字符串首位的空格，我们可以通过trim方法，如果单独去除前面和后面呢？
ES10中给我们提供了trimStart/trimEnd;
ES11：
1、全局对象全新写法：JavaScript（window） Node.js（Global）
globalThis - 前端后端都可以统一使用
2、for...in循环标准化：
在ES11之前，虽然很多浏览器都支持for...in循环来遍历对象，但是并没有被ECMA标准化
ES12：
||逻辑赋值运算符
function f1(x){
x = x || "默认值"
x ||= "默认值"
console.log(x)
}
f1()
&&逻辑赋值运算符：
var obj={"name":"袍哥"}
obj=obj&&obj.name
obj&&=obj.name
console.log(obj)
ES13：
at()
可以通过at方法获取字符串、数组的元素，他是作为ES13中的新特性加入
var arr=[10,20,30,40]
console.log(arr.at(0))
console.log(arr.at(-1))
var str="hello"
console.log(str.at(0))
console.log(str.at(-1))
