JS学习第三周

LovE5207871

于 2022-09-04 20:51:16 发布

阅读量199

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/LovE5207871/article/details/126692626

版权

day1

一、String API

1.转义字符：\

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

希望在""中再放入一个"，或''之中再放入一个' "\"" '\''

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

*可以书写unicode号代表一个字
           \uXXXX
           汉字的第一个字：\u4e00
           汉字的最后一个字：\u9fa5

console.log("\u4e00\u9fa5"); 一龥

2.*英文转大小写：【统一的】将字符串转为大写或小写，再比较，忽略大小写（验证码）

大写：var upper=str.toUpperCase();

小写：var lower=str.toLowerCase();

if(code.toLowerCase()==user.toLowerCase()){}

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

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

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

var ascii=str.charCodeAt(i);

**5. *通过ascii码转回原文**

var 原文=String.fromCharCode(ascii);

6.*检索字符串：检查索引/下标**

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

var i=str/arr.indexOf("关键字",starti);

特殊：

starti可以省略，如果省略默认从0位置开始向右查找

返回：如果找到了，返回关键字的第一个字符的下标

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

笔试题：找到所有关键字的下标

           var str="no zuo no die no can no bibi";
               var index=-1;
               while((index=str.indexOf("no",index+1))!=-1){
                   console.log("找到了，下标为："+index);
               }

7.拼接字符串

var newStr=str.concat(str1,str2,....); 还不如 + 运算符

8.截取子字符串：3种

var subStr=str/arr.slice(starti,endi+1);//slice不光字符串可用，数组也可以用，但是下面两个方法只能字符串能用

var subStr=str.substring(starti,endi+1);//几乎和slice一致，但是不如slice，因为不支持负数参数

var subStr=str.substr(starti,n);//截取的个数，不必考虑含头不含尾

9.*替换字符串

var newStr=str.replace("固定关键字"/RegExp,"新内容");

10.*****切割/分割字符串：功能：字符串<=>数组

var arr=str.split("自定义切割符")

特殊：

切割符是可以自定义的，切割后会返回一个数组，数组中不在包含切割符

如果传入的切割符""，每一个字符都会被切散

11.扩展：JS创建页面元素并且渲染上DOM树：3步

1、创建空标签：
var 新元素=document.createElement("标签名");

