JavaScript3

原创已于 2023-06-01 18:42:37 修改 · 320 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #正则表达式

于 2023-01-20 21:54:51 首次发布

文章详细介绍了JavaScript中的正则表达式用法，包括匹配模式和方法；this的关键字指向规则以及改变指向的方法如call、apply和bind；ES6的新特性，如let、const、箭头函数和解构赋值；Ajax的基本概念和异步处理，以及Promise和async/await用于解决回调问题。

JavaScript3

（一）、正则表达式

在这里插入图片描述

reg.test（）验证并返回true和false
exec可以截取符合的内容
在这里插入图片描述

\d 一位数字
\D 一位非数字
\s 一位空白（空格缩进换行）
\S 一位非空白
\w 一位字母数字下划线
\W 一位非字母数字下划线
. 任意内容（换行符不算）
\ 转义字符

边界符：
^开头限制
$ 结尾限制

限定符号：

*0-多次
+1-多次
? 0-1次
{n} 指定次数
{n,}大于等于n次
{n,m}大于等于n次，小于等于m次

特殊符号：
（）表示是一个整体
| 或
[] 代表一个
[a-zA-Z0-9_] 等价 \w

捕获exec方法
exec() 捕获片段只能截取第一个符合的片段如果未捕获则返回空
示例：
var datestr=“time is 2029-01-01 12:20:20”
var reg=/\d{4}-\d{1,2}-\d{1,2}/
var newdatestr=reg.exec(datestr)
console.log(newdatestr[0].split(“-”).join(“/”)) 结果为2029/01/01

标识符 g i
g是全局标识符在正则表达式加小括号时会单独捕获，输出为一个数组
i 可以忽略大小写

正则表达式两大特性
1.懒惰性（从头开始执行），使用全局标识符解决
2.贪婪性
3.非贪婪?

字符串和正则
例：
var str=“adearfa”
var newstr=str.replace(/a/g,"") 可以将所有的a替换成

search查找索引更加宽泛

match 捕获内容可以将多个内容捕获

（二）、this指向

this 关键字
谁调用我，this就指向谁（不包括es6 箭头函数）

改变this指向

call方法
.call(传一个参数) 执行函数，并改变this执行为函数的第一个参数。支持多个参数

apply方法
.apply(传一个参数) 两个参数，第二个参数是数组可以传入函数

bind方法改变this指向为函数的第一个参数，不会自动指向函数，返回一个新的函数
var fun1=obj1.getName.bind(obj2)
fun1()调用执行

（三）、es6

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

const 关键字定义常量无法改变

tab选项卡可以直接使用let 不用再创建新的变量储存当前点击的元素

es6箭头函数

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

特点
1.()可以省略只有一个形参可以省略
2.{}可以省略，只有一句代码或者只有返回值的时候返回对象时，可以省略但要加小括号
3.没有arguments 这个可以在没有形参时，拿到传进来的参数，是一个伪数组形式
4.箭头函数的this是父级作用域的
函数的默认参数，先定义形参的值

es6的解构赋值
快速的从对象和数组中获取里面的成员

var arr=[“ada”,“dada”,“wras”]
Let [x,y,z]=arr
console.log(x,y,z)

便捷交换两个值
var a=10
var b=20
var[b,a]=[a,b]
console.log(a,b)

多维度数组，便捷获取数组的值
var arr2=[1,2,[3,4,[5]]]
var [a,b,[c,v,[r]]]=arr2
console.log®

获取对象的值实现快捷获取
Let {name,age,location}=obj
doucment.write(name)
若重名则添加:一个新名字，值会被赋到新名字里

复杂对象获取
var obj2={
    name:"123",
    age:100,
    location:{
        province:"yuq"
        city:"weew"
    },
    hobby:[11,2,3]
}

var {
    name,
    age,
    location:{
        province,
        city,
    },
    hobby:[a,b,c]
}=obj2

es6的对象简写
k值和后面变量一样可以省略

es6的展开运算符
…展开

var a=[1,2,3]
var b=[4,5,6]
var c=[…a,…b] 便捷合并两个数组

…赋值
var a=[1,2,3]
var b=[…a]
b[0]=“kerwin”

形参
var test=(…arr)=>{
console.log(arr)
}
test(1,2,3,4,5) 可以代替arguments
普通函数也可以同样使用

实参
test(…arr) 直接传数组展开的值

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

对象合并
var obj={
…obj1,
…obj2
}
若有重名的k值，后面会覆盖前面的

es6的模块化语法
1.私密不漏
2.重名不怕
3.依赖不乱

导出
export{}将想要暴露的函数写在里面
使用格式：在script的标签里写type=“module”
import{}from’./module/A.js’ 导入

用as重名名同名函数再进行调用

依赖使用时，直接用import进行导入
export default默认导出

（四）、面向对象

面向对象是一种编程模式，是一个思想

创建对象的方式

工厂函数
funtion createObj(name){
var obj={
obj.name=name
}
return obj
}
var obj1=createObj(“你好”)

自定义构造函数
funtion createObj(name){
自动创建对象
this.name=name
自动返回
}
var obj1=new createObj() 构造函数

注意问题
1.首字母大写
2.构造函数不写return
3.可以当普通函数用

new过程==实例化过程
实例对象

面向对象原型
.prototype 共享内存

对象.proto===构造函数的原型
原型链构造函数上面还有Object
原型链顶点：object / null

es6的class

class CreateObj{
构造器函数
constructor(name){
this.name=name
}
可以将原型挂在里面
}

面向对象继承

构造函数继承–继承属性

funtion Person(name,age){}
funtion Student(){
Person.call(this,name,age)
}

原型继承
Student.prototype=new Person()

Student.prototype.printGrade=funtion(){}
基础增加方法

覆盖方法（既再写一次覆盖）

增强方法
再取一个名字然后调用原函数，再写新的代码

组合继承
原型加上原型继承

es6的继承

class Student extends Person()

super() 继承属性

super.say() 覆盖

（五）、Ajax

Ajax的同步异步
xhr.open(“GET”,“1.json”,true)
true表示异步请求
false表示同步请求

Ajax请求方式
get 偏向获取数
post 偏向提交数据
提交格式支持 name=kerwin&age=100 {“name”:“kerwin”}

xhr.setRequsetHeader(“Content-Type”,“application/x-www-form-urlencoded”) 代表第一种提交格式
xhr.setRequsetHeader(“Content-Type”,"application/json)第二种提交方式
put 偏向更新（全部）
delete 偏向删除数据
patch 偏向部分修改