JavaScript的组成部分：
- ECMAScript，描述了该语言的语法和基本对象。
- 文档对象模型（DOM），描述处理网页内容的方法和接口。
- 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。
Day01
1.js特征：
①解释型的，依赖于运行环境（nodejs：基础语法+服务器端、浏览器：基础语法+DOM+BOM）
②弱数据类型语言
③顺序执行（自上而下）
④即可以作为前端开发语言，又可以作为服务器语言，取决于运行环境（浏览器、操作系统nodejs）
（Linux：node，默认REPL交互式立即执行环境）
2.node命令：
.break/.clear/.editor/.exit/.help/.load/.save/
ctrl+C（取消并退出）/ctrl+D（保存并退出）
3.浏览器中js语言依赖于HTML
引入方式：内部引入、外部引入（都依赖于<script>标签）
外部引入，在<head>中，写
<script type="text/javascript" src=""></script>
（执行时先运行js，再显示DOM，若与DOM有交互，可能找不到结点：DOM——>CSS渲染——>js运行——>浏览器展示）
内部引入，在<body>标签中最后：<script >代码块</script>（常用）
（先加载文件，在按执行顺序：先执行DOM树，再执行CSS渲染，展示到浏览器后，最后执行Js）
<noscript>判断浏览器是否支持脚本，若不支持则会显示这里的内容，若支持则不会显示</noscript>
4.三种BOM弹框样式：
alert（提示弹框，没有结果，主要做展示）/prompt（交互式的输入弹框：取消-null，确认-输入框值）/confirm（选择弹框：确认-true，取消-false）
5.在js中区分大小写，不能随便换行
注释的条件：解释复杂的语法和技术；业务的说明
变量的定义与使用：
定义：声明、初始化，若没有进行初始化，可能有默认值
使用：打印输出、重新赋值、运算调用、调用、增删改查、遍历
标识符：变量（值、对象名、函数名）：不能以数字和下划线开头，且区分大小写，不能用关键字和保留字
6.前端的定义规范：
①变量全小写：由下划线开头的变量是系统级别的变量（__proto__）;
②函数名称是首字母小写的驼峰 小驼峰
function sayName();
③构造函数是大驼峰
Function Amial()
④全大写表示常量：eg.MIN_VALUE,MAX_VALUE（number 中的值的范围，若超出则是（10的308次方）infinite或者-infinite（10的-324次方））
7.五种基本类型（没有在堆中开辟空间，在栈中有其属性和属性值）：null、boolean、undefined、string、number
其中，null==undefined //true，值相同
null===undefinde //false,类型不同，值相同
0==‘0’；//true
0==='0'; //false
引用数据类型（在堆内存中开辟空间，栈中保存指针）：
对象Object、数组Array、函数Function、正则表达式RegExp、JSON库JSON、自定义引入类型
8.数值类型的判断函数：
①判断是否是非数值化：isNaN（）；//是则true，不是则false
②判断当前是否是有效范围内的值：isFinite();
//在有效范围内则返回true，反之则返回false
9.如何判断当前变量的数据类型？
typeof
if(typeof 'aaa'=='string'){
return true;
}
typeof null （空指针）——>object;
typeof undefined ——>undefined
typeof ''——>string
Day02
1.操作符：算术操作符、比较操作符、逻辑操作符、其他操作符
js为弱数据类型语言：“隐式的数据类型转换”
2.js中的除法不是整除，Math.floor();向下取整
在js中不要做小数位的运算
eg.console.log(0.1+0.2);
//0.3000000005；
正确做法：
var sum=(0.1*100+0.2*100)/100;
console.log(sum);
+号后跟字符串是字符串的拼接，-就是隐式的转换类型，进行number型运算
eg.
console.log(123+'123');//123123
console.log(123-'123');//0
3.
①其他数据类型——>数值类型number
转换方法：+/-符号，写在被转换类型前面；Number（）
null/false/''/0——>0;
undefined/object/'aaa'——>NaN
NaN——>Number
'123','0123','0x12'——>123(10进制),123(10进制),18(16进制），注意：不识别8进制
Number("123ac"); // NaN 包含其他字符： NaN
②其他数据类型——>布尔型Boolean
转换方法：Boolean（）,!!
Boolean(null/0/NaN/undifined);——>false
Boolean([]);//true
!![100,200];//true
""/0/NaN/null/undefined——>false
③其他数据类型——>字符串型String
转换方法：String();toString();+''
var num = 10;
console.log(num.toString()); //"10"
console.log(num.toString(2)) //"1010"
console.log(num.toString(8)) //"12"
console.log(num.toString(16))//"a"
String("123abc")//123abc
4.逻辑操作符&&，||
数据类型的转换和短路操作
&&：有值会转换成true，无值会原样输出
null&&true;//null
undefined&&true;//undefined
100&&true;//true;
0&&true;//0
''&&true;//
NaN&&true;//NaN
'123'&&true;//true
{name:'zs'}&&true;//true
null&&false;//null
undefined&&false;//undefined
100&&false;//false
||：逻辑上有值则为原值，有true则true
null || false;//false
undefined||false;//false
0||false;//false
'' || false;//false
100||false;//100
'abc'||false;//abc
100||true;//100
null||true;//true
5.数据类型的转换：
——>string
toString();+'';String()
——>boolean
！!;Boolean();
——>number
Number();parseInt();parseFloat()
6.流程控制语句:
顺序、分支（if/if-else/switch-case）、循环(for/while/do-while/for...in)，见PPT
1.逻辑、业务
2.语法规则
(对接收到的数据要验证数据的合法性，再进行业务处理）
7.作用域：
全局作用域（运行环境、文件内）
块级作用域（es5中没有，一般指if/switch/while/for里的{}）
函数作用域：只有函数作用域才有局部作用域（当函数内是 var a=10;时，a是局部作用域，当a=10时，a是全局作用域）
ES5中
函数作用域： 在 JavaScript函数中声明的变量，会成为函数的局部变量。
函数内部声明的变量，在函数外部不能访问。
全局作用域：函数之外声明的变量，会成为全局变量。
函数外部声明的变量，在函数内部可以访问。
当函数嵌套，在这个时候，内部函数与外部函数的这个变量就组成了闭包。
Day03
构造函数：Number Boolean String Object
——>变量(object)
构造函数的主要功能是生成实例化对象
构造函数：静态属性和函数
constructor:实例属性和函数
用new生成的就是引用类型（在栈中保存着存放在堆中的地址值）
对象其实就是一组数据(属性)和功能(方法)的集合
1.构造函数Object
1)创建实例：
方法1：使用构造函数创建 var person=new Object();
方法2：使用对象字面量表示 var person={ };
var obj1={}; //有指针指向地址空间，有地址值，但所在堆空间中是一片空白
var obj2=null;//有指针指向内存空间但是无地址值
2)访问对象属性：
①点表示法；②中括号表示法[" "]
3)增强的for循环 :for...in...
for(var 自定义的变量名保存属性 in 对象 /数组）{}
4）对象的删除 delete
若对象中的属性全部被delete，则该对象变成了空的对象：{ }
最后给这个空对象赋值null
删除的循环遍历：
var person={
name:'zs',
age:100,
products:{name:'笔记本',price:200.2},
plus:function(){console.log('plus');}
}
//key:name/age/products/plus
for(var key in person){
if(typeof person[key]=='object'){
for(var index in person[key]){
delete person[key][index];
}
console.log(person[key]);//{}
person[key]=null;
}
delete person[key];//
}
console.log(person);//{}
person=null;//可以用函数封装
5)属性
in：'name' in person//true
hasOwnProperty():监测是否是自己的自有属性
obj instanceof Object;//true 判断由谁生出来的
propertyIsEnumerable()：检测给定的属性是否是该对象的自有属性，并且该属性是可枚举
isPrototypeOf(object); 检查传入的对象是否是原型
6）this:谁调用指向谁
单独使用this时，指向全局：node环境——global，浏览器环境——Windows
在函数中，函数的所属者默认绑定this
在事件中，this指向了接收事件的HTML元素
7）根构造函数Object和原型（object的对象，有实例属性和实例方法，他的子子孙孙都可以调用）
见图解
Object===Object.prototype.constructor
Object===obj.__proto__.constructor
(obj是构造函数生成的对象)
其他：
闭包：
含义：在函数内部包裹着函数，能实现在函数内部访问另一个函数内的变量。
缺点：作用域链得不到释放，造成内存消耗
①被引用的私有变量不能被销毁，增大了内存消耗，造成了内存污染，解决方法：使用完这个变量后手动给它赋值null；②由于闭包涉及跨域访问，所以会导致性能缺失。解决方法：把跨域访问的变量储存在局部变量中，直接访问这个局部变量，即立即执行函数，声明这个变量后立即执行且只执行一次，执行完成后就会被销毁。
优点：
①保护函数内的变量安全，实现封装，防止变量流入其他环境发生命名冲突；②在内存中维持一个变量可以做缓存；③匿名自执行函数可以减少内存消耗（function(){}）{}
原型和原型链：
js中有两种原型，一种是显式原型prototype（又称为函数原型，只有函数才有），另一种叫做隐式原型__proto__（又称为对象原型）.
prototype保存着实例共享的方法，有一个指针constructor会指回构造函数
__proto__用于指向创建这个对象的函数的prototype，假如需要获取这个对象的属性或方法时，先在自身属性或方法上查找，假如找不到就会通过__proto__向上寻找，由此形成原型链
其他：
构造函数、实例、原型对象
https://www.cnblogs.com/liyusmile/p/8820443.html
每创建一个函数，该函数都会自动带有一个prototype属性。该属性是一个指针，指向一个对象，该对象称之为原型对象(后期我们可以使用这个原型对象帮助我们在js中实现继承).
原型对象上默认有一个属性constructor,该属性也是一个指针，指向其相关联的构造函数。
Js中new一个构造函数时，通过调用构造函数产生的实例对象，都拥有一个内部属性，指向了原型对象。其实例对象能够访问原型对象上的所有属性和方法。
Day04
1.Function
1）函数定义的方法
①函数声明：
function 函数的名称（形参）{
代码块
}
②函数表达式：
var 函数名 = function (形参列表){
//函数体
}
函数的定义.js
2）函数的结束标志：
return或者}
3）函数的作用：
提高复用率、封装（形参、实参，功能的封装）
4）函数的调用：
函数名（实参）；
5）变量可以重复使用也可以提升；
函数提升
普通变量提升<函数提升
函数的使用.js
6)函数的内部属性（参数.js）
arguments（类数组对象）
this(this.js)就近原则：函数内部——>该文件内部——>运行环境（指代的是当前被执行的环境）
形参的个数：函数名称.length
实参的个数：arguments.length
形参与实参的绑定：只有当传递实参时，arguments才有作用，才能实现绑定。
数组函数算法题
this的相关例题（以下都在node环境）
1）
var name='zs';
function say(){
console.log(this.name);
}
say();//undefined;这里的this指代全局变量中的name，而这里的name被var修饰，所以是文件内变量，不是全局变量，所以返回undefined
2)
name='zs';
function say(){
console.log(this.name);
}
say();//zs,这里的this指代全局变量中的name,而此时的name没有被var修饰，所以是全局变量，返回zs
3）
var age=100;
function print(){
var age=200;
console.log(age,this.age);
}
print();//200 undefined，第一个age是函数内部的age，是局部变量；this.age中的this指代function所处环境——global，又有var修饰，所以在全局范围内没有age，返回undefined；若把var去掉则返回100
4）
var clas="hello";
var stu={
clas:"world",
tell:function(){
console.log(clas,stu.clas,this.clas);
}
}
stu.tell();
//hello world world第一个输出hello是因为函数内部没有clas属性，所以找到对象外部的clas:hello ，不是world是因为需要stu.clas这样访问
这里的this指代的是stu对象，注意.前面的对象
Day05
1.函数调用范围：
①文件内的全局范围内
var sayName=function(){
console.log(this.name);
}
sayName();//undefined
//在node 环境中的全局范围是global，这个function在全局阀内内里，所以this指向global，而全局范围内没有定义name，所以返回undefined。
②在对象内，作为一种属性，对象成员
var p1={
name:'zs',
sayName;
}
p1.sayName();//此时的this指向p1中的name，zs
2.函数调用：
执行环境对象：函数作为对象中的成员
var p2={name:'ls'};
p2和sayName没有直接关系，所以可以用call和apply
sayName.call(p2);//ls
sayName.call(this);//这里的this指代的是global，undefined
call（执行环境对象，实参列表）和apply（执行环境对象，实参列表数组）的功能于区别：
反建立函数与对象的关系
3.自定义构造函数
function Cat(){
this.name=name;
}
var c1=new Cat('hua');
4.参数的应用：对象成员去赋值
绑定监听函数（参数）
作为返回值
5.构造函数及代码
function Cat(name){
this.name=name;
}
var c1=new Cat('hua');
var c2=new Car('bai');
console.log(c1,c2);
//Cat{name:'hua'} Cat{name:'bai'}
①
console.log(c1.toString);
//[object Object]
②
var r = String.prototype.toString.call(c1);
console.log(r);
//error,需要this的当前环境是string
③
//c1新增toString：c1所有的可枚举的属性都能返回成字符串
c1.age=2;
c1.price=200;
c1.toString = function(){
//return this.name
//this-->c1
var str="";
for(var key in this){
var value=this[key];
str += value;
}
return str;
}
console.log(c1.toString());
④
console.log(JSON.stringify(c1);
//{"name":"小花","age":2,"price":200}
6..数组定义的方法
①构造函数
var arr=new Array();
//father:Array.prototype
var arr1=new Array(100，200,300);
//在定义的同时进行赋值
arr1[1]=400;
//重新赋值
var arr2=new Array(10);//注意与上面赋值的区别
console.log(arr2,arr2.length);
//<10 empty items>,10
//若构造数组的同时只有一个整型的参数，那么就是新建了一个指定长度的空数组
var arr3=new Array(10.1);//error
只有一个参数时，不允许传递一个浮点型的数据
var arr4=new Array("10.1");
//长度为1，里面的参数时10.1
②字面量
var arr=[1,2,3,3]
//在定义的同时进行赋值
var arr1=[];
arr1[0]=100;
//定义一个空数组，通过索引下标的方式进行赋值
Day06&&Day07
数组的定义.js，length.js ，队列栈.js，数组类型的监测.js
数组的数据类型的转换.js 自定义排序.js 增删.js
1.在尾部新增任意多个数据（栈：push）
函数的封装（push原理）
function myAdd(){
//内部实际参数的变量arguments
//this指代外界的数组
for (var key in arguments){
var value=arguments[key];
this[this.length]=value;
}
}
//建立数组与函数的关系（因为该数组里的是没有这个函数的）
myAdd.call(arr,300,400,500);
myAdd.apply(arr,[300,400,500]);
Array.prototype.myAdd=myAdd;
//此时就可以用函数调用
arr.myAdd(300,400,500);
2.删除数组尾部数据，返回删除的单个数据（栈：pop）
Array.prototype.myRm=function(){
//this指代的是Array构造的函
//尾部值=arr[arr.lenngth-1]
//需要一个值保存被删掉的参数，并打印
var value=this[this.length-1];
this.length--;
return value;
}
console.log(arr.myRm());
console.log(arr,arr.length);
3.在头部新增任意多个数据并返回最终数组长度
（队列：unshift）
Array.prototype.myHeadAdd=function(){
//新增的值做插入操作：①长度+1；②后序遍历下标范围：1~max（从后往前遍历：当前空间值=前一空间值，即arr[i]=arr[i-1]）③arr[0]=新增的值
for(var key=arguments.length-1;key>=0;key--){
//这个for循环能使加的数组顺序与原数组相同（后序遍历）
var value=arguments[key];
this.length++;
for(var i =this.length-1;i>=1;i--){
this[i]=this[i-1];
}
this[0]=value;
}
return this.length;
}
4.在数组的头部删除数据，返回删除的单个值
(队列：shift）
Array.prototype.myHeadRm=function(){
//①先获得被删除的值；②正序遍历，将arr[i]=arr[i+1];③数组长度-1
var result=this[0];
var i=0;
while(i<this.length-1){
this[i]=this[i+1];
i++;
}
this.length--;
return result;
}
5.API接口 方法的功能：传参 返回值 当前数组是否会发生改变
sort()：默认以ASCII码排序，与比较函数一起则是正常的正序排序，会影响原数组
sort(函数作为参数，注意不是函数的结果)内部的排序算法（校招必考题:冒泡、快速、插入）
reverse（），反转元素顺序
看接口表格indexOf 查找对象属性是-1，找不到，地址值不同；若在数组中直接保存的地址值，则是能找到的
6.判断当前变量的数据类型：
方法1：typeof
方法2：a instanceof b; //true/false，判断a是否是b的子类(小——>大，当前变量是否在某个构造函数对应的原型链上)
方法3：isPrototypeOf()(大——>小，当前变量是否是子孙）
eg.Array.prototype.isPrototypeOf(arr);
//true,arr是Array.prototype上的子孙
方法2和方法3有环境上的差异性
方法4：数组中常用的封装好的静态函数：存在于某个构造函数内部，是公共共享的，isArray();
eg.Array.isArray(arr);//true
Array.isArray(new Array);//true
Array.isArray('abc');//false
Array.isArray(null);//false
7.数组的数据类型转换
区别：Boolean（null）;//false
Boolean（[]); //true
string转换
①Array.prototype.toString()方法（这种方法主要是做监测用的，不适合研发级别 的使用）
var arr=[100,true,'hello',{},[1,2,3],function(){}];
console.log(arr.toString());
//100,true,hello,[object Object],1,2,3(注意这里）,function(){}
②直接输出console.log();
③显示的String（） +'' 强制数据类型转换
——>调用arr.toString（同样不适合研发级别的使用）
console.log(String(arr));
console.log(arr+'');
④使用Array.prototype中的实例方法 join()
（作为输出打印字符串并能指定分割符；参数可指定可不指定，默认分隔符',';默认返回字符串；不会影响原数组）
应用场景：纯净的数据环境，能指定连接符
var str=arr.join();
var str1=arr.join('/');
⑤能维持数据结构、层次结构、数据类型
序列化与反序列化：JSON（经常用的，但它不传递函数）
JSON.stringify();
JSON.parse();（后台传递str过来：有接口约束：相同的数据类型，对从后台传来的值进行数据类型判断时，一般使用isArray()方法）
var str=JSON.stringify(arr);
console.log(str);
Day08
正则表达式
1.创建
① 构造函数：var pattern=new RegExp("正则表达式","修饰符")
eg.var pattern=new RegExp("abc","ig");
②字面量
var pattern=/正则表达式/修饰符;
eg.var pattern=/abc/ig;
2.修饰符
i:不区分大小写
g:全局查找
m:多行查找
3.原型方法：
exec():从参数中获取目的字符串，返回类数组对象
若有修饰符g则会维持lastIndex属性
eg.var pattern = /abc/ig;
var str = "abaBc ac ab abcd we";
console.log(pattern.exec(str));
//[ 'aBc', index: 2, input: 'abaBc ac ab abcd we', group s: undefined ]
test（）：返回布尔型,判断是否匹配
eg.
var pattern3=/^(\d{4})-(\d{2})-(\d{2})$/g;
var str3="2021-09-01";
console.log(pattern3.test(str3));//true
match():返回匹配的字符
eg.
//匹配abc.
var pattern1=/abc\./g;
var str1="abc.d abcb aacbc abc.c";
console.log(str1.match(pattern1));//["abc.","abc."]
toString(）
eg.
var pattern = new RegExp("abc", "i");
console.log(pattern.toString());
// /abc/i
4.字符类（PPT82）
. (点号，小数点) 匹配任意单个字符，但是行结束符除外
\d 匹配任意阿拉伯数字。等价于[0-9]
\D 匹配任意一个不是阿拉伯数字的字符。等价于[^0-9]。
\w 匹配任意来自基本拉丁字母表中的字母数字字符，还包括下划线。等价于 [A-Za-z0-9_]。
\W 匹配任意不是基本拉丁字母表中单词（字母数字下划线）字符的字符。等价于 [^A-Za-z0- 9_]。
\s 匹配一个空白符，包括空格、制表符、换页符、换行符和其他 Unicode 空格。
\S 匹配一个非空白符。
5.重复方式
1）贪婪模式：尽可能多的匹配（首先取最多可匹配的数量为一组进行匹配），当匹配剩余的字符串，还会继续尝试新的匹配，直到匹配不到为止，为默认模式。
2)非贪婪模式：尽可能少的匹配（每次取最少匹配的数量为一组进行匹配），直到匹配不到为止
**使用方法**：在量词后加上 **？**
6.数量词
| 字符 | 含义 |
| * | >=0次 |
| + | ≥1 次 |
| ？ | 0或1次 |
| {n} | n 次 |
| {n,} | ≥n 次 |
| {n,m} | n到m 次 |
继承：
1）原型链继承
2）借用构造函数
多态：父类类型的引用指向子类对象
class Student extends Person{ }
Person p=new Student();
Student p=new Student();
<div id="one"></div>
var one=document.getElementById("one");
one是Element，one是一个Node结点
DOM
浏览器封装的操作html、xml的api（构造函数、原型）
1.构造函数树
2.实例对象 document 是Document 实例对象
3.api
Node
属性
基本信息
nodeType/nodeName/nodeValue
层次结构
parentNode/childNodes/firstChild
/lastChild/nextSibling/previousSibling
方法
appendChild()/removeChild()/insertBefore()
replaceChild()/cloneChild()
Document
属性
head//title/body/forms/images
方法
getElementById()
getElementsByClassName()
getElementsByName()
getElementsByTagName()
querySelector(css选择器) 返回dom对象
querySelectorAll(css选择器) 类数组对象
在实际开发中 dom对象=node节点对象=element
Element
属性
id/className/name/href/target/src...
children
firstElementChild
lastElementChild
nestElementSibling
previousElementSibling
方法
setAttribute()
getAttribute()
querySelector()
querySelectorAll()
4.事件
1）三要素
事件源 dom对象
事件处理函数 匿名函数
事件对象 Event的实例对象，事件的详细信息
dom对象.onxxx=匿名函数
2）事件流
前提条件：嵌套的层次结构，有事件绑定
事件捕获（事件的捕获顺序：外——>内）
事件冒泡（默认事件执行顺序：内——>外）
3）事件代理
将时间处理函数绑定在父元素上，父元素代理子元素上的事件，加入为父元素绑定了点击事件，当点击子元素的时候，会执行父元素的事件处理函数，但是通过event.target拿到的是当前元素
4）事件对象
event.target：操作的那个对象
event.currentTarget：事件源
tbody.οnclick=function(event){
//点击td
event.target //td
event.currentTarget //tbody
}
event.stopPropatation()
event.preventDefault()
5)事件类型
click/dbclick
submit
focus
blur
44
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