2、为此标签设置必要的属性和事件
新元素.属性名="属性值";
新元素.on事件名=function(){操作

3、把新元素上DOM树父元素.appendChild(新元素);

day2

一丶*****正则表达式

1.什么是：定义字符串中【字符出现规则】的表达式

2. 何时使用：切割替换 *验证*

3.最简单的正则：关键字原文，但是写法和以前的字符串不同，"no" -> /卧槽/ig

i：忽略大小写 g：全部，替换的话默认只会替换第一个匹配到的关键字

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

（1）如何使用：/[备选字符集]/ 强调：一个中括号，只能管一个字

（2）问题：正则默认只要满足后，就不再管后续操作，后续用户就可以乱来！

解决：【只要是做验证】，我们肯定希望用户完全按照我们的规则，必须写为：/^[备选字符集]$/ - 前加^后加$的意思是要求用户从头到尾完全匹配

（3）特殊：

A.如果备选字符集种有部分unicode号是连续的，则可用-省略掉中间部分

        一位数字：[0-9]
        一位字母：[A-Za-z]
        一位数字、字母、下划线：[0-9A-Za-z_]
        一位汉字：[\u4e00-\u9fa5];

B.除了[^xxx] - 范围太广，不推荐之外，其他都可以
^写在备选字符集里面表示除了里面的内容其他都可以

5.预定义字符集：前辈们提前定义了的一些常用的字符集

一个数字：\d   ===   [0-9]
一位数字、字母、下划线：\w   ===   [0-9A-Za-z_]
一位空白字符：\s   ===   空格、制表符、换行

一位除了换行外的任意字符：. （点）- 范围太广，不推荐

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

6.量词：规定了一个字符集出现的次数

有明确数量：

字符集{n,m}：前边相邻的字符集最少出现n次，最多出现m次

字符集{n,}：前边相邻的字符集最少出现n次，多了不限

字符集{n}：前边相邻的字符集必须出现n次

没有明确数量：

字符集？前边相邻的字符集，可有可无，最多出现一次

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

字符集+前面相邻的字符集，至少一次，多了不限

7.选择和分组

选择：可以再多个条件中选择一个 规则1|规则2

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

8.预判：目的：密码强度：4-6位密码，可以输入字母数字，但是必须要有一位大写和一位数字的组合 /^( ? ! [ ] + $) $/

/^(?![0-9]+$)$/ - 不能全由数字组成，可能有大写字母、小写字母、汉字、特殊符号、日文、韩文...

/^(?![A-Za-z]+$)$/ - 不能全由大写组成，也不能全由小写组成，也不能由大写和小写的组合组成，可能有数字、汉字、特殊符号、日文、韩文...

var reg=/^(?![0-9a-z]+$)(?![A-Za-z]+$)[0-9A-Za-z]{4,6}$/ //4-6位密码，可以输入字母数字，但是必须要有一位大写和一位数字的组合

var reg=/^(?![0-9a-z]+$)(?![A-Za-z]+$)(?![0-9A-Z]+$)[a-zA-Z0-9]{4,6}$/; //4-6位密码，可以输入字母数字，但是必须要是3者的组合

二丶*****字符串支持正则的API

1.切割：var arr=str.split("固定切割符"/RegExp)

2.*替换

（1）基本替换法 str=str.replace(/正则表达式/gi,"新内容")

注意：替换时，不要前加^后加$，我们不需要完全匹配，只需要找到关键字做替换而已，想要替换所有的一定要加后缀g

（2）高级替换法

str=str.replace(/[我卧握窝][去槽操曹草]+/g,function(key,i,str){//此回调函数会自动调用，找到几个关键字就会执行几次

console.log(key);//当前次正则匹配到的关键字

console.log(i);//当前次正则匹配到的关键字的下标

console.log(str);//原文本身

return key.length==2?"**":"***";

3.格式化

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

三丶*****正则对象

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

构造函数方式：var reg=new RegExp("正则表达式","后缀");方法

方法

验证：var bool=reg.test("用户输入的东西");

true->用户输对了 false->用户不通过

da3

一丶Math：专门用于提供数学计算的API

强调：不能、不需要创建，浏览器自带的

属性：Math.PI - 以后不用自己在创建3.1415926

1. API

（1）取整：3种

上取整：只要超过，就会取下一个整数 Math.ceil(num); - 小数位数不能超过15位，超过后会失效

下取整：无论超过多少，都省略小数部分 Math.floor(num);

四舍五入取整：只看第一位小数 Math.round(num);

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

（2）笔试题：封装自定义一个函数，按照任意小数位数四舍五入，返回数字类型，不允许使用toFixed

function dy(num,d){
               num*=Math.pow(10,d);
               num=Math.round(num);
               num/=Math.pow(10,d);
               return num;
           }

（3）乘方和开方

*乘方：Math.pow(底数,幂); - 以后不用连乘

开方：Math.sqrt(num)

（4）*最大值和最小值

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

问题：不支持传入数组参数，比较数组的最大值和最小值

解决：Math.max/min.apply(Math,arr); 其实apply可以悄悄的打散数组，将每个元素单独传入 - ES5带来的一个新特性

（5）绝对值：将负数变为正数 Math.abs(num);

（6）***随机数：Math.random()：在0-1之间取随机小数

在min~max之间取随机整数的公式
parseInt(Math.random()*(max-min+1)+min);

（7）Math还有一些别的东西（属性和方法）- 还提供了三角函数

二丶Date：封装了一个事件对象，提供了对时间进行操作的API的对象

何时使用：只要计算时间，就必须用Date对象

1.创建：4种

（1）创建一个日期对象，获取客户端当前时间 var now=new Date();

（2）创建一个自定义时间 var birth=new Date("yyyy/MM/dd hh:mm:ss");

（3）创建一个自定义时间 var birth=new Date(yyyy,MM1,dd,hh,mm,ss);
取值范围：MM：0~11 月份需要修正

（4）复制一个日期对象 var end=new Date(start);

为什么：日期对象的API都是直接修改原日期对象的，无法获得修改之前的日期

何时使用：如果你希望同事获得修改前和修改后的两个日期，则应该先复制一份，然后再去修改其中一份

2.使用

（1）拿着两个日期对象可以相减，你会得到一个毫秒差，通过毫秒差换算出你想要的任何一部分

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

年月日星期：FullYear Month Date Day 时分秒毫秒：Hours Minutes Seconds Milliseconds

每个分量都有一对儿getXXX/setXXX特殊：Day：没有set方法

A.取值范围

                FullYear：就是当前年份的数字
               Month：0~11，计算机中的月份比现实-1
               Date：1~31
               Day：0~6：0代表星期天，外国人的眼里，星期天是一个星期的第一天
               Hours：0~23
               Minutes、Seconds：

B.日期看上去像一个字符串一样黑色的，但是日期对象和字符串能用的API不同，而且日期对象很聪明，会自动进制，建议：对一个日期的某个分量做计算

date.setXXX(date.getXXX()+/-n);

+10分钟
date.setMinutes(date.getMinutes+10);

C.日期格式化

date.toLocaleString();//会转为一个本地日期格式的【字符串】，虽然不能自动进制，也不能用日期的API，但是可以用字符串的API了

具有兼容性问题，老IE输出的和主流浏览器输出的东西不一样解决：自定义format函数

day4

一丶Error对象：错误对象

1.浏览器自带4种错误类型 - 帮助你们快速找到错误

SyntaxError - 语法错误：一定是符号/语法写错

ReferenceError - 引用错误：没有创建的东西，你就去使用了

*TypeError - 类型错误：不属于自己的属性和方法，你却去使用了

RangeError - 范围错误：只有一个API会遇到，num.toFixed(d);//d必须在0~100之间

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

为什么：程序默认只要碰到错误就会停止/闪退，用户体验感差

如何错误处理

        try{
           可能发生错误的代码
       }catch(err){
           发生错误时才会执行，err形参会自动得到错误的信息，英文的
           建议你自己在加上中文错误描述
       }

性能垃圾：放在try中的代码，效率都会被降到最低

解决：完全可以用if...else 代替 try...catch，所有的一场都可以提前预判

3.抛出自定义错误/异常

throw new Error("自定义文字"); 也可以阻止程序运行

二丶*****Function对象：提前创建好，以后可以反复使用的代码段

1.***重载（overload）：相同函数名，根据传入的实参的不同，会自动选择对应的函数执行

为什么：减轻程序员的负担！

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

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

（1）什么是arguments对象：函数中，自带的，不需要我们创建的，是一个【类数组】对象，作用：接受住所有的实参

（2）只有3个点是和数组相同的

都可以用下标访问某个元素 arguments[i] - 传入的某个实参

都可以用length获取到长度 arguments.length

可以遍历拿到每一个元素 - for循环

（3）强调：类数组对象不是数组，所有的数组的API，类数组都不能使用

（4）优点：何时使用

以后不需要形参，也可以接住所有的实参！

变相实现重载：在函数内部判断传入的实参（个数、类型）的不同，执行不同的分支操作

2.***匿名函数：创建的函数，没有函数名引用着

何时使用：如果函数，只会执行一次

为什么：节约内存，匿名函数没有变量引用着，用户，就会自动释放

如何使用：

匿名函数自调：只会执行一次，执行完毕后会自动释放，代替全局写法，节约内存空间

        (function(){
               console.log("我是匿名自调");
           })();

*匿名函数回调：将函数调用时，传入的实参，又是一个匿名函数，不需要我们程序员调用，会由主函数自动执行

               arr.sort(function(a,b){return a-b;})
               str.replace(reg,function(){})
               d1.οnclick=function(){}

day5

一丶*****闭包

1.作用域（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自动释放，局部变量也就自动释放

3.闭包：保护一个可以【反复使用的局部变量】的一种此法结构

（1）为什么：全局变量：缺：容易被污染局部变量：缺：一次性

（2）如何使用：

两个函数进行嵌套

外层函数创建受保护的局部变量，并且返回内层函数

内层函数在操作受保护的局部变量

（3）强调：

判断闭包，有没有两个函数在嵌套，并且外层函数创建了变量，return了内层函数

外层函数调用几次，就创建了几个闭包，受保护的变量就有了几个副本

同一次外层函数调用，返回的内层函数，都是使用同一个受保护的变量

（4）缺点：唯一的缺点：受保护的变量永远不会被释放，过度使用闭包，会导致内存泄漏

（5）使用场景：防抖节流：减少DOM树的修改，提升性能 - 3个事件会非常的影响性能，性能差

elem.onmousemove - 鼠标移动就会触发，触发次数很多很快，但是不要让他疯狂的渲染DOM

window.onresize - 窗口的尺寸只要发生变化就会触发，触发次数很多很快，但是不要让他疯狂的渲染DOM

input.oninput - input框输入的内容发生变法，就会触发

（6）防抖节流公式

        function fdjl(){
               var timer;//受保护的变量
               return function(){//操作受保护的变量
                   if(timer){clearTimeout(timer)}
                   timer=setTimeout(function(){
                       //考虑你要做的操作是什么
                   },1000)
               }
           }
           var inner=fdjl();//inner()内层函数才是写在事件中的操作

二丶*****Object：面向对象开发方式

1.三大特点：封装、继承、多态

2.面试题：简单的说一下你了解的面向过程和面向对象开发方式的区别？

面向过程：开始->经过->结束，我们从开始到现在学习写法的一直都是面向过程 //一个人：出生->成长->工作->结婚->生子->死亡

面向对象：对象（属性和方法），如果这个世界有各种属性和各种方法，但是连一个对象/生物都没有，那这些东西就没有具体的意义 //一个人：属性：身高、体重、姓名、性别方法：吃饭、睡觉、玩耍

3.如何创建自定义对象封装/定义/创建对象：3种

（1）直接量方式

var obj={
                   "属性名":属性值,
                   ...
                   "方法名":function(形参){函数体},
                   ...
               };

强调：

A. 属性名和方法名的引号其实是可以省略的，但是不建议，因为以后我们会学习一种数据格式叫做JSON，要求属性名和方法名的【双引号】不能省略

B.如何访问对象的属性和方法

*对象名.属性名; === 对象名["属性名"] *对象名.方法名(); === 对象名["方法名"]()

JS中万物皆对象，除了undefined和null，一切对象的底层都是hash数组，访问到不存在的属性，返回undefined

随时随地可以添加不存在的属性和方法

C.希望获取到对象之中所有的东西：遍历对象：for in循环

                for(var i in obj){
                       obj[i];
                   }

D.如果你希望在对象的方法内部使用对象自己的属性，我们需要写为this.属性名;

（2）预定义构造函数方式：

        var obj=new Object();//空对象
           obj.属性名=属性值;
           obj.方法名=function(){};

（3）专门为创建多个对象准备自定义构造函数方式：2步

A.创建构造函数

        function 类名(name,age,hobby,...){
                       this.name=name;
                       this.age=age;
                       this.salary=salary;
                       ...
                   }

B.调用自定义构造函数创建出对象

var obj=new 类名(实参,...);

C.例子

        function h52204(name,age,hobby){
               this.name=name;//tgy.name="同归要"
               this.age=age;//tgy.age=18;
               this.hobby=hobby;//tgy.hobby="男"
  this.zwjs=function(){return "我的名字叫"+this.name+"，今年"+this.age+"岁，喜欢"+this.hobby;}
           }
           var lx=new h52204("龙兴",17,"女");
           var tgy=new h52204("同归要",18,"男");
           var fwk=new h52204("付完款",19,"未知");