第三周js笔记

用户2411510311749
151 阅读17分钟

js核心 第三周

周一

1：js（应用类型）：11个

1：string（字符串） 2：Number（数字） 3：Boolean(布尔) 4：Array（数组） 5：Function（函数） 6：Date（日期） 7：Math（数学） 8：RegEXP(正则) 9：Error（错误） 10：Object（面向对象） Global（全局对象） 其中 string Nubmer Boolean：具有包装类型

包装类型

专门封装原始类型的值，将原始类型悄悄的变成引用类型的对象（属性和方法）

why ：前辈们觉得比如字符串经常会被我们拿来做一些操作，为了方便我们，提供了包装类型，把字符串变成一个对象，提供了我们一些操作字符串的属性和方法。本身原始类型的值，不带任何属性和方法，意味着不能使用，去做操作的

何时使用：只要你试图使用，去操作原始类型的值得时候，包装类型就会悄悄出现。

何时释放：方法一旦调用结束，包装类型就会自动释放

为什么undefined和null不能使用？

因为他们两没有提供过包装类型（没有任何的属性和方法）

Global（全局对象）

1：保存着全局变量和全局函数，只不过浏览器端/客户端/前端global被window代替的

2：唯独window对象可以省略不写

2：字符串API

1:转义字符：

1：何时使用：在字符串中出现和程序冲突的字符 \

2：具有特殊功能：\n换行 \t制表符 ：敲tab键带来的一个打空格

3:可以书写unicode号代表一个字 \u 举例：汉字的第一个字 \u4e00 汉字最后一个字：\u9fa5

2：英文转大小写

（统一的）将字符串转为大写或者小写，再比较，忽略大小写（验证码时使用），

固定验证码，两者统一修改大写或者小写， 随机验证码

大写：var upper=str.toUpperCase（）

小写：var lower=str.toLowerCase（）

3：获取字符串中某个字符：

str.charAt(i);---str[i]

4：获取字符串中某个字符的ascii码

var ascii=str.charCodeAt(i);

通过ascii码转回原文：

原文=string.fromCharCode（ascii）

5：检索字符串：检查索引/下标

何时：判断有没有，不重复。

var i=str.indexof（“关键字”，starti）

特殊： 1：starti可以省略，如果省略默认从0位置开始查找

2：返回：如果找到了，返回关键字的么一个字符的下标；如果没找到返回的是-1，

重点：我们其实根本不关心下标为几，我们只关心下标为不为-1，为-1说明没有，如果不为-1说明存在.

6：拼接字符串：

var newstr=str.concat（str1，str2） 不如加运算

7：截取字符串

1：var substr=str.slie（starti，endi+1）；字符串和数组都可以使用

2：var substr=str.substring（starti，endi+1）//几乎和slice一致，但是不如slice，因为不支持负数参数

3：var substr=str.substr（starti，n）//截取的个数，不必考虑含头不含尾

8：替换字符串

