JavaScript学习笔记第三周

112 阅读15分钟

String

字符串:多个字符组成的只读字符数组

  1. 【只读】:字符串所有的API都不会修改原字符串,只会返回新的字符串。- 字符串的每个API使用过后都要拿个变量去接住他
  2. 【数组】:跟数组有相同点:
  • 字符串可以使用下标获取某个字符
  • 字符串可以使用length获取字符的长度
  • 字符串可以遍历得到每个字符
  • 字符串可以使用数组不修改原数组的API(concat、slice)

差异:所有数组直接修改原数组的API,字符串都不可以使用!字符串自己也有一堆API等待我们学习

String API

1. 转义字符:\

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

  1. 比如:希望在""中再放入一个",或''之中再放入一个' """ '''

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

  3. *可以书写unicode号代表一个字 \uXXXX 汉字 的第一个字:\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码转回原文: var 原文=String.fromCharCode(ascii);

5、检索字符串:检查索引/下标

何时:判断有没有,不重复! var i=str/arr.indexOf("关键字",starti);

特殊:

  1. starti可以省略,如果省略默认从0位置开始向右查找
  2. 返回:如果找到了,返回关键字的第一个字符的下标 没找到返回-1,重点:我们其实根本不关心下标为几,我们只关心下标为不为-1,为-1说明没有,如果不为-1说明存在
  3. 数组也可以使用:其实以前数组是没有这个方法的,某次浏览器更新后,数组才可以使用的(老IE用不到)
  4. 笔试题:找到所有关键字的下标
var str="no zuo no die no can no bibi";
var index=-1;
while((index=str.indexOf("no",index+1))!=-1){
        console.log("找到了,下标为:"+index);
}

6、拼接字符串:

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

7、*截取子字符串:3种

  1. var subStr=str/arr.slice(starti,endi+1);//slice不光字符串可用,数组也可以用,但是下面两个方法只能字符串能用
  2. var subStr=str.substring(starti,endi+1);//几乎和slice一致,但是不如slice,因为不支持负数参数
  3. var subStr=str.substr(starti,n);//截取的个数,不必考虑含头不含尾

8、*替换字符串:

var newStr=str.replace("固定关键字"/RegExp,"新内容"); 其实这个方法很吊,至少5可行,但是今天不行,目前没有学过正则表达式,所有替换暂时只能替换一个固定关键字,比较low,明天就牛逼了

9、切割/分割字符串:

功能:字符串<=>数组

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

特殊:

  1. 切割符是可以自定义的,切割后会返回一个数组,数组中不在包含切割符
  2. 如果传入的切割符"",每一个字符都会被切散

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

  1. 创建空标签: var 新元素=document.createElement("标签名");
  2. 为此标签设置必要的属性和事件 新元素.属性名="属性值"; 新元素.on事件名=function(){操作}
  3. 把新元素上DOM树 父元素.appendChild(新元素);

正则表达式

定义字符串中【字符出现规则】的表达式

何时使用:切割 替换 验证

如何使用:

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

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

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

何时使用:只要关键字又多种情况的时候

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

强调:

  1. 一个中括号,只能管一个字
  2. 问题:正则默认只要满足后,就不再管后续操作,后续用户就可以乱来!

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

特殊:

  1. 如果备选字符集种有部分unicode号是连续的,则可用-省略掉中间部分
        一位数字:[0-9]
        一位字母:[A-Za-z]
        一位数字、字母、下划线:[0-9A-Za-z_]
        一位汉字:[\u4e00-\u9fa5];

2、除了xxx之外,其他都可以

[^xxx] - 范围太广,不推荐

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

一个数字:\d === [0-9]

一位数字、字母、下划线:\w === [0-9A-Za-z_]

一位空白字符:\s === 空格、制表符、换行

一位除了换行外的任意字符:. - 范围太广,不推荐

问题:预定义字符集是固定的,不灵活 建议:开发时优先使用预定义字符集,预定义字符集满足不了,再用备选字符集补充

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

  1. 量词:规定了一个字符集出现的次数 如何使用:

  2. 有明确数量:

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

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

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

  3. 没有明确数量:

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

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

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

  4. 指定匹配位置: ^:以xxxxx开头

    $:以xxxx结尾

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

  5. 选择和分组: 选择:可以再多个条件中选择一个 规则1|规则2

     分组:选择和分组一般来说都是需要搭配使用的 - 添加了子规则
             (规则1|规则2)
    
  6. 预判:目的:密码强度:4-6位密码,可以输入字母数字,但是必须要有一位大写和一位数字的组合

公式:比如:

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

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

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

字符串支持正则的API

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

2、替换:

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

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

问题:替换的新东西,只能是一个固定的

  1. 高级替换法:
str=str.replace(/[我卧握窝][去槽操曹草]+/g,function(key,i,str){//此回调函数会自动调用,找到几个关键字就会执行几次
    console.log(key);//当前次正则匹配到的关键字
    console.log(i);//当前次正则匹配到的关键字的下标
    console.log(str);//原文本身
    return key.length==2?"**":"***";
});
  1. 格式化:如果替换时,正则中,带有分组,那么你的回调函数会得到更多的形参
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);

正则对象

创建:

  1. 直接量方式:var reg=/正则表达式/后缀;
  2. 构造函数方式:var reg=new RegExp("正则表达式","后缀");

方法:验证:var bool=reg.test("用户输入的东西"); true->用户输对了 false->用户不通过

Math

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

强调:不能、不需要创建,浏览器自带的

属性:Math.PI

API:

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

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

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

推荐:num.toFixed(d);//d可以指定保留小数位数,而且也具有四舍五入的功能,唯一的缺陷:返回的是一个字符串,建议搭配上一个parseFloat使用

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

2. 乘方和开方: 乘方:Math.pow(底数,幂); - 以后不用连乘 开方:Math.sqrt(num);

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

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

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

  2. 绝对值:将负数变为正数 Math.abs(num);

  3. 随机数:Math.random():在0-1之间取随机小数 可能取到0,但是不可能取到1 - 可能取到最小数,但是不可能取到最大数 在min~max之间取随机整数的公式 parseInt(Math.random()*(max-min+1)+min); 如果你的最小值是0 parseInt(Math.random()*(max+1));

  4. 其实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,MM-1,dd,hh,mm,ss); 取值范围:MM:0~11 月份需要修正

    4. 复制一个日期对象 为什么:日期对象的API都是直接修改原日期对象的,无法获得修改之前的日期 何时使用:如果你希望同事获得修改前和修改后的两个日期,则应该先复制一份,然后再去修改其中一份 var end=new Date(start);

  2. 使用:

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

    2. API操作:分量:时间单位

      年月日星期:FullYear Month Date Day

      时分秒毫秒:Hours Minutes Seconds Milliseconds

      1. 每个分量都有一对儿getXXX/setXXX 特殊:Day:没有set方法
      2. 取值范围:
    •     FullYear:就是当前年份的数字
      
    •     Month:0-11,计算机中的月份比现实-1
      
    •     Date1-31
      
    •     Day:0-6:0代表星期天,外国人的眼里,星期天是一个星期的第一天
      
    •     Hours:0-23
      
    •     Minutes、Seconds:0~59     
      

      3. 日期看上去像一个字符串一样黑色的,但是日期对象和字符串能用的API不同,而且日期对象很聪明,会自动进制

      建议:对一个日期的某个分量做计算 date.setXXX(date.getXXX()+/-n);

      +10分钟

      date.setMinutes(date.getMinutes+10);

      1. 日期格式化:

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

      具有兼容性问题,老IE输出的和主流浏览器输出的东西不一样

      解决:自定义format函数

Error对象

4种错误类型

  1. SyntaxError 语法错误
  2. ReferenceError 引用错误
  3. TypeError 类型错误
  4. RangeError 范围错误

错误处理

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

可以用if...else 代替 try...catch

Function

创建(3种)

  1. 声明方式:function 函数名(形参列表){函数体;return 返回值;} - 完整的声明提前
  2. 直接量方式:var 函数名=function(形参列表){函数体;return 返回值;} - 完整的声明提前 扩展: d1.onclick=function(){}
  3. 构造函数方式: var 函数名=new Function("形参1",....,"函数体;return 返回值;"); 强调:无论参数实际是什么类型,创建函数时的每一部分都必须用""包裹 何时使用:如果函数体不是固定的,而是字符串动态拼接的

重载(overload)

相同函数名,根据传入的实参的不同,会自动选择对应的函数执行,减轻程序员的负担

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

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

arguments对象:函数中,自带的,不需要我们创建的,是一个【类数组】对象,作用:接受住所有的实参

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

  1. 都可以用下标访问某个元素 arguments[i] - 传入的某个实参
  2. 都可以用length获取到长度 arguments.length
  3. 可以遍历拿到每一个元素 - for循环

强调:类数组对象不是数组,所有的数组的API,类数组都不能使用

优点:何时使用:

  1. 以后不需要形参,也可以接住所有的实参!
  2. 变相实现重载:在函数内部判断传入的实参(个数、类型)的不同,执行不同的分支操作

闭包

保护一个可以【反复使用的局部变量】的一种词法结构

如何使用:

  1. 两个函数进行嵌套
  2. 外层函数创建受保护的局部变量,并且返回内层函数
  3. 内层函数在操作受保护的局部变量

强调:

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

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

使用场景:防抖节流:减少DOM树的修改,提升性能 - 3个事件会非常的影响性能,性能差、

  1. elem.onmousemove - 鼠标移动就会触发,触发次数很多很快,但是不要让他疯狂的渲染DOM
  2. window.onresize - 窗口的尺寸只要发生变化就会触发,触发次数很多很快,但是不要让他疯狂的渲染DOM
  3. input.oninput - input框输入的内容发生变法,就会触发

防抖节流公式:

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

object

面向对象开发方式

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

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

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

面向对象:对象(属性和方法),如果这个世界有各种属性和各种方法,但是连一个对象/生物都没有,那这些东西就没有具体的意义

学习如何创建自定义对象:

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. 创建构造函数 function 类名(name,age,hobby,...){ this.name=name; this.age=age; this.salary=salary; ... }

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