寒假集训——十

八十五、初识正则表达式

js复杂类型

1. 字面量
   var reg=/abc/
2. 内置构造函数
   var reg2=new RegExp("abc")

八十六、元字符

1.基本元字符

1. \d 一位数字（0-9）
2. \D 一位非数字
3. \s 一位空白（空格 缩进 换行）
4. \S 一位非空白
5. \w 字母 数字 下划线
6. \W 非字母数字下划线
7. . 任意内容（换行不算）
8. \ 转义字符

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

八十八、正则表达式的两大特性

1. 懒惰，解决 使用全局标识符g
2. 贪婪
3. 非贪婪
   *?
   +?
   ??
   {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的箭头函数

()=>{}

1. (只有一个形参的时候)可以省略
2. {}可以省略 只有一句代码或只有返回值的时候，省略return
3. 没有arguments
4. 箭头函数没有this
   箭头函数this是父级作用域的

九十四、ES6的解构赋值

快速的从对象和数组中获取里面的成员

九十五、ES6展开运算符

… 展开数组，复制，参数-实参-形参，伪数组转换，对象

九十六、ES6模块化语法

<script type="module"></script>

1. 私密不漏
   import 导入
2. 重名不怕
   as
3. 依赖不乱
   export 导出

默认导出
export default

九十七、初识面向对象

• 首先，我们要明确，面向对象不是语法，是一个思想，是一种编程模式
• 面向：面(脸)，向(朝着)
• 面向过程：脸朝着过程 =》关注着过程的编程模式
• 面向对象：脸朝着对象 =》关注着对象的编程模式
• 实现一个效果
  在面向过程的时候，我们要关注每一个元素， 每一个元素之间的关系， 顺序…
  在面向对象的时候，我们要关注的就是找到一个对象来帮我做这个事情，我等待结果
• 我们以前的编程思想是，每一 个功能,都按照需求一步一步的逐步完成

创建对象的方式

• 因为面向对象就是一个找到对象的过程
• 所以我们先要了解如何创建一个对象

调用系统内置的构造函数创建对象

• js给我们内置了一个Object构造函数
• 这个构造函数就是用来创造对象的

九十八、构造函数注意问题

1. 首字母大写
2. 构造函数不写return
3. 构造函数能当成普通函数用？
4. 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的优势

1. 不需要插件的支持，原生js就可以使用
2. 用户体验好(不需要刷新页面就可以更新数据)
3. 减轻服务端和带宽的负担
4. 缺点:搜索引擎的支持度不够， 因为数据都不在页面上,搜索引擎搜索不到

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>