JavaScript3

（一）、正则表达式
（二）、this指向
（三）、es6
（四）、面向对象
（五）、Ajax
（六）、promise
（七）、async和await
（八）、fetch
（九）、cookie
（十）、jsonp
（十一）、闭包

（一）、正则表达式

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 偏向部分修改

Ajax封装

try尝试解析数据
try{
let result=JSON.parse(xhr.responseText)
success(result)
}catch (err){
error(“失败”)
}

回调地狱问题
回调函数嵌套过多
难以维护
q.js Promise解决回调地狱

（六）、promise

Promise的基础用法
是构造函数
var q = new Promise(funtion(resolve,reject){
里面添加异步
resolve()执行第一个
reject()执行第二个
})
q是promise的对象

pending 执行中
fulfilled 兑现承诺状态
reject 决绝承诺状态

q.then(funtion(){
兑现承诺，函数执行
}).catch(funtion(){
拒绝承诺，函数执行
})

.then(res=>{
return pajax解决回调地狱
})

（七）、async和await

async function test(){}
await 同步代码/promise对象只影响内部
使用try捕获内部错误

（八）、fetch

fetch(“http://localhost:3000/users”).then(res=>{
return res.json()

})
在第一个then判断ok的值，正确执行第二个then，如果false执行catch错误。
return Promise.reject()

（九）、cookie

http协议无状态

cookie 本地存储
sessionID 钥匙

存cookie
document.cookie=“uesername=kerwin” 信息要一条一条的存
;path= 设置路径
外层不可以访问内层，内层可以访问外层
expires= 设置过期时间

获取
getCookie

修改
同名覆盖

删除
将过期时间调早

（十）、jsonp

同源策略：同域名同端口号同协议
不符合的，浏览器会阻止请求

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

注意：
1.后端接口形式必须**()
2.onload 删除scrip标签
3.只能get请求

（十一）、闭包

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

优点：临时变量永存
缺点：内存泄漏 func=null

JavaScript3相关推荐

JavaScript3基础——运算符和类型转换
JavaScript3基础--运算符和类型转换 JavaScript运算符 JavaScript运算符也称操作符.其作用是对目标数据进行运算操作. 基本数学运算符 + - * ...
08.15 javascript3 分支结构条件语句：单向分支双向分支嵌套分支多项分支循环结构 while dowhile for 跳转语句其他语句...
# 分支结构条件语句 ### 单向分支 if (){ } ### 双向分支 if () { } else { ...
通过svg方式绘制图形（SimpleMarkerSymbol）并打印（ArcGIS API for JavaScript3系列）
打印前效果: <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" co ...
java js 转换_[Java教程]javascript 类型转换。
[Java教程]javascript 类型转换. 0 2016-10-11 18:00:06 目录: 1 : 伪对象 2 : 转换为字符串 3 : 数字转字符串 4 : 转换为数字 5 : 转换为Bo ...
【Java Web前端开发】JavaScript基础
文章目录 JavaScript: JavaScript: * 概念: 一门客户端脚本语言* 运行在客户端浏览器中的.每一个浏览器都有JavaScript的解析引擎* 脚本语言:不需要编译,直接就可以被 ...
python是什么语言、即变量不需要显示声明数据类型-python变量声明及简单数据类型...
以上代码将打印出两个结果,按照执行先后顺序,第一个print打印的是在他之前的变量值,如果这里不打印,在代码的最后只打印一次,那么它将始终打印最新记录的变量值,其他不打印因此上在python程序中可 ...
内网环境下预览ArcGIS地图服务
内网环境下预览ArcGIS地图服务文章目录内网环境下预览ArcGIS地图服务 1.背景 2.解决方案 2.1下载ArcGIS API for JavaScript 2.2本地部署ArcGIS AP ...
系统数据据结库设计理论mysql_基于JavaEE的报刊征订管理系统_JSP网站设计_MySQL数据库设计...
目录摘要I ABSTRACTII 第一章绪论1 1.1课题背景1 1.2目的和意义1 1.3开发工具及技术1 1.3.1开发工具1 1.3.2 JSP技术2 1.3.3 JavaScrip ...
JavaScript基础笔记
今日内容 1. JavaScript基础 JavaScript: * 概念: 一门客户端脚本语言* 运行在客户端浏览器中的.每一个浏览器都有JavaScript的解析引擎* 脚本语言:不需要编译,直接 ...

JavaScript3

JavaScript3

（一）、正则表达式

（二）、this指向

（三）、es6

（四）、面向对象

（五）、Ajax

（六）、promise

（七）、async和await

（八）、fetch

（九）、cookie

（十）、jsonp

（十一）、闭包

JavaScript3相关推荐

最新文章

热门文章