第三周
JS内置对象（引用类型）：
String Number Boolean -> 包装类型
Array(数组) Function Date(日期) Math(数学) *RegExp(正则：验证)
Error(错误)
*Object(面向对象)
Global(全局对象)：
1.保存着全局变量和全局函数，浏览器端/客户端/前端global被window代替了，以后学习Node.js后端语言的时候会发全局是global
2. 唯独window对象可以省略不写
为什么undefined和null不能使用.，他们俩没有提供过包装类型（没有任何属性和方法）
string
String基本概念
本质是多字符组成的只读的数组
- 字符串可以使用下标获取某个字符
- 字符串可以使用length获取字符的长度
- 字符串可以遍历得到每个字符
- 字符串可以使用数组不修改原数组的API（concat、slice）
差异：所有数组直接修改原数组的API，字符串都不可以使用！
String API：
转义字符：\
解决冲突
比如：希望在""中再放入一个"，或''之中再放入一个'
"\"" '\''
具有特殊功能
\n 换行
\t 制表符：就是你敲tab键带来的一个大空格
可以书写unicode号代表一个字
\uXXXX
汉字 的第一个字：\u4e00
汉字的最后一个字：\u9fa5
英文转大小写toUpperCase() .toLowerCase()
【统一的】将字符串转为大写或小写，再比较，忽略大小写
（验证码）
var upper=str.toUpperCase();//大写
var lower=str.toLowerCase();//小写
获取字符串中某个字符.charAt(i)//i是下标
str.charAt(i); === str[i];
ascii码.charCodeAt(i) .fromCharCode(ascii)
var ascii=str.charCodeAt(i);//编码
var 原文=String.fromCharCode(ascii);//解码
检索字符串：检查索引/下标.indexOf("关键字",starti)
使用场景：判断有没有，不重复！
var i=str/arr.indexOf("关键字",starti);
没找到返回-1,找到了返回找到的第一个的下标
特殊：1、starti可以省略，如果省略默认从0位置开始向右查找
2、返回：如果找到了，返回关键字的第一个字符的下标
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);
}
拼接字符串concat(str1,str2,....)
var newStr=str.concat(str1,str2,....);
还不如 + 运算符
*截取子字符串：.slice(starti,endi+1) str.substr(starti,n) (一共三种)
var subStr=str/arr.slice(starti,endi+1);//slice不光字符串可用，数组也可以用，但是下面两个方法只能字符串能用
var subStr=str.substring(starti,endi+1);//几乎和slice一致，但是不如slice，因为不支持负数参数
ar subStr=str.substr(starti,n);//截取的个数，不必考虑含头不含尾
替换字符串：replace("固定关键字"/RegExp,"新内容")
var newStr=str.replace("固定关键字"/RegExp,"新内容");
切割/分割字符串：split("自定义切割符")字符串<=>数组
var arr=str.split("自定义切割符")
特殊：
1、切割符是可以自定义的，切割后会返回一个数组，数组中不在包含切割符
2、如果传入的切割符""，每一个字符都会被切散
正则
定义字符串中【字符出现规则】的表达式
使用场景：切割 替换 验证
正则的使用
最简单的正则：
关键字原文，但是写法和以前的字符串不同，
/正则表达式/ig
// i：忽略大小写
// g：全部，替换的话默认只会替换第一个匹配到的关键字
备选字符集：[字符集]
一个备选字符集：规定一位字符可能出现的情况
何时使用：只要关键字又多种情况的时候
如何使用：/[备选字符集]/
1. 一个中括号，只能管一个字
2. 问题：正则默认只要满足后，就不再管后续操作，后续用户就可以乱来！
解决 ：
/^[备选字符集]$/ - 前加^后加$的意思是要求用户从头到尾完全匹配
特殊：1、如果备选字符集种有部分unicode号是连续的，则可用-省略掉中间部分 比如：
一位数字：[0-9]
一位字母：[A-Za-z]
一位数字、字母、下划线：[0-9A-Za-z_]
一位汉字：[\u4e00-\u9fa5]
2、除了xxx之外，其他都可以
[^xxx] - 范围太广，不推荐
预定义字符集：\d \w \s .
前辈们提前定义了的一些常用的字符集
一个数字：\d === [0-9]
一位数字、字母、下划线：\w === [0-9A-Za-z_]
一位空白字符：\s === 空格、制表符、换行
一位除了换行外的任意字符：. - 范围太广，不推荐
问题：预定义字符集是固定的，不灵活
建议：开发时优先使用预定义字符集，预定义字符集满足不了，再用备选字符集补充
强调：不管是备选字符集还是预定义字符集，一个都只管一位
量词：{n,m} ?*+
规定了一个字符集出现的次数
-
有明确数量：
字符集{n,m}：前边相邻的字符集最少出现n次，最多出现m次
字符集{n,}：前边相邻的字符集最少出现n次，多了不限
字符集{n}：前边相邻的字符集必须出现n次 -
没有明确数量：
字符集?：前边相邻的字符集，可有可无，最多一次
字符集*：前边相邻的字符集，可有可无，多了不限
字符集+：前边相邻的字符集，至少一次，多了不限
指定匹配位置：
/^xxxx/：以xxxxx开头
/xxxx$/：以xxxx结尾
特殊：如果同时使用了，前加^后加$，从头到尾完全匹配 - 只要是做验证，必须这么写
选择和分组：规则1|规则2
选择：可以再多个条件中选择一个
规则1|规则2
分组：选择和分组一般来说都是需要搭配使用的 - 添加了子规则
(规则1|规则2)
预判：(?![字符集]+$)
目的：预判，添加一些条件(?![字符集]+$)
密码强度：4-6位密码，可以输入字母数字，但是必须要有一位大写和一位数字的组合
公式：比如：
- /^(?![0-9]+/- 不能全由数字组成，可能有大写字母、小写字母、汉字、特殊符号、日文、韩文...
- /^(?![A-Za-z]+/ - 不能全由大写组成，也不能全由小写组成，也不能由大写和小写的组合组成，可能有数字、汉字、特殊符号、日文、韩文...
字符串支持正则的AIP
切割 split("固定切割符"/RegExp)
var arr=str.split("固定切割符"/RegExp)；
例
var str="tom&jerry%mary#jackson";
var arr=str.split(/&|%|#/); //多个进行切割
替换:
-
基本替换法：
str=str.replace(/正则表达式/gi,"新内容");
注意：替换时，不要前加^后加$，我们不需要完全匹配，只需要找到关键字做替换而已，想要替换所有的一定要加后缀g 问题：替换的新东西，只能是一个固定的
-
高级替换法：
str=str.replace(/[我卧握窝][去槽操曹草]+/g,function(key,i,str){ //此回调函数会自动调用，找到几个关键字就会执行几次 console.log(key);//当前次正则匹配到的关键字 console.log(i);//当前次正则匹配到的关键字的下标 console.log(str);//原文本身 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);
正则对象
创建：
1、直接量方式：var reg=/正则表达式/后缀;
2、构造函数方式：var reg=new RegExp("正则表达式","后缀");
方法：验证
var bool=reg.test("用户输入的东西");
console.log(bool);
true->用户输对了 false->用户不通过
Math：
专门用于提供数学计算的API
强调：不能、不需要创建，浏览器自带的
属性：Math.PI - 以后不用自己在创建3.1415926
API
取整：.ceil(num);.floor(num);.round(num);
上取整：只要超过，就会取下一个整数
Math.ceil(num); - 小数位数不能超过15位，超过后会失效
下取整：无论超过多少，都省略小数部分
Math.floor(num);
四舍五入取整：只看第一位小数
Math.round(num);
以上三个都是垃圾：只能取整，不能指定保留小数位数：
个人推荐：num.toFixed(d)//d可以指定保留小数位数，而且也具有四舍五入的功能，
唯一的缺陷：返回的是一个字符串，建议搭配上一个parseFloat使用
笔试题：封装自定义一个函数，按照任意小数位数四舍五入，返回数字类型，不允许使用toFixed
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)
乘方和开方：Math.sqrt(num);Math.pow(底数,幂)
乘方：Math.pow(底数,幂); - 以后不用连乘
开方：Math.sqrt(num);
最大值和最小值：Math.max/min(num1,num2,.....)
var max/min=Math.max/min(num1,num2,.....);
可以获取出传入的参数种最大或最小的值
问题：不支持传入数组参数，比较数组的最大值和最小值
解决：Math.max/min.apply(Math,arr);
Math.max/min.(...Math,arr);
其实apply可以悄悄的打散数组，将每个元素单独传入 - ES5带来的一个新特性
绝对值：Math.abs(num);
Math.abs(num);//只能将负数变为正数
随机数：Math.random()：在0-1之间取随机小数
可能取到0，但是不可能取到1 - 可能取到最小数，但是不可能取到最大数
在min~max之间取随机整数的公式
parseInt(Math.random()*(max-min+1)+min);
其他
其实Math还有一些别的东西（属性和方法）- 还提供了三角函数
Date
封装了一个事件对象，提供了对时间进行操作的API的对象
使用场景：只要计算时间，就必须用Date对象
创建：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);
ps:取值范围：MM：0~11 月份需要修正
复制一个日期对象
为什么：日期对象的API都是直接修改原日期对象的，无法获得修改之前的日期
何时使用：如果你希望同事获得修改前和修改后的两个日期，则应该先复制一份，然后再去修改其中一份
var end=new Date(start);
使用：
日期算术计算
拿着两个日期对象可以相减，你会得到一个毫秒差，通过毫秒差换算出你想要的任何一部分
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：0代表星期天，外国人的眼里，星期天是一个星期的第一天
Hours：0~23
Minutes、Seconds：0~59
3、 日期看上去像一个字符串一样黑色的，但是日期对象和字符串能用的API不同，而且日期对象很聪明，会自动进制
建议：对一个日期的某个分量做计算
date.setXXX(date.getXXX()+/-n);
+10分钟
date.setMinutes(date.getMinutes+10);
日期格式化：
date.toLocaleString();
//会转为一个本地日期格式的【字符串】，虽然不能自动进制，也不能用日期的API，但是可以用字符串的API了
垃圾：具有兼容性问题，老IE输出的和主流浏览器输出的东西不一样
解决：自定义format函数
Error对象：错误对象
错误类型
浏览器自带4种错误类型 - 帮助你们快速找到错误
SyntaxError - 语法错误：一定是符号/语法写错
ReferenceError - 引用错误：没有创建的东西，你就去使用了
*TypeError - 类型错误：不属于自己的属性和方法，你却去使用了
RangeError - 范围错误：只有一个API会遇到，num.toFixed(d);//d必须在0~100之间
错误处理：
当程序发生错误时，保证程序不会异常中断的机制
try{
可能发生错误的代码
}catch(err){
发生错误时才会执行，err形参会自动得到错误的信息，英文的
建议你自己在加上中文错误描述
}
性能差：放在try中的代码，效率都会被降到最低
解决：完全可以用if...else 代替 try...catch，所有的一场都可以提前预判
结合【正则验证】，预防用户胡乱输入
抛出自定义错误/异常：
throw new Error("自定义文字");
Function对象：
提前创建好，以后可以反复使用的代码段
js中的函数也是一个对象，函数名其实是引用函数对象的变量
创建：3种
声明方式：
function 函数名(形参列表){函数体;return 返回值;} - 完整的声明提前
直接量方式：
var 函数名=function(形参列表){函数体;return 返回值;} // 完整的声明提前
d1.onclick=function(){}
构造函数方式：
var 函数名=new Function("形参1",....,"函数体;return 返回值;");
强调：无论参数实际是什么类型，创建函数时的每一部分都必须用""包裹
何时使用：如果函数体不是固定的，而是字符串动态拼接的
作用域(周二笔记)
声明提前(周二笔记)
按值传递(周二笔记)
重载（overload）：
相同函数名，根据传入的实参的不同，会自动选择对应的函数执行
作用：减轻程序员的负担！
对象argument
问题：JS的语法不支持重载！JS不允许同时存在多个同名函数，如果同时存在，最后一个的函数会覆盖掉之前所有的
解决：在函数内部有一个对象：arguments
什么是arguments对象：函数中，自带的，不需要我们创建的，是一个【类数组】对象，作用：接受住所有的实参
只有3个点是和数组相同的
1、都可以用下标访问某个元素
arguments[i] - 传入的某个实参
2、都可以用length获取到长度
arguments.length
3、可以遍历拿到每一个元素 - for循环
强调：类数组对象不是数组，所有的数组的API，类数组都不能使用
优点
1、以后不需要形参，也可以接住所有的实参！
2、变相实现重载：在函数内部判断传入的实参（个数、类型）的不同，执行不同的分支操作
匿名函数：
创建的函数，没有函数名引用着 何时使用：如果函数，只会执行一次 为什么：节约内存，匿名函数没有变量引用着，用户，就会自动释放 如何使用：
自调
：只会执行一次，执行完毕后会自动释放，代替全局写法，节约内存空间
(function(){
console.log("我是匿名自调");
})();
回调(略)
将函数调用时，传入的实参，又是一个匿名函数，不需要我们程序员调用，会由主函数自动执行
确实是前辈们，怎么规定，我们怎么使用，但是我们了解到，原来这个回调函数不是没有调用，只不过是前辈们提前帮我们调用好了
arr.sort(function(a,b){return a-b;})
str.replace(reg,function(){})
d1.onclick=function(){}
以后搭配上ES6的箭头函数：简化了一切的回调函数
闭包：
函数的执行原理
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框输入的内容发生变法，就会触发
防抖节流公式：
function fdjl(){
var timer;//受保护的变量
return function(){//操作受保护的变量
if(timer){clearTimeout(timer)}
timer=setTimeout(function(){
//考虑你要做的操作是什么
},1000)
}
}
var inner=fdjl();//inner()内层函数才是写在事件中的操作
Object
面向对象开发方式：
三大特点：封装、继承、多态
面试题：简单的说一下你了解的面向过程和面向对象 开发方式的区别？
面向过程：开始->经过->结束，我们从开始到现在学习写法的一直都是面向过程
一个人：出生->成长->工作->结婚->死亡
面向对象：对象（属性和方法），如果这个世界有各种属性和各种方法，但是连一个对象/生物都没有，那这些东西就没有具体的意义
我们把所有的代码全部包含在一个对象中来进行描写，才更符合现实生活
一个人：属性：身高、体重、姓名、性别
方法：吃饭、睡觉、玩耍
之前用的11个引用类型对象，都是浏览器的js解释器提供的，我们直接学习如何使用，但是我们现在可以学习如果创建属于自己的对象
创建自定义对象
学习如何创建自定义对象：
1、封装/定义/创建对象：3种
直接量方式：
var obj={
"属性名":属性值,
...
"方法名":function(形参){函数体},
...
};
强调：
1、属性名和方法名的引号其实是可以省略的，但是不建议，因为以后我们会学习一种数据格式叫做JSON，要求属性名和方法名的【双引号】不能省略
访问
*对象名.属性名; === 对象名["属性名"]
*对象名.方法名(); === 对象名["方法名"]()
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->你当前正在创建的对象
预定义构造函数方式：
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 类名(实参,...);
面向对象开发方式的好处：
1、不适合初学者，逼格高！
2、特地把每一块功能分开写 - 哪怕不需要注释，也便于以后维护！
3、铁索连舟 - 更符合现实生活
4、所有东西都包含在一个对象之中 - 更符合现实生活
创建页面元素并且渲染上DOM树：
1、创建空标签：
var 新元素=document.createElement("标签名");
2、为此标签设置必要的属性和事件
新元素.属性名="属性值";
新元素.on事件名=function(){操作}
3、把新元素上DOM树
父元素.appendChild(新元素);
在js创建的元素中加入需要创建的元素，只需要嵌套
