寒假集训
- 八十五、初识正则表达式
- 八十六、元字符
- 八十七、捕获exec
- 八十八、正则表达式的两大特性
- 八十九、正则与字符串方法
- 九十、this指向
- 九十一、改变this指向
- 九十二、ES6定义变量
- 九十三、ES6的箭头函数
- 九十四、ES6的解构赋值
- 九十五、ES6展开运算符
- 九十六、ES6模块化语法
- 九十七、初识面向对象
- 九十八、构造函数注意问题
- 九十九、面向对象的原型
- 一百、继承
- 一百零一、ES6继承
- 一百零二、AJAX
- 一百零三、封装ajax
- 一百零四、回调地狱问题
- 一百零五、Promise基础语法
- 一百零六、PROMISE
- 一百零七、async和await语法
- 一百零八、fetch
- 一百零九、cookie
- 一百一十、jsonp
- 一百一十一、再谈函数
- 一百一十二、闭包
八十五、初识正则表达式
js复杂类型
- 字面量
var reg=/abc/
- 内置构造函数
var reg2=new RegExp("abc")
八十六、元字符
1.基本元字符
- \d 一位数字(0-9)
- \D 一位非数字
- \s 一位空白(空格 缩进 换行)
- \S 一位非空白
- \w 字母 数字 下划线
- \W 非字母数字下划线
- . 任意内容(换行不算)
- \ 转义字符
2.边界符
^ 开头
$ 结尾边界
^开头结束$
3.限定符
*0~多次
+1~多次
?0~1
{n}指定次数
{n,}>=n
{n,m}
4.特殊符号
()整体
|或,左右
[]代表1个
[a-zA-Z0-9] \w
[0-9] \d
[^]
八十七、捕获exec
exec() 捕获片段
标识符 g i
八十八、正则表达式的两大特性
- 懒惰,解决 使用全局标识符g
- 贪婪
- 非贪婪
*?
+?
??
{n,}?
{n,m}?
八十九、正则与字符串方法
正则.test(字符串)
正则.exec(字符串)
字符串.replace search match
九十、this指向
this 关键字
this 谁调用我,this就指向谁(es6箭头函数)
九十一、改变this指向
call 执行函数,并改变this指向为函数的第一个参数 支持多个参数
apply 执行函数,并改变this指向为函数的第一个参数 两个参数,第二个参数是一个数组
bind 改变this指向为函数的第一个参数,不会自动执行函数 支持多个参数
九十二、ES6定义变量
- 我们所说的ES5和ES6其实就是在js语法的发展过程中的一个版本而已
- ECMAScript就是js的语法
以前的版本没有某些功能
在ES5这个版本的时候增加了一些功能
在ES6这个版本的时候增加了一些功能 - 因为浏览器是浏览器厂商生产的
ECMAScript发布了新的功能以后,浏览器厂商需要让自己的浏览器支持这些功能。
这个过程是需要时间的
所以到现在,基本上大部分浏览器都可以比较完善的支持了
只不过有些浏览器还是不能全部支持
这就出现了兼容性问题
所以我们写代码的时候就要考虑哪些方法是ES5或者ES6的,看看是不是浏览器都支持
let和const关键字
- 我们以前都是使用var关键字来声明变量的
- 在ES6的时候,多了两个关键字let和const,也是用来声明变量的
- 只不过和var有一些区别
必须先定义再使用
let和const不允许重复声明变量
块级作用域{}
let 变量
const 常量
九十三、ES6的箭头函数
()=>{}
- (只有一个形参的时候)可以省略
- {}可以省略 只有一句代码或只有返回值的时候,省略return
- 没有arguments
- 箭头函数没有this
箭头函数this是父级作用域的
九十四、ES6的解构赋值
快速的从对象和数组中获取里面的成员
九十五、ES6展开运算符
… 展开数组,复制,参数-实参-形参,伪数组转换,对象
九十六、ES6模块化语法
<script type="module"></script>
- 私密不漏
import 导入 - 重名不怕
as - 依赖不乱
export 导出
默认导出
export default
九十七、初识面向对象
- 首先,我们要明确,面向对象不是语法,是一个思想,是一种编程模式
- 面向:面(脸),向(朝着)
- 面向过程:脸朝着过程 =》关注着过程的编程模式
- 面向对象:脸朝着对象 =》关注着对象的编程模式
- 实现一个效果
在面向过程的时候,我们要关注每一个元素, 每一个元素之间的关系, 顺序…
在面向对象的时候,我们要关注的就是找到一个对象来帮我做这个事情,我等待结果 - 我们以前的编程思想是,每一 个功能,都按照需求一步一步的逐步完成
创建对象的方式
- 因为面向对象就是一个找到对象的过程
- 所以我们先要了解如何创建一个对象
调用系统内置的构造函数创建对象
- js给我们内置了一个Object构造函数
- 这个构造函数就是用来创造对象的
九十八、构造函数注意问题
- 首字母大写
- 构造函数不写return
- 构造函数能当成普通函数用?
- this指向
九十九、面向对象的原型
对象.__proto__===构造函数.prototype
一百、继承
构造函数继承
属性继承
function student (name , age ,classroom) {
Person. call(this, name,age)
this.classroom = classroom
}
原型继承
继承原型上方法
student. prototype = new Person()
组合继承
构造函数继承+原型继承
一百零一、ES6继承
extends 原型继承
super() 属性继承
一百零二、AJAX
是前后端交互的能力
也就是我们客户端给服务端发送消息的工具,以及接收响应的工具
是一个默认异步执行机制的功能
全名
ajax===async javascript and xml(闭合标签)
AJAX的优势
- 不需要插件的支持,原生js就可以使用
- 用户体验好(不需要刷新页面就可以更新数据)
- 减轻服务端和带宽的负担
- 缺点:搜索引擎的支持度不够, 因为数据都不在页面上,搜索引擎搜索不到
AJAX的使用
- 在js中有内置的构造函数来创建ajax对象
- 创建ajax对象以后,我们就使用ajax对象的方法去发送请求和接受响应
ajax状态码
- ajax状态码-xhr.readyState
- 是用来表示一个ajax请求的全部过程中的某一个状态
readyState=0:表示未初始化完成,也就是open方法还没有执行
readyState=1:表示配置信息已经完成,也就是执行完open之后
readyState=2:表示send方法已经执行完成
readyState=3:表示正在解析响应内容
readyState=4:表示响应内容已经解析完毕,可以在客户端使用了 - 这个时候我们就会发现,当一个ajax请求的全部过程中,只有当readystate===4的时候,我们才可以正常使用服务端给我们的数据
- 所以,配合http状态码为200 ~ 299
一个ajax对象中有一个成员叫做xhr. status
这个成员就是记录本次请求的http状态码的 - 两个条件都满足的时候,才是本次请求正常完成
readyStateChange
- 在ajax对象中有一个事件, 叫做readystateChange事件
- 这个事件是专门用来监听ajax对象的readyState值改变的的行为
- 也就是说只要readyState 的值发生变化了,那么就会触发该事件
- 所以我们就在这个事件中来监听ajax的readyState是不是到4了
const xhr = new XMLHttpRequest()
xhr.open('get','./data.php')
xhr.send()
xhr.onreadyStateChange=function () {
//每次readyState改变的时候都会触发该事件
//我们就在这里判断readyState的值是不是到4
//并且http的状态码是不是200 ~ 299
if (xhr. readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
//这里表示验证通过
//我们就可以获取服务端给我们响应的内容了
}
}
创建XHR
new XMLHttpRequest()
配置
open(请求方式,请求地址,是否异步)
localhost本机域名 127.0.0.1 本机ip
send
send()
接收数据
注册一个事件
onreadystatechange=function(){}
200 OK
404 未找到页面
ajax同步异步
true 表示异步请求
false 表示同步请求
请求方式
nodejs-http://nodejs.cn/download/
json-server 基于一个json文件就可以创建很多的后端模拟接口
form
get post
ajax
get 偏向获取数据
post 偏向提交数据
提交 信息
setRequestHeader("Content-type","application/x-www-form-urlencoded")//key=value&key=value
setRequestHeader("Content-type","application/json")//{"key":value}
put 偏向更新(全部)
delete 偏向删除信息
patch 偏向部分修改
header
options
connect
一百零三、封装ajax
function querystringify(obj){
let str=''
for (let k in obj) str += `${k}=$(obj[k]}&`
return str.slice(0, -1)
}
//封装 ajax
function ajax(options) {
let defaultoptions = {
url:"",
method:"GET",
async: true ,
data: {},
headers: {},
success: function () {},
error: function (){}
}
let { url, method, async, data, headers, success, error} = {
...defaultoptions,
...options
}
if(typeof data==='object'&&headers["content-type "]?.indexof("json")>-1){
data = JSON. stringify(data)
}
else{
data = queryStringify(data)
}
//如果是get请求,并且有参数,那么直接组装一下url信息
if (/^get$/i. test(method) && data) url += '?' + data
//发送请求
const xhr=new XMLHttpRequest()
xhr.open(method, url, async)
xhr.onload=function(){
if(!/^2\d{2}$/.test(xhr.status)){
error(`错误状态码:${xhr.status}`)
return
}
//执行解析
try{
let result = JSON.parse(xhr.responseText)
success(result)
}catch(err){
error(`解析失败!因为后端返回的结果不是 json 格式字符串`)
}
}
//设置请求头内的信息
for (let k in headers) xhr. setRequestHeader(k, headers[k])
if(/^get$/i.test(method)){
xhr.send()
}else{
xhr. send(data)
}
}
ajax({
url:"http://localhost: 3000/users",
method:"GET"
async:true,
data:{
username: "kerwin",
password: "123"
},
headers:{},
success:function(res){
console.log(res)
},
error: function(err){
console.log(err)
}
}
一百零四、回调地狱问题
- 当一个回调函数嵌套一个回调函数的时候
- 就会出现一个嵌套结构
- 当嵌套的多了就会出现回调地狱的情况
- 比如我们发送三个ajax请求
第一个正常发送
第二个请求需要第一个请求的结果中的某一个值作为参数
第三个请求需要第二个请求的结果中的某一个值作为参数
ajax({
url: '我是第一个请求',
success (res) {
// 现在发送第二个请求
ajax({
url: ' 我是第二个请求’,
data: { a: res.a, b: res.b },
success (res2) {
//进行第三个请求
ajax({
url: '我是第三个请求'
data: { a: res2.a, b: res2.b },
success (res3) {
console.log(res3)
}
})
}
})
}
})
- 回调地狱,其实就是回调函数嵌套过多导致的
- 当代码成为这个结构以后,已经没有维护的可能了
- 所以我们要把代码写的更加的艺术一些
一百零五、Promise基础语法
- promise是一个ES6的语法
- 承诺的意思,是一个专门用来解决异步回调地狱的问题
一百零六、PROMISE
- 为了解决回调地狱
- 我们就要使用promise语法
- 语法:
new Promise(function (resolve, reject) {
// resolve 表示成功的回调
// reject 表示失败的回调
}). then(function (res) {
//成功的函数
}). catch(function (err) {
//失败的函数
})
- promise 就是一个语法
我们的每一个异步事件,在执行的时候
都会有三个状态,执行中/成功/失败 - 因为它包含了成功的回调函数
- 所以我们就可以使用promise来解决多个ajax发送的问题
- Promise.all([ ])
一百零七、async和await语法
- async/await是一个es7的语法
- 这个语法是回调地狱的终极解决方案
- 语法:
async function fn() {
const res = await promise对象
}
- 这个是一个特殊的函数方式
- 可以await一个promise对象
- 可以把异步代码写的看起来像同步代码
- 只要是一个promiser对象,那么我们就可以使用async/await来书写
一百零八、fetch
XMLHttpRequest是一个设计粗糙的API, 配置和调用方式非常混乱,而且基于事件的异步模型写起来不友好。
兼容性不好 polyfill: https://github.com/camsong/fetch-ie8
一百零九、cookie
http协议无状态
localStorage:用户名密码? token 钥匙 ==> Nodejs token认证。。
cookie 本地存储 sessionID 钥匙 ===> Nodejs cookie+session
cookie 本地存储
存cookie
document.cookie=“”
路径设置
document.cookie=“path=”
过期时间设置
document.cookie=“expires=”
取cookie
document.cookie
删cookie
过期时间设置提前
cookie的特点
1.只能存储文本
2.单条存储有大小限制4KB左右
数量限制(一般浏览器,限制大概在50条左右)
3.读取有域名限制:不可跨域读取,只能由来自写入cookie的同一域名的网页可进行读取。简单的讲就是,哪个服务器发给你的cookie,只有哪个服务器有权利读取
4.时效限制:每个cookie都有时效,默认的有效期是,会话级别:就是当浏览器关闭,那么cookie立即销毁,但是我们也可以在存储的时候手动设置cookie的过期时间
5.路径限制:存cookie时候可以指定路径,只允许子路径读取外层cookie,外层不能读取内层。
一百一十、jsonp
同源策略:同域名 同端口号 同协议
不符合同源策略,浏览器为了安全,会阻止请求
解决:
1.cors 由后端设置,Access-Control-Allow-Origin:*
2.jsonp:前后端必须协作
3.反向代理
Jsonp(JSON with Padding)是json的一种’使用模式",可以让网页从别的域名(网站) 那获取资料,即跨域读取数据。
为什么我们从不同的域(网站)访问数据需要一个特殊的技术( JSONP )呢?这是因为同源策略。
const script = document. createElement('script')
script.src = './kerwin. txt'
document.body.appendChild(script)
- jsonp原理:动态创建script标签,src属性指向没有跨域限制
指向一个接口,接口返回的格式一定是****()函数表达式。 - 注意:
1.后端接口形式必须**(),需要后端配合
2.jsonp 缺点
(1)onload 删除script标签
(2)只能get请求,不能post put delete
一百一十一、再谈函数
函数在调用完不被销毁:函数有返回值,而且返回值必须是复杂类型,而且要赋值给外面的变量。
一百一十二、闭包
闭包:
函数内部返回一个函数,被外界所引用。
这个内部函数就不会被销毁回收。
内部函数所用到的外部函数的变量也不会被销毁。
优点:让临时变量永驻内存
缺点:内存泄露
闭包应用:函数柯里化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<input type="text" name="" id="mysearch">
<ul id="list"></ul>
<script>
//1. 记住列表的索引
var oli=document.querySelectorAll("li");
/* for(let i=0;i<oli.length;i++){
oli[i].οnclick=function(){
console.log(i);
}
} */
for(var i=0;i<oli.length;i++){
oli[i].onclick=(function(index){
return function(){
console.log(11111,index)
}
})(i)//匿名自执行函数
}
//2.jsonp案例优化--函数防抖
//...
function test(obj){
console.log(obj.g)
list.innerHTML=obj.g.map(item=>
`<li>${item.q}</li>`
).join("")
}
mysearch.oninput=(function(){
var timer=null;
return function(evt){
console.log("111111111");
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
if(!evt.target.value){
list.innerHTML="";
return;
}
var oscript=document.createElement("script");
oscript.src=`https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=36542,36464,36673,36454,31660,36692,36166,36695,36697,36570,36074,36655,36345,26350,36469,36314&wd=${evt.target.value}&req=2&csor=1&cb=test&_=1656294200527`;
document.body.appendChild(oscript);
oscript.onload=function(){
oscript.remove();
}
}, 500);
}
})()
</script>
</body>
</html>