var newStr=str.replace("关键字”,"新内容");\

正则：var newStr=str.replace("“固定关键字"/RegExp,"新内容“): 可以替换所有关键字

9：切割/分割字符串

var arr=str.split（“自定义切割符”）

特殊：切割是可以自定义的，切割后会返回一个数组数组中不在包含切割符，如果传入的切割符“”空字符，每一个字符都会被切散.

10：随机数公式

var r=parselnt（Math.random（）*arr.length）

11：js创建页面元素并且渲染上DOM树

1:创建空标签：

var 新元素=document.createElement（“标签名”）

2：为此标签设置必要的属性和事件

新元素.属性名=“属性值”

新元素.on事件名=function（）{操作}

3：把新元素上DOM树 ，父元素.appendChild（新标签）

12：焦点事件

失去焦点事件，只有input能用

v.onblur=function（）{操作}

周二

1：正则表达式

什么是正则：定义字符串中(字符出现的规则)的表达式

何时使用：切割、替换、验证

如何使用： 1：最简单的正则：

关键字原文但是写法和以前字符串不同，“需要替换的字符”===> /替换的字符 /ig i：忽略大小写 g：全部，替换话默认替换第一个匹配到的关键字

2：备选字符集

一个备选字符集：规定一位字符可能出现的情况

何时使用：只有关键字有多重情况的时候

如何使用：/[备选字符集]/

强调：1：一个中括号，只能管一个字 2：问题：正则默认只要满足后，就不管后续操作，后续用户就可以随意

解决 （只要是做验证），我们肯定希望用户完全按照我们的规则来，必须写/^ [备选字符集]/前加后加/前加^ 后加的意思是要求用户从头到尾完全匹配 特殊如果备选字符集中有部分unicode号是连续的，则可以yoga-省略掉中间的部分

[\u4e00-\u9fa5]

一位数字：[0-9]

一位字母：[A-Zz-a]

一位数字、字母、下划线[0-9A-Za-z]

3：预定义字符集

前辈们提供定义的一些常用字符集

一个数字：\d

一个数字，字母，下划线 \w

一位空白字符：\s

问题预定义字符集是固定的，不够灵活，开发中优先使用预定义字符集，如果满足不了，再用备选字符集补充，

强调不管是备选字符集还是预定义字符集，一个都只管一位

4：量词

规定一个字符集出现的次数

如何让使用 1：有明确数量

字符集/^\d{2，4}$/:前边相邻的数字0-9，最少出现2次，最多出现4次

/^\d{2，}$/ ：前边相邻的数字0-9，最少出现2次，多了不限制

/^\d{2}$/ ：前边相邻的数字0-9，必须出现2次

2：没有明确数量

字符集? :前边相邻的字符集，可有可无，最多一次

字符集* :前边相邻的字符集，可有可无，多了不限

字符集+ :前边相邻的字符集，至少—次，多了不限

5：指定匹配位置

^ : 以xxxxx开头

$ :以xxxx结尾

特殊:如果同时使用了，前加^后加$，从头到尾完全匹配-只要是做验证，必须这么写

6：选择和分组

选择：可以在多个条件中选择一个

语法：规则1|规则2

分组：

1：选择和分组一般来说都是需要搭配使用的 添加子规则

语法：（规则1|规则2）

7：预判

目的：密码强度

/^$/

8：事件

var reg=/^(?![0-9]+)[0−9A−Za−z]4)[0-9A-Za-z]{4}/ (?![0-9]+$)：不能全有数字组成

var reg=/^(?![A-Za-z]+)[0−9A−Za−z]4)[0-9A-Za-z]{4}/ (?![A-Za-z]+$)：不能全由大写组成，不能全由小写组成，也不能由大写和小写组成:

9：字符串支持正则的API

1:切割：

var arr=strspit（“固定切割符”/RegExp）

2：替换

1：基本替换法

str.relace（/正则表达式/gi，“新内容”）

注意:替换时，不要前加^后加$，我们不需要完全匹配，只需要找到关键字做替换而已

2：高进替换法

str=["我草"，“我曹”，“窝草”，“卧槽”，“握操”]

str=str.relace（/[我 窝 卧 握 ][草 曹 槽 操]+/g，function（key，i，str）{//此处回调函数会自动调用 console.log（key）//当前匹配到的关键字 console.log（i）//当前匹配到的关键字下标 console.log（str）// 原文本身 return key.leng==2？“”：“*”

}）

3格式化:如果替换时，正则中，带有分组，那么你的回调函数会得到更多的形参

