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"
}
}
优点:让临时变量永存
缺点:内存泄漏