JS学习108-161

正则表达式

提交表单时经行校验

1.字面量（必须完全一样）

var reg = /abc/

2.内置构造函数

var reg = new RegExp("abc")

3.进行测试
(true/false)

console.log(reg.text(“abc”))

元字符

\d 一位数字（0-9）//至少两位就是/\d\d/

var reg = /\d/
//在这个字符串里包含数字//
console.log(reg.text(“123”))=>true

\D 一位非数字（/\Dk\D/）

var reg = /\D/

/s 一位空白内容（空格、缩进、换行“/n”）

var reg = /\s/

/S 非空白内容

var reg = /\S/

/w 字母、数字、下划线

var reg = /\w/

/W 非字母、数字、下划线

var reg = /\W/

. 任意内容（换行不算/n）

var reg = /./

\ 转义字符

var reg = /\d\.\d/ console.log(reg.test("1.2"))==>true
console.log(reg.test("1a2"))==>false

边界符

"^"开头

//开头为字母
var reg = /^\d/

"$"结尾

var reg = /\d$/

例：

//开头结尾为a,c中间为字母
var reg = /^a\dc$/

限定符（范围）
格式：

var reg = /\d+/

* 0~多次
+ 1~多次
? 0~1次
{n} 指定次数
{n,} >=n
{n,m} 范围==>[n,m]

注：

//只能说明c需出现两次
var reg = /abc{2}/

特殊符号 p112

( )整体

可以实现单独捕获

//需出现abc两次
var reg = /^(abc){2}$/

| 或

var reg = /a|b/

[ ] 代表1个，含有其中一个

//[a-zA-Z0-9_]
var reg = /[asdf]/

捕获–exec

test()
exec()捕获片段

只能截取第一个片段

标识符 g i
g:全局标识符
i:忽略大小写

var reg = /\d{4}-\d{1,2}-\d{1,2}/g

正则表达式的两大特性p114

1.惰性：通过全局标识符解决
2.贪婪：==>非贪婪 var reg = /\{1,4}?/加问号，取最少

正则与字符串与案例：密码验证

this指向

this可以用在构造函数之中，表示实例对象。除此之外，this还可以用在别的场合。但不管是什么场合，this都有一个共同点：它总是返回一个对象。简单说，this就是属性或方法“当前”所在的对象。（被谁调用指向谁）
例：

var person = {name: '张三',describe: function () {return '姓名：'+ this.name;}
};person.describe()
// "姓名：张三"

上面代码中，this.name表示name属性所在的那个对象。由于this.name是在describe方法中调用，而describe方法所在的当前对象是person，因此this指向person，this.name就是person.name。

由于对象的属性可以赋给另一个对象，所以属性所在的当前对象是可变的，即this的指向是可变的。

var A = {name: '张三',describe: function () {return '姓名：'+ this.name;}
};var B = {name: '李四'
};B.describe = A.describe;
B.describe()

上面代码中，A.describe属性被赋给B，于是B.describe就表示describe方法所在的当前对象是B，所以this.name就指向B.name。

绑定this的方法

this的动态切换，固然为 JavaScript 创造了巨大的灵活性，但也使得编程变得困难和模糊。有时，需要把this固定下来，避免出现意想不到的情况。JavaScript 提供了call、apply、bind这三个方法，来切换/固定this的指向。

var obj = {};var f = function () {return this;
};f() === window // true
f.call(obj) === obj // true

上面代码中，全局环境运行函数f时，this指向全局环境（浏览器为window对象）；call方法可以改变this的指向，指定this指向对象obj，然后在对象obj的作用域中运行函数f。

call方法的参数，应该是一个对象。如果参数为空、null和undefined，则默认传入全局对象。

var n = 123;
var obj = { n: 456 };function a() {console.log(this.n);
}a.call() // 123
a.call(null) // 123
a.call(undefined) // 123
a.call(window) // 123
a.call(obj) // 456