var str="500103198602215933"; var reg=/\d{6}(\d{4})(\d{2})(\d{2})\d{4}/; str=str.replace(reg,function(key,a,b,c,i,str){ console.log(key);//正则匹配到的内容 console.log(a);//第一个分组匹配到的内容 console.log(b);//第二个分组匹配到的内容 console.log(c);//第三个分组匹配到的内容 //...你有多少个分组就会多出多少个形参，但是最后两个一定是下标和原文 console.log(i); //下标 console.log(str); //原文本身 return a+"年"+b+"月"+c+"日"; }) console.log(str);

10正则对象

创建： 1：直接量方式：var reg=/正则表达式/后缀

2：构造函数方式：var reg =new RegEXP("正则表达式"，后缀)

方法：验证：var bool=reg.test（“用户输入的东西”）；true (用户输入对了) false (用户输入不通过)

11：事件

input.onfocus =function（）{} 获取焦点事件，用于提示用户

input .onblur= function(){} 失去焦点事件，拿到用户输入的正则进行验证，给出正确的提示文字和样式，以及错误的提示文字和样式

form.onsubmit=function（）{} 提交时会被触发， return false 阻止表单提交

周三

1:Math :专门用于提供数学计算的API

(强调：不能，不需要创建，浏览器自带)

1：上取整:Math.ceil（num）

只要超过，就会取下一个整数。小数位不能超过15位，超过就会失效

2：下取整：Math：floor（mun）

无论超过多少，都会省略小数部分

3：四舍五入取整：Math：round（mun）

（以上三种不建议使用，只能取整，不能指定保留小数位数：建议num.toFixed(//d可以指定保留的小数位数，而且也具有四舍五入的功能，唯一的缺陷：返回的是字符串，建议搭配parseFloat使用)）

4：笔试题 :

封装自定义一个函数，按照任意小数位数四舍五入，返回数字类型，不允许使用toFixed function jw(num,d){ num*=Math.pow(10,d); num=Math.round(num); num/=Math.pow(10,d); return num; } var result=jw(Math.PI,3); console.log(result)

5：乘方和开方

乘方：Math.pow（底数，幂）

开方：Math.sqrt（mun）

6:最大值和最小值

var max/min=Math.max/min(num1,num2,.…); 可以获取出传入的参数种最大或最小的值

问题:不支持传入数组参数，比较数组的最大值和最小值
解决:Math.max/min.apply(Math,arr); 其实apply可以悄悄的打散数组，将每个元素单独传入-ES5带来的一个新特性
其实apply可以借用方法

笔试题:比较出数组中最大值/最小值（2个方法) ----循环或者math

7：绝对值

将负数转为正数 Math.abs(num)

8:随机数

Math.random()在0-1之间去随机小数，可能取到0，但是永远取不到1

在min和max之间随机取整数的公式

parselnt(Math.random()*(max-min+1)+min);

2:Date

封装了一个事件对象，提供了对事件操作的API的对象

何时使用；只要是计算事件，就必须用Date对象

如何使用

1创建 4种

1：创建一个日期对象，获取客户端当前时间， var now =new Date（） 2：创建一个自定义时间 var birth=new Date（"yyy/MM/DD/ hh:mm:ss"） 3:第二种创建自定义时间 var birth=new Date（"yyy，MM-1，DD， hh，mm，ss"） 4：复制一个日期对象 为什么：日期对象的API都是直接修改原日期对象的，无法获得修改之前的日期。

何时使用：同时获得修改前和修改后的两个日期，则应该先复制一份，然后在去修改其中一份 var end =new Date（）starty

2:使用

1：拿着两个日期对象可以相j减，会得到一个毫秒差，通过毫秒差算出想要的一部分

2：API操作：分量：时间单位

年 月 日 星期: FullYear Month Date Day

时 分 秒 毫秒: Hours Minutes Seconds\Milliseconds

 1：每个分量都有一堆getXXX/setXXX

    特殊：Day ：没有set方法

  2：取值范围：

     FullYear：就是当前年份的数字

      Month  ：0-11，计算机中的月份比现实-1

       Date：1-31

       day：0-6  

      Hours：0-23

      Minutes，Seconds：0-59

3：日期看上像一个字符串一样的黑色的，但是日期对象和字符串能用的API不同，日期对象会自动进制 date.setxxx（date.getxxx()+/-n）

3：日期格式化

date.toLocaleString()引会转为一个本地日期格式的字符串，虽然不能自动进制，也不能用日期的API，但是可以用字符串的API了 -----------
垃圾 ：具有兼容性问题，老IE输出的和主流浏览器输出的东西不一样。---------------------
解决:自定义format函数

周四

1：Error对象

1：浏览器自带四种错误类型：

1：syntaxError ---语法错误：一定是符号或者语法草屋错误

2：ReferenceError---引用错误 ：没有创建的东西，就直接使用

3：TypeError----类型错误：使用了不是自己的方法和属性

4：RangeError -----范围错误：只有一个API会遇见：num.toFixed(d) //必须在0-100之间，超过就会报错:

2：错误处理：当程序发生错误是，保证程序不会异常中断的机制

为什么：程序默认只要碰到错误就会停止/闪退 如何处理错误：try...catch 放在try中的代码性能会被降低到最低， 解决： 完全可以用if....else 代替 try ....catch，所有的异常都可提前预判：isNaN 正则 .

3：抛出自定义错误/异常：throw new Error ("自定义文字")

2：function对象

是提前创建好的 ，以后可以反复使用的代码段

js中的函数也是一个对象，函数名其实引用函数对象的变量

1：创建函数有3种：

1：声明方式：声明方式: function函数名(形参列表){函数体;return返回值}-完整的声明提前 2：直接量方式: var函数名=function(形参列表)(函数体;return返回值;}-完整的声明提前 扩展:d1.onclick=function(){} 3、构造函数方式:var 函数名=new Function("形参1"....,"函数体;return返回值;");

强调:无论参数实际是什么类型，创建函数时的每一部分都必须用""包裹

何时使用:如果函数体不是固定的，而是字符串动态拼接

2：重载

相同函数名，根据传入的实参的不同，会自动选择对应的函数执行

为什么:减轻程序员的负担!

问题:JS的语法不支持重载! JS不允许同时存在多个同名函数，如果同时存在，最后一个的函数会覆盖掉之前所有的

解决:在函数内部有一个对象:arguments

什么是arguments对象:函数中，自带的，不需要我们创建的，是一个【类数组】对象

只有3个点是和数组相同的 1、都可以用下标访问某个元素 arguments[i]-传入的某个实参 2、都可以用length获取到长度 arguments.lengt
3.可以遍历拿到每一个元素- for循环\强调:类数组对象不是数组，所有的数组的API，类数组都不能使用
何时使用:1、以后不需要形参，也可以接住所有的实参!
2、变相实现重载:在函数内部判断传入的实参(个数、类型)的不同，执行不同的分支操作

3：匿名函数

创建的函数，没有函数名引用着

何时使用： 如果函数，只会执行—次
为什么:节约内存，匿名函数没有变量引用着，就会自动释放 1、匿名函数自调 如何使用： 例子： 只会执行一次 2、匿名函数回调 :将函数调用时，传入的实参，又是一个匿名函数，不需要我们程序员调用，会由主函数自动执行 arr.sort(function(a,b){return a-b;)) str.replace(reg,function( ) { } )

周五

1：function函数--闭包

作用域(scope) 2种

1、全局作用域:成员:随处可用，可以反复使用，缺陷:容易被污染

2、函数作用域 ：成员:不会被污染，只有函数调用时内部可用，缺点:调用结束后，就释放了，一次性的，不可反复使用

2、***函数的执行原理 5步 1、程序加载时

创建执行环境栈(ECS):保存函数调用顺序的数组
首先压入全局执行环境（全局EC)

全局EC中引用着全局对象window  
 
 window中保存着全局变量

2, 定义时： 创建函数对象:封装代码段

在函数对象中定义了scope属性，记录着函数来自的作用域
全局函数的scope都是window 3，调用前： 在执行环境栈ECS中压入新的函数的EC

创建出活动对象(AO):保存本次函数调用用到的局部变量                                                      
在EC中添加了scope chain (作用域链)属性引用着AO                                                           
 设置AO的parent属性为函数的scope引用的对象

4， 调用时：

变量的使用规则:优先使用局部变量，局部没有找全局，全局没有就报错

5， 调用完：

函数的EC会出栈，AO自动释放，局部变量也就自动释放

两链一包：

作用域链(scope chain):以函数的EC中的scope chain属性为起点，经过AO，逐级引用，形成的一条链式结构

作用:查找，带来了变量的使用规则:优先使用局部变量，局部没有找全局，全局没有就报错

闭包： 保护—个可以【反复使用的局部变量】的一种此法结构 为什么:全局变量:缺:容易被污染 局部变量:缺:—次性 如何使用: 1、两个函数进行嵌套 2、外层函数创建受保护的局部变量，并且返回内层函数 3、内层函数在操作受保护的局部变量 例子： 强调： 1、判断闭包，有没有两个函数在嵌套，并且外层函数创建了变量，return了内层函数

	2、外层函数调用几次，就创建了几个闭包，受保护的变量就有了几个副本
	3、同一次外层函数调用，返回的内层函数，都是使用同一个受保护的变量
缺点：
	唯—的缺点:受保护的变量永远不会被释放，过度使用闭包，会导致内存泄漏
使用场景：
	防抖节流---减少DOM树的修改，提升性能–3个事件会非常的影响性能
		1、elem.onmousemove-鼠标移动就会触发，触发次数很多很快，但是不要让他疯狂的渲染DOM       
		2、window.onresize-窗口的尺寸只要发生变化就会触发，触发次数很多很快，但是不要让他疯狂的渲染DOM    
		3、input.oninput    - input框输入的内容发生变法，就会触发

2：Object:面向对象开发方式:

三大特点:封装、继承、多态

面试题:简单的说一下你了解的面向过程和面向对象开发方式的区别? 面向过程:开始->经过->结束，我们从开始到现在学习写法的一直都是面向过程 面向对象:对象（属性和方法)，如果这个世界有各种属性和各种方法，但是连一个对象/生物都没有，那这些东西就没有具体的意义 我们把所有的代码全部包含在一个对象中来进行描写，才更符合现实生活

