JS内容五部分

本文介绍了JavaScript中的正则表达式,包括字面量、元字符、边界符和限定符等概念,以及如何进行字符串匹配。接着讨论了ES6的新特性,如let、const、箭头函数和解构赋值。此外,还详细讲解了AJAX的使用,包括异步请求、请求方式和参数传递。最后,提到了回调函数、Promise和异步编程的概念,以及JSONP和闭包的作用。
摘要由CSDN通过智能技术生成

JS内容五部分

内容三十五,正则表达式

1,字面量

var reg = /abc/

2,内置构造函数

var reg2 = new RegExp("abc")

用正则表达式方法进行检验

<div id="mytext"></div>
<script>
	var reg = /abc/
	mytext.onblur = function(){
	console.log(mytext.value)
	console.log(reg.test(mytext.value))
</script>

内容三十六,元字符

\d一位数字

var reg = /\d\d/

意思是检测必须包含两个数字,检验方法如下:

console.log(reg.test("123"))

\D一位非数字

var reg =/\D\D/

意思是定义的reg必须包含一位非数字


\s一位空白内容

var reg = /\s/

表示定义的内容中必须包含一个空格


\S一位非空白内容

var reg = /\S\S\S/

这里表示定义的内容中不含有三个空格


\w字母,数字,下划线

var reg = /\w/

表示定义的内容中含有字母数字或-


\W非字母数字下划线

var reg = /\W/

表示定义的内容不含有字母数字或-


.任意内容(换行不算)

var reg = /./

表示任意内容(换行不算)


\转义字符

var reg = /\d\.\d/

如上,如果在/\d \d/中直接写.会被识别为上面任意字符,此时在前面加上\会将其识别为.


边界符

^开头

var reg = /^\d/

表示该元素必须在开头就出现


$结尾

var reg = /$\d/

表示该元素必须在结尾出现


限定符

*0~任意多次

var reg = /\d*/

只要出现\d类型的都返回true


+1~多次

var reg = /\d+/
console.log(reg.test("abc124"))

可以匹配多个,例如上面就是匹配的124,返回的值也是124


?0~1次

var reg =/\d?/

表示没有或者只有一个

{n}指定次数

var reg =/\d{3}/

表示指定出现3次数字

{n,}表示出现的是次数要>=n

{n,m}表示出现的是次数要满足出现的数字最少为n个,最多为m个

特殊符号

()表示一个整体

例如

var reg =/abc{3}/

表示c需要重复3遍
而希望abc整体重复3遍时,就给abc加上括号

var reg =/(abc){3}/

|代表或

var reg = /a|b/

表示需要包含a或b

[ ]代表其中一个

var reg = /[abcd]/
console.log(reg.test("abc"))

因为下面是abc,包含在上面的abcd中,所以返回true
相当与匹配的字符要在上面的范围里面

捕获exec

利用exec可以实现对合法元素的捕获

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

返会值不再是true或false,而是确切的元素。
如上,返回值就是123

特性

懒惰

捕获的时候记不住上一次捕获的位置,每一次都是从字符串的开头进行检索

var reg = /\d{4}/g

贪婪

捕获字符时,捕获的越多越好

var reg =/\d{1,4}/
console.log(reg.exec("aa1232456bb"))

上面代码的返回值为1234

非贪婪

var reg =/\d{1,4}?/
console.log(reg.exec("aa1232456bb"))

上面代码的返回值为1

正则与字符串

正则.test(字符串)
正则.esec(字符串)

字符串.replace

var str = "abcdef"

var newstr = str.replace(/a/g,"*")
console.log(newstr)

如上,可以进行全局替换

search

var str = "abcdef"

var newstr = str.search(/a/,)
console.log(newstr)

如果能找到,返回值为元素的位置
如果找不到,返回值为-1
注意:

search只能返回找到的第一个值

match 捕获内容

console.log(datestr.match(/(\d{4}-(\d{1,2})-(\d{1,2})/g))

可以直接检索全局中所有符号条件的内容

this关键字

事件绑定的this

DOM0

box.onclick = function(){
console.log(this.innerHTML)
}

DOM2

box.addEventListenner("click",fubnction(){
conosole.log("1111",this)
})

改变this指向

call

boj1.getName.call(obj2)

强行改变this指向为函数的第一个参数,执行函数
支持多个参数

apply

boj1.getName.apply(obj2)

改变this指向为函数的第一个参数,并执行函数
两个参数,第二个参数是一个数组

bind

var fun1 = obj1.getName.bind(obj2,1,2,3)
console.log(fun1)
fun1()

改变this指向为函数的第一个参数,不会自动执行函数
支持多个参数

ES6

let 和const关键字

LET 定义变量

1,必须先定义,再使用

2,变量不能重名

3,块级作用域

let 定义的变量只存在于{}内部

const 定义常量

常量,常量值不能被覆盖

箭头函数

var test2 = () => {
console.log(2222)
}

1,()省略

当只有一个形参时,()可以省略

2,{}省略

当只有一句代码或者只有返回值时,可以省略
只有返回值的时候,省略return函数的返回值为该条语句的执行结果

3,this指向

this 指向其所在作用域下的 this 值

箭头函数不能构造实例化对象,也不能使用arguments变量

解构赋值

解构赋值可以将属性或者值从对象与数组中取出来

数组结构

let [a, b] = [3, 4];
console.log(a);
console.log(b);
var [b,a] = [a,b]
console.log(a,b)

经过var [b,a] = [a,b],两个值交换,这就是简单的数组解构

对象解构

先找到同名属性,再赋值给相应的变量

const a = {
    userName: "11112",
}
console.info(a["userName"]);

对象简写

当对象的值用变量表示是,如果变量名和属性值一样,对象可以简写

var obj = {
username,password
}

展开运算符

复制

var a = [1,2,3]
var b = [...a]

伪数组转换

function test(){
	var arr = [...arguments]
	console.log(arr)
	}
test(1,2,3,4,5)

...对象

var obj1 = {
	name:"A",
	age:10
	}
var obj1 = {
	name:"B",
	age:20
	}	
var obj = {
	...obj1,
	...obj2
	}

模块化语法

私密不漏

导入的时候不进行导出

重名不怕

导出的时候进行重命名操作

依赖不乱

class

面向对象

面向对象不是一种语法,而是一种编程模式
面向过程:关注着过程的编程模式

关注每一个元素,与其他元素的关系,顺序

面向对象:关注着对象的编程模式

关注的是找到一个对象帮我完成这个事情,我等待结果

创建对象

面向对象首先需要创造对象
JS内置的object构造函数就是用来创造函数的
创建对象的几种方式

字面量

var obj = {
 		name:"aaa"	
 	}

内置构造函数

var obj1 = new Object()
obj1.name = ""

工厂函数

function createObj(){
	var obj = {}
	obj.name = ""
	obj.material = []
	return obj

自定义构造函数

new Object() 

自定义函数会自动创造一个对象
自动返回

继承

构造函数继承

继承属性

functinon Student(name,age,grade){
	Person.apply(this,[name,age])
	this.grade = grade
	}

原型继承

继承方法

Student.prototype = new Person()

组合继承

构造函数继承+原型继承

ES6继承

父类

class Person {
	coonstructor(name,age){
		this.name = name
		this.age = age
	}
	say(){
	console.log(this.name,"hello"
	}
}	

这是父类继承

子类

extend 原型继承

class Student extends Person{
	constructor(name,age,grade){
		super(name,age)
		this.grade = grade
		}
	}

	say(){
	super.say()
	console.log(this.name,"hello")
	}
}
	var obj = new Student("",10,20)
	console.log(obj)
	obj.say()

前后端交互

<form action = "">
	<input type="text" name="" id="">
	<input type="password" name="">

传给后端的方法类似于从外部引入文件,通过form传给后端

AJAX

ajax是 javascript and XML

创建XHR new XMLHttpRequest

var xhr = new XMLHttpRequest()
console.log(xhr)

配置open(请求方式,请求地址,是否异步)

localhost本机域名
baidu.com 域名:15007414_3_

send

xhr.send()

接受数据,注册一个事件

xhr.onreadystatechange = function(){
if(xhr.readyState===4 && xhr.status ===200){
console.log("数据解析完成",xhr,responseText)
document.write(xhr.responseText)
}else if(xhr.readyState===4 && xhr.status ===404){console.error("未发现此页面")
}

AJAX同步异步

var xhr = new XMLHttpRequest()
xhr.open("GET","1.json",true)
xhr.send()
xhr.onload = function(){
	if(xhr.status===200){
	console.log(xhr.responseText)
	}
}

其中,在xhr.open("GET","1.json",true)中,ture表示异步请求,false表示同步请求
异步效率更高,也不会阻塞后面代码的执行,因此一般都使用异步执行(true)

请求方式

AJAX

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

json-server 是基于一个JSON文件可以创建很多的后端模拟接口

get请求传参

需要把要传的数据写成参数的形式

xmlhttp.open("GET", ""+str , true);
            xmlhttp.send();
            xmlhttp.onreadystatechange = callback;

post传参

app.post('/post', (req, res) =>{
    res.send(req.body);
})

post需要表面传输的数据类型

AJAX的封装

例如

 getAjax('get','',function(res){
                let arr=[];
                for(let i=0;i<res.length;i++){
                    narr.push('\n'+(i+1)+'.'+res[i].text)
                    console.log(res[i].text);
                    text.innerHTML=narr;
                }

或者

ajax({
	url:"",
	data:{
		uesrname:"",
	},
	method:"PATCH",
	headers:{
		"content-type":"application/json"
		},

回调函数

当一个回调函数嵌套一个回调函数时,就会出现一个嵌套结构,

例如:
当发送三个ajax请求时
第一个正常发送
第二个需要请求第一个请求中的结果的某一个值作为参数
第三个需要请求第二个请求中的结果的某一个值作为参数

连续的回调问题会增加视觉负担,当嵌套多了就会出现回调地狱的情况,this指向也容易混乱

promise解决回调地狱问题

promise是一个ES6的语法
是专门用来解决异步回调地狱的问题

var q = new Promise(function(){
// 这里q是promise对象
	setTimeout(()=>{
// 成功兑现承诺
// 失败拒绝承诺
	reject("error")
	},2000)})
	q.then(function(res){
	console.log("success",res)
	//兑现承诺则此函数执行
	}).catch(function(err){
	console.log("fail",err)
	//拒绝承诺则此函数执行

async和await语法

await

await 同步代码/promise对象
await 后面接 Promise

var res = await pajax({
	url :"",
	data:{
	author:""
	}
})

async

async function(){
  return 100
}

fetch

XMLHHttpRequest 是一个设计粗糙的API,配置和调用非常混乱,基于事件的异步模型写起来并不友好

在低版本的浏览器中,如果不兼容,可以引用https://github.com/github/fetch/blob/master/fetch.js

而fetch提供了一个获取资源的接口

fetch基于promise设计,返回promise对象,可以去嗲传统xhr的不合理写法
其中

fetch使用promise不使用回调函数,因此更简洁
fetch使用模块化设计,接口在多个对象上面。
fetch可以分块读取,提升网络性能,减少内存占用

获取JSON数据

fetch(url)
  .then(response => response.json()) 
  .then(json => console.log(json))
  .catch(err => console.log('Request Failed', err)); 

fetch接受的是Stream对象
response.json()可以将内容转化为JSON对象

cookie 本地存储

介绍

cookie可以将服务器的资源存储在本地磁盘

web在http响应头中添加一个键值给浏览器,浏览器将其放在客户端的本地磁盘,往后访问该网站时,都会在请求头中带着该网站的cookie值

分类

会话级cookie

退出浏览器即删除

持久cookie

设置该cookie的周期setMaxAge,并给其秒的单位时间

Cookie[] cookies = req.getCookies();
cookie.getName()
cookie.getValue()
new Cookie("lastLoginTime", System.currentTimeMillis()+""); cookie
cookie.setMaxAge(24*60*60); 
resp.addCookie(cookie);
删除cookie的方法:

不设置有效期,关闭即失效
创建一个相同名字的cookie,有效期为0

JSONP

jsonp可以从别的网页域名获取资料。

跨域读取数据

同源策略:同域名 同端口号 同协议
不符合同源策略,浏览器为了安全,会阻止请求

解决:
1,cors 由后端设置 ,Acess-Control-Allow-Origin:*
2, jsonp:前后端必须协作

jsonp原理:动态创建script标签,src属性指向没有跨域限制,指向一个接口,接口返回的格式一定是****() 函数表达式

后端接口必须是**()形式,需要后端配合
jsonp

(1)onload删除script标签
(2)只能get请求,不能post,put,delete

闭包

函数内部返回一个函数,被外界引用
这个内部函数就不会被销毁回收
内部函数所用到的外部函数的变量也不会被销毁

function outer(){
	var name = "xiaoming"
	return function(){
	return name +"11111"
	}
}

优点:让临时变量永存
缺点:内存泄漏

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值