108-161

正则表达式

1.字面量写法

<script>
var reg=/abc/
</script>

内置构造函数

<script>
var reg2= new RegExp("abc")
</script>

元字符

var reg = /\d/一位数字（0-9）
var reg = /\D/一位非数字 
var reg = /\s/一位空白（空格 缩进 换行）
var reg = /\S/非空白
var reg = /\w/字母 数字 下划线
var reg = /\W/非字母数字下划线
var reg = /\./任意内容（换行不算）
var reg = //转移字符

边界符

^规定开投内容

var reg = /^\d/开头必须是数字

$规定结尾内容

限定符

*包含规定内容0~多次
+包含规定内容1~多次
？包含规定内容0~1次
{n}指定次数

特殊符号

1.（）整体

var reg = /（abc）{2}/

2.| 或

var reg = /a|b/

3.[]代表1个
4.[a-zA-Z0-9]相当于\w
5.[0-9]相当于\d
6.[^abc]取反

捕获

<script>
var reg = /\d{3}/
console.log(reg.exec("aa123aa "))
</script>

只能捕获遇到的第一个

标识符

g 全局
i 忽略大小写

正则表达式特性

this指向

谁调用就指向谁

改变this指向

1.call 执行函数，并改变this执行为函数的第一个参数
智齿多个参数

<script>
obj1.getName.call(0bj2)//this指向obj2
</script>

2.apply 执行函数，并改变this执行为函数的第一个参数
支持两个参数（第二个参数为数组）
3.bind 改变this执行为函数的第一个参数，不会自动执行函数

<scrip>
var fun1 = obj1.getName.blind(obj2)
console.log(fun1)
fun1()
</script>

ES6

let ：

1.必须先定义再使用
2.变量重名
3.块级作用域{}

const

定义出常量不可改变

箭头函数

1.（）可以省略仅限一个参数

<script>
var = test a => {
console.log(a)
}
</script>

2.{}可以省略 只有一句代码，只有返回值的时候
3.没有arguments
4.箭头函数没有this

ES6解构赋值

ES6的对象简写

<script>
mybtn.onclick = function (){
let username = myusername.value
let password = mypassword.value
console.log(username,password)
var obj = {
username,
password
}
console.log("发给后端的结构"，pbj)
}
</script>

ES6展开运算符

<script>
var a=[1,2,3]
var b=[4,5,6]
var c=[...a,...b]
//c拼接了a，b

var a=[1,2,3]
var b=[...a]
//把a的值传给了b

var test=(...arr)=>{
	console.log(arr)
}
test(1,2,3,4,5)
//将1，2，3，4，5存在arr中然后一个个输出

var arr=[1,2,3,4,1,2,31,12,0]
var res=Math.max(...arr)
//运用在函数里

function test(){
	var arr=[...arguments]
	console.log(arr)
}
test(1,2,3,4,5)
//伪数组转换

var obj1={
	name:"kerwin",
	age:100
}
var obj2={
	location:"dalian"
}
var obj={
	...obj1
	...obj2
}
//合并两个对象，同名会覆盖

</script>

模块化语法

1.私密不漏
2.重名不怕
3.依赖不乱
ps：script引用记得加type=“module”

<script>
export{
	***
	*****
}
//导出函数
import{} from ' ./'
//导入函数

import{A1,A2,test as A_test} from ' ./'
import{B1,B2,test as b_test} from './'
//解决重名问题

export default c
//默认导出c

</script>

ES6class

<script>
function CreatObj(name){
	this.name=name
}
CreatObj.prototype.say=function(){
	console.log(this.name,"hello")
}
class CreatObj{
	constructor(name){
		this.name=name
	}
	say(){
		console.log(this.name,"hello")
	}
}
</script>

继承

<script>
 class Person{
       // 父级
	constructor(name,age){
	this.name=name;
	this.age=age;
	}
	say(){
	console.log(this.name,"我是父",this.grade);
	}
}
class Student extends Person{
    //子级
	constructor(name,age,grade){
		super(name,age);//将子级元素传到父级元素里
		this.grade=grade;
	}
	say(){
	super.say();//调用父级的say
	console.log(this.name,this.age,this.grade,"我是子");
	}//将原来父级的say方法修改了
}
var obj=new Student("xiaoming",18,555);
obj.say();//xiaoming 我是父 555； xiaoming 18 555 我是子

</script>

面向对象

面向对象不是语法，是一个思想，是一种编程模式
面向：面（脸），向（朝着）
面向过程：脸朝着过程=》关注着过程的编程模式
面向对象：脸朝着对象=》关注着对象的编程模式
实现一个效果

创建对象方式

<script>
//字面量
var obj1={
	name:"蒸羊羔",
	material:["111","222","333"],
	setCook(){
	
	}
}
var obj2={
	name:"烧花鸭",
	material:["111","222","333"],
	setCook(){
	
	}
}

//内置构造函数
var obj1 = new Object()
obj1.name = "蒸羊羔"
var obj2 = new Object()
obj2.name = "烧花鸭"

//工厂函数
function creatObj(name){
	var obj = {}
	obj.name=name
	obj.material=[]
	return obj
}
var obj1 = creatObj(“蒸羊羔”)
console.log(obj1)
var obj2 = creatObj(“烧花鸭”)
console.log(obj2)

//自定义构造函数
//new Object()  new String()  newArray()
function creatObj(name){
	this.name = name
	this.material=[]
	this.cook=function(){
	
	}
}
var obj1 = new creatObj("蒸羊羔")


</script>

ps:
1.首字母大写
2.构造函数不写return
3.构造函数不能当成普通函数用{new过程===实例化过程 }