之前用的11个引用类型对象，都是浏览器的js解释器提供的，我们直接学习如何使用，但是我们现在可以学习如果创建属于自己的对象(轮播，选项卡，购物车等）

学习如何创建自定义对象: 1、封装/定义/创建对象:3种 1、直接量方式: var obj={
"属性名":属性值,
....
"方法名":function(形参){函数体}, ....
}; 强调:
1、属性名和方法名的引号其实是可以省略的，但是不建议，因为以后我们会学习一种数据格式叫做JSON，要求属性名和方法名的【双引号】不能省略
2、如何访问对象的属性和方法：
对象名.属性名; ====对象名["属性名"]
对象名.方法名( ); ====对象名"方法名"
JS中万物皆对象，除了undefined和null，—切对象的底层都是hash数组
特殊:1、访问到不存在的属性，返回undefined
2、随时随地可以添加不存在的属性和方法 3、希望获取到对象之中所有的东西:遍历对象: for in循环 for(var i in obj){obj [i] } 4、如果你希望在对象的方法内部使用对象自己的属性，我们需要写为this.属性名;
this指向： 1、单个元素绑定事件this->这个元素 2、多个元素绑定事件this->当前元素 3、函数中this->谁在调用此函数this指向就是谁 4、定时器中this-> window 5、箭头函数this->外部对象 6、自定义构造函数中出现this->你当前正在创建的对象 2、构造函数方式:垃圾 var obj=new Object();//空对象 obj.属性名=属性值; obj.方法名=function){}; 以上两种创建方式有一个缺点:仅仅适合创建单个对象，如果创建多个对象，代码冗余度太高 3、专门为创建多个对象准备的 自定义构造函数方式 ：2步 1、创建构造函数

			2、调用自定义构造函数创建出对象
				var obj=new类名(实参....);

3：事件

扩展： onmousemove 鼠标移动事件： setInterval 周期性定时器： setTimeout 一次性定时器 onresize js版本的css媒体查询

avatar
文章
阅读
粉丝