上面代码中，a函数中的this关键字，如果指向全局对象，返回结果为123。如果使用call方法将this关键字指向obj对象，返回结果为456。可以看到，如果call方法没有参数，或者参数为null或undefined，则等同于指向全局对象。

如果call方法的参数是一个原始值，那么这个原始值会自动转成对应的包装对象，然后传入call方法。

ES6

**#### 定义变量

let变量
语法：

 let a = 100

与var的不同之处：
1.需先定义
2.可检查变量重名
3.块级作用域，避免和外面变量互相打扰

const常量
必须赋值

const obj = {name:"kerwin"
}
//同一把钥匙，门里内容变了
obj.name = "mm"
//钥匙变了
obj = {name:"mm"}

let块级作用域案例P120

//这里定义的i只在大括号中生效
for(let i=0;i<5;i++){console.log(i)
}

箭头函数P121

语法：

 var test = () =>{console.log()}

1.小括号可以省略：只有一个行参时
2.大括号省略：只有一句代码或只有返回值时
3.没有arguements（arguments是保存着所有实参的伪数组，所以不用写形参也可以。）
4.没有this，箭头函数this是父级作用域的
解决方法：## 标题
临时将this赋值给that

解构赋值

快速从对象和数组中获得里面的成员
(多维数组同理）

var arr =["chris","becky"]
//arr[arr.lengh-1]
let[x,y] = arr
console.log(x,y)

交换位子

var a = 10
var b = 20var[b,a] = [a,b]

对象

var obj = {name:" ",
age:100
}
Let {name,age}=obj
document.write(name)

对象简写
对象前面的key值和后面的一样则可以省略

展开运算符

...

把数组展开
复制
-
实参
-
行参
伪数组

模块化语法

1.默认导出语法 export default 默认导出的成员：

// 当前模块 为 export1.js
//定义私有成员 a 和 c
let a = 10
let c = 20 // 外界访问不到 变量 d 因为其没有被 暴露出去
let d = 30
function show(){}// 将 本模块中的私有成员 暴露出去，供其他模块使用
export default  {a,c,show
}

2.默认导入语法 import 接收名称 from ‘模块接收符’：

<script type="module">
// 导入模块成员
import export1 from './export1.js'console.log(export1)//打印输出结果为
// { a: 10, c: 20, show: [function show] }

注意：

在每一个模块中只允许使用唯一的一次 export default ，否则会报错在一个模块中如果没有向外 export
default，则导入该模块时默认输出 {}

面向对象–>自定义构造函数

典型的面向对象编程语言（比如 C++ 和 Java），都有“类”（class）这个概念。
但是，JavaScript 语言的对象体系，不是基于“类”的，而是基于构造函数（constructor）和原型链（prototype）。

JavaScript 语言使用构造函数（constructor）作为对象的模板。所谓”构造函数”，就是专门用来生成实例对象的函数。它就是对象的模板，描述实例对象的基本结构。一个构造函数，可以生成多个实例对象，这些实例对象都有相同的结构。

function creatObj(name){this.name = namethis.material = []this.cook = function(){}}
var obj1 = new createObj("")

注意：

为了与普通函数区别，构造函数名字的第一个字母通常大写。
构造函数不写return
new过程==实例化这个过程，此时实例对象已经生成，此时this指向实例化后的对象

class p131

语法：

//构造器函数
class CreateObj{constructor(name){this.name = name
}say（）{console.log(this.name,"hello")
}}

面向对象：继承

ajax

优势：
不需要插件的支持
用户体验良好
减轻服务端和宽带的负担
但是：搜索引擎支持不够

1.创建xhr = new XMLHttpRequest()
2.配置 open（请求方式，请求地址，是否异步xhr.open("GET","hppt://......txt:)
3.接受数据，注册一个事件:xhr.onreadystartechange = function（）{}

状态码

readyStateChange

ajax中的一个事件
其专门用来监听ajax对象的readystate值改变的行为
实验我们就在这个事件中来监听ajax的rs是不是到4了

ajax同步异步
true：异步请求
false：同步请求

请求方式

get：（偏向于）获取数据xhr.open('get','/getList?num=12')
post：提交数据xhr.open("post","/submitData"); xhr.send('{"name":"huazhu","age":"7"}')
put：更新
delete：删除
patch：部分修改
head、potions、connect
下载noodjs

ajax封装

method(必选) 请求类型 get 和
post url(必选) 请求的url地址
相同域名下的页面（此函数不支持跨域请求）
data(必选) 请求协带的数据以js对象的形式定义，如：{name:‘张三’}
callback(必选) 回调函数,可接收一个参数，这个参数就是服务器响应的数据
type(可选) 指定服务器响应的数据类型（可选值：json,xml,text），如果是json模式，则使用json解析数据，默认为text普通字符串

例：

 ajax({//地址url:"http://....",//结构方式method:"GET",async:true,//必须传的是对象的格式data:{username:"chris"password:"123"},headers:{}//回调函数success:function(res){console.log(res)},error:function(err){console.log(err)}})

回调地狱

当一个回调函数嵌套一个回调韩式的时候，就会出现一个嵌套结构，当嵌套结构多了就会出现回调地狱的情况
解决方法：
1.promise
它有三种状态：等待中（pending）完成了（resolved）拒绝了（rejected），当他觉得你的要求可以通过便会返回给你resolved，若是你的要求达不到它便会返回给你rejected拒绝你。

封装之后

 let parkplay = (who) =>{return new Promise((resolve,reject)=>{resolve("去游乐园玩啦！")})}parkplay("me").then(res =>{//去玩游乐圆玩先买票return Buytickets(res)}).then(res=>{//买票入园后游乐设施前排队return queue(res)}).then(res=>{//开始玩啦return playing(res)})

简洁易修改
2.async和await（ES7语法）
可以把异步代码写的像同步代码

let parkplay = (who) =>{return new Promise((resolve,reject)=>{resolve("去游乐园玩啦！")})}(async()=>{let parkplay_result = await parkplay("me");let buytickets_result = await buytickets(parkplay_result);let queue_result = await queue(buytickets_result);let playing_result = await playing(queue_result)})()

promise(async和await)由于可以链式调用对于开发这种多层嵌套的代码很方便，降低了代码的维护难度等等。

fetch

XMLHpptRequest设计粗糙，而且基于事件的异步模型写起来不友好且兼容性不好

fetch语法：

fetch(url).then(...).catch(...)

url参数是必须填写，option可选，设置fetch调用时的Request对象，如method、headers等
比较常用的Request对象有：

method - 支持 GET, POST, PUT, DELETE, HEAD
url - 请求的 URL
headers - 对应的 Headers 对象
body - 请求参数（JSON.stringify 过的字符串或’name=jim\u0026age=22’ 格式)

注意事项：

fetch()使用 Promise，不使用回调函数，因此大大简化了写法，写起来更简洁。
fetch()采用模块化设计，API分散在多个对象上（Response 对象、Request 对象、Headers 对象），更合理一些；相比之下，XMLHttpRequest的 API 设计并不是很好，输入、输出、状态都在同一个接口管理，容易写出非常混乱的代码。
fetch()通过数据流（Stream对象）处理数据，可以分块读取，有利于提高网站性能表现，减少内存占用，对于请求大文件或者网速慢的场景相当有用。

cookie本地存储

cookie其实就是一些数据信息，类型为“小型文本文件”，存储于电脑上的文本文件中。游览器保存了我们的cookie，里面记录了一些信息，当然，这些cookie是服务器创建后返回给游览器的。游览器只进行了保存。

cookie中常用属性的解释:

Name：这个是cookie的名字
Value：这个是cooke的值
Path：这个定义了Web站点上可以访问该Cookie的目录
Expires：这个值表示cookie的过期时间，也就是有效值，cookie在这个值之前都有效。
Size：这个表示cookie的大小

注意：游览器只会携带在当前请求的url中包含了该cookie中path值的cookie)，并且是以key：value的形式进行表示的。多个cookie用；进行隔开。

cookie的生存期:
默认情况，cookie是临时存在的。在一个浏览器窗口打开时，可以设置cookie，只要该浏览器窗口没有关闭，cookie就一直有效，而一旦浏览器窗口关闭后，cookie也就随之消失。
如果想要cookie在浏览器窗口之后还能继续使用，就需要为cookie设置一个生存期。

设置生存时间：

document.cookie =“名称=值；expires=”+ 时间；（时间必须是一个字符串）
var d= new Date();
d.setHours(d.getHours() + (24 * 30)); //保存一个月
document.cookie=“visited=yes; expires=” + d.toUTCString();//d.toUTCString();将时间转化字符串

jsonp

一种跨域通信的手段，json的一种”使用模式，可以让网页从别的域名那获取资料。

同源策略：同域名，同端口号，同协议当其中一个不满足时，我们的请求即会发生跨域问题。

原理：动态创建script标签，src属性指向没有跨域限制，首先是利用script标签的src属性来实现跨域。
通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。
1）、设定一个script标签

<script src="http://jsonp.js?callback=xxx"></script>

2）、callback定义了一个函数名，而远程服务端通过调用指定的函数并传入参数来实现传递参数，将fn(response)传递回客户端

$callback = !empty($_GET['callback']) ? $_GET['callback'] : 'callback';
echo $callback.'(.json_encode($data).)';

3）、客户端接收到返回的js脚本，开始解析和执行fn(response)

ps：由于使用script标签的src属性，因此只支持get方法

闭包

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

优点：让临时变量永驻内存
缺点：内存泄露

for (var i = 1; i <= 5; i++) {;(function(j) {setTimeout(function timer() {console.log(j)}, j * 1000)})(i)
}

PS：
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

JS学习108-161相关推荐

WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用本文所使用到的demo演示: 高光贴图Demo演示反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理计算机图形学 ...
ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...
js进阶 10-8 伪类选择器有哪几类（自己不用，永远不是自己的）
js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...
backbone.js学习笔记
backbone.js学习笔记之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还 ...
程序员的高速学习法——以JS学习为例，进行图解
近期一直在忙着学习,感觉做总结的时间太少了,听起来挺好玩儿的,就像<倾城之恋>里面.范柳原说:那时候都忙着谈恋爱了哪里有时间恋爱. 学习和总结也是一样.不能一直忙着学习而导致自己没有时间 ...
node.js学习笔记
# node.js学习笔记标签(空格分隔): node.js---## 一内置模块学习 ### 1. http 模块 ``` //1 导入http模块 const http =require('ht ...
node.js学习笔记14—微型社交网站
node.js学习笔记14-微型社交网站 1.功能分析微博是以用户为中心,因此需要有注册和登录功能. 微博最核心的功能是信息的发表,这个功能包括许多方面,包括:数据库访问,前端显示等. 一个完整的微 ...
js 学习笔记（一）
前言网上其实已经有非常多的js学习资料了,但是每个人都有自己的基础,所以往往是有的人讲的深一点,有的人说的浅一点. 就我自身而言,想要匹配自己水平的找些资料,往往是十分的零碎,所以可能今天看到的文章 ...
html 流程控制,HTML5独家分享：原生JS学习笔记2——程序流程控制
当当当当 .....楼主又来了!新一期的js学习笔记2--程序流程控制更新了! 想一键获取全部js学习笔记的可以给楼主留言哦! js中的程序控制语句常见的程序有三种执行结构: 1.顺序结构 2.分支 ...
基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...