面向对象的原型

<script>
function CreatList(select,data){
	this.ele = document.querySelector(select)
	this.title=data.title
	this.list=data.list
}
CreatList.prototype.render=function(){

}
//将渲染页面放在定义之外定义，减少内存消耗（共用，而不是重新定义）

//对象.__proto__===构造函数.prototype
//obj1.toString()，原型链概念

</script>

继承

构造函数继承

（无法继承原型方法）

<script>
function Person(name,age){
	this.name=name
	this.age=age
}
Person.prototype.say=function(){
	console.llog(this.name,"hello")
}
function Student(name,age,grade){
	Person.call(this,name,age)//继承了两行代码 
	this.grade=grade
}

</script>

原型继承

（继承原型上方法）

Student.prototype=new Person()

组合继承

组合上面两个继承

ajax

ajax=async javascript and xml
所拥有的优点：
1.不需要插件支持原生js就可使用
2.用户体验好，无需刷新页面就可以更新数据
3.减轻服务端和带宽的负担
缺点
搜索引擎容易搜索不到
ajax状态码：
readyState0：表示未初始化完成，也就是open方法还没有执行
readyState1：表示配置信息已经完成，也就是执行完open之后
readyState2：表示send方法已经执行完成
readyState3：表示正在解析响应内容
readyState==4：表示响应内容已经解析完毕，可以在客户端使用了

<script>
//请求服务端
//1、创建XHR（对象） new XMLHttpRequest（）
var xhr = new XMLHttpRequest（）
//2、配置 open(请求方式，请求地址，是否异步)
//localhost本机域名 127.0.0.1 本机ip
xhr.open(”GET“，”ip地址“)
//3、拨出 send
xhr.send()
//4、接受数据，注册一个事件
xhr.onreadystatechange=function(){
	if（xhr.readyState===4）{
		console.log("数据解析完成",xhr.responseText/*拿内容*/)
	}
}

</script>

请求方式

get 偏向获取数据
post 偏向提交数据
put 偏向更新
delete偏向删除信息
patch偏向部分修改

封装

<script>
ajax({
	url:"http://localhost:300/users",
	method:"GET",
	async:true
	data:{
		username:"kerwin",
		password:"123"
	}
	headers:{}
	success:function(res){
		console.loh(res)
	}
	error:function(err){
		console.log(err)
	}
})

</script>

回调地狱

当一个回调函数嵌套一个回调函数的时候，就会出现一个嵌套结构
当嵌套的多了就会吹西安回调地狱的情况
比如我们发送了三个ajax请求
第一个正常发送
第二个请求需要第一个请求的结果的某一个值作为参数
第三个请求需要第二个请求的结果中的某一个值作为参书

<script>
//tiechui已经登录
ajax({
	url:"http://localhost3000/news",
	data:{
		author:"tiechui"
	},
	success:function(res){
		console.log(res[0])
		ajax({
			url:"http://loclhost:3000/comments",
			data:{
				
			},
			success:function(res){//二层的回调地狱，代码维护性不好
				newsId:res[0].id
			}
		})
	}

})

</script>

ps:解决回调地狱的方法 promise

promise基础语法

<script>
var q = new Promise(function(resolve，reject){
	//放异步
	settimeout（（）=>{
		//成功兑现承诺
		resolve()

		//失败拒绝承诺
		//reject（）
	},2000）
})
//pending 执行中
//fulfilled 兑现承诺
//reject 拒绝承诺

//q是promise对象
q.then(function(){
//兑现承诺，这个函数被执行
}).catch(function(){
//拒绝承诺，这个函数被执行  
})

</script>

promise封装ajax

<script>
function pajax(){
	var q = new Promise(function(resolve,reject){
		ajax({
			success:function(res){、
				resolve(res)
			},
			error:function(err){
				reject(err)
			}
		})
	
	})
	return q
}

</script>

async和await语法

async/await是es7的语法
这个语法是回调地狱的终极解决方案

asnyc function fn(){
	const res = await promise
}

此函数功能：
1.可以await一个promise对象
2.可以把异步代码写的看起来像同步代码
3.只要是一个promise对象，我们就可以用asnyc/await来写

asnyc function fn(){
	const res = new Promise(function(resolve,reject){
		ajax({
			url:'',
			success(res){
				resolve(res)
			}
		})
	})
}

fetch

XMLHttpRequest是一个设计粗糙的API，配置和调用方式非常混乱，而且基于事件的异步模型写起来不友好

<script>
fetch("http://localhost:3000/users")
	.then(res=>res.json())
	.then(res=>{
		console.loh(res)
	})

</script>

cookie

localStorage，存贮登录状态
cookie 本地存贮
sessionID（钥匙）===》nodejs cookie+session

jsonp

sonp是json的一种“使用方式”，可以让王爷从别的域名（网站）那获取资料，即跨域读取数据
同源策略：同域名 同端口号 同协议
不符合同源策略，浏览器为了安全，会阻止请求

解决：
1、cors 有后端设置，Access-Control-Allow-Origin：*
2、jsonp：前后端必须协作

const script = document.creatElement('script')
script.src='./kerwin.txt'
document.body.appendChild(script)

闭包

函数内部返沪i一个函数，被外界所引用
这个内部函数就不会被销毁回收
内部函数所用到的外部函数的变量也不会被销
毁
优点：
让临时变量永驻内存
缺点
内存泄漏（解决 func=null）

<script>
function outer(){
	var name="kerwin"
	return function(){
		return name+"1111111"
	}
}
var func=outer()
console.log(func())

</script>