JS第三周总结

最新推荐文章于 2024-07-12 16:27:40 发布

AKASO_D

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量129

点赞数

分类专栏： JS知识点文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_48974702/article/details/126695628

版权

JS知识点专栏收录该内容

6 篇文章 0 订阅

订阅专栏

橙色写漏了

红色写错了

Day1

一、String的API

1.1转义字符：\

\n换行
\t制表
unicode码：\u

1.2英文转大小写

str.toUpperCase()
str.toLowerCase()

1.3获取字符串中某个字符:

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

1.4获取字符串中某个字符的ascii码

var ascii=str.charCodeAt(i);

通过ascii码转回原文

原文=String.fromCharCode(ascii);

1.5检索字符串

str.indexOf("关键字",starti)

如果找到了，返回关键字的第一个字符的下标，没找到返回-1
数组也可以使用

1.6拼接字符串

var newStr=str.concat(str1,str2,...)

1.7截取子字符串

1)str.slice(starti,endi);含头不含尾，可以-n倒数第几个
2)str.substring(starti,endi);
3)str.substr(starti,n);n:截取几个;

1.8替换字符串

str.replace("原来"或正则,"新内容")

1.9切割/分割字符串

str.split("")

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

var 新元素=document.creatElement("标签");
上树：
父元素.appendChild(新元素)

Day2

一、正则表达式

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

基础正则：
    //ig i:忽略大小写  g:全部替换
验证：
    /^$/
备选字符集：
    /[]/一个[]验证一个字符
预定义字符集：
    /d:数字
    /w:数字，字母，下划线
    /s:空格，换行，制表符
    .除了换行的
预判：
    (?![]+$)
量词：
    {n,m}:输入n-m个
    {n,}:至少输入n个
    {n}只能输入n个
    ?:前边相邻的字符集，可有可无，最多一次
    *:前边相邻的字符集，可有可无，最多不限
    +:前边相邻的字符集，至少一个

选择和分组：

选择：可以在多个中选择一个
```
选择1|选择2
```
分组：选择和分组一般来说都是需要搭配使用的
```
(规则1|规则2)
```

二、字符串支持正则的API

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

str.replace(正则,"新内容")

高级替换法：

            str=str.replace(/[我卧握窝][去槽操曹草]+/g,function(key,i,str){//此回调函数会自动调用，找到几个关键字就会执行几次
//              console.log(key);//当前次正则匹配到的关键字
//              console.log(i);//当前次正则匹配到的关键字的下标
//              console.log(str);//原文本身
                return的是新内容;
                return key.length==2?"**":"***";
            });

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

            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);

三、正则对象

直接量方式 ：var reg=//;

构造函数方式

var reg=new RegExp("正则表达式","后缀");

Day3

一、Math

Math.PI

1)Math.ceil() 超过则进一位
2)Math.floor() 省略
3)Math.round() 四舍五入

乘方：Math.pow(底数,幂);
开方：Math.sqrt(num);
Math.abs(num);
Math.random();
var max/min=Math.max/min(num1,num2,...);
问题:不支持传入数组参数，比较数组的最大值和最小值
解决:Math.max/min.apply(Math,arr);
其实apply可以悄悄的打散数组，讲每个元素单独传入 - ES5带来的新特性
其实apply可以借用方法
笔试题:比较出数组中最大值/最小值（2个方法)

二、Date

获取现在时间
```
var date=new Date()
```
创建一个自定义时间:
var birth=new Date("yyyy/MM/dd hh:mm:ss");
var birth=new Date(yyyy,MM,dd,hh,mm,ss);
取值范围:MM: 0~11 月份需要修正

Fullyear
Month
Date
Day
Hours
Minutes
Seconds
Milliseconds
都有set get方法
除了星期没有set

Day4

一、Error对象

1.1错误类型

SyntaxError语法错误
typeError:类型错误 不属于自己的属性和方法，你却去使用了
referenceError：引用错误 没有创建的东西，你就去使用了
RangeError范围错误：num.toFixed(d);d必须在0~100之间

1.2捕捉错误

try{
    可能出错的代码;
}catch(err){
    
}

1.3抛出

throw new Error("自定义文字");

二、Function对象

2.1重载

js不会根据传入参数的数量进行函数的重载

但又arrguments，类似数组

2.2匿名函数

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

回调函数

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

2.3闭包

用于保护需要反复使用的局部变量的词法结构

函数执行的5个步骤

1.程序加载时：
    创建ECS，用于保存函数执行顺序的数组
    首先压入全局EC
    并引用全局对象window，保存全局变量
2.函数定义时：
    封装代码块
    scorp指向作用域
3.函数执行前：
    创建函数EC
    Scorp chain引用活动对象AO,AO保存局部变量
    活动对象parent指向scorp指向的作用域
4.函数执行时：
    规定了变量使用规则
    自己有用自己的，没有沿着Scorp chain找
5.执行结束：
    EC出栈，释放活动对象

如何使用:
1、两个函数进行嵌套
2、外层函数创建受保护的局部变量，并且返回内层函数
3、内层函数再操作受保护的局部变量

强调:
1、判断闭包，有没有两个函数在嵌套，并且外层函数创建了变量，return了内层函数
2、外层函数调用几次，就创建了几个闭包，受保护的变量就有了几个副本
3、同一次外层函数调用，返回的内层函数，都是使用同一个受保护的变量

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

Day5

一、Object:面向对象开发方式:

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

封装对象

1)
    var obj={
        "属性名":属性值,
        ...
        "方法名":function(){},
        ...
    }
访问：
        对象名.属性名;
        对象名.方法名();
希望获取到对象之中所有的东西:
        遍历对象: for in循环
        for(var i in obj){
            obj[i];
        }

this指向:
            1、单个元素绑定事件this->这个元素
            2、多个元素绑定事件this->当前元素
            3、函数中this->谁在调用此函数this指向就是谁
            4、定时器中this->window
            5、箭头函数this->外部对象
            6、自定义构造函数中出现this->你当前正在创建的对象
2)
    2)构造函数方式:垃圾
    var obj=new Object();//空对象
    obj.属性名=属性值;
    obj.方法名=function(){};
3)
    自定义构造函数方式:
    1、创建构造函数
        function 类名(name,age,hobby...){
        this.name=name;
        this.age=age;
        this.hobby=hobby;
        ...
        }
    2、调用自定义构造函数创建出对象
        var obj=new 类名(实参,...)