javascript

JavaScript

JavaScript特点
1.客户端代码，在客户机上执行
JavaScript特殊的地方在于它也可以作为服务器端代码执行，但是需要搭建node环境
在浏览器上运行
2.解释型语言
被内置于浏览器或者nodejs平台中的JS解析器执行，执行前无需编译
3.弱类型语言
4.从上往下顺序执行
二、变量名的命名规则
1.变量名由字母、数字、下划线以及$组成。
2.不要使用下划线或者数字作为变量名的开头。
3.变量名应该具有一定意义，使用小驼峰命名规则。
4.不要使用关键字或是保留字
1.JS的typeof返回哪些数据类型
string Boolean number undefined object function
2.列举三种强制类型转换和两种隐式类型转换
强制(parseInt parseFolat number)
隐式(== =)
四.undefined和null
null：可以表示一个空对象的指针
undefined：对未声明和未初始化的变量执行typeof操作符都返回undefined
undefined派生自null值。
2.Object对象是模拟现实生活的对象，对象由键值对组成，通过使用大括号将所有键值对括起来
3.数组Array
数组是一个特殊的对象，包含了多个值，值与之值间使用逗号分隔开。所有的值通过中括号括起来
4.函数Function
函数是代码执行单元，用于实现某些特殊功能
5.typeof判断数据类型
undefined、Boolean、string、number、object、function
五.操作符
1.一元运算符
递增递减操作符：++表示每次递增1，–表示每次递减1.常用与遍历操作，比如遍历某个数组，求所有值的和。
var a=3;
a++; //加完后a=4
a–; //减完后 a=3
++a;
–a;
后置++,–,先使用a，后++，–
前置++，–，先++，–，在使用a
2.赋值运算符
var a=4;
a+3; //a=a+3;
3.加+：相当于调用Number(),将其他数据类型转换为number类型
4.减-
将一元减应用于数值时，数值会变成负数。
将一元减应用于非数值时，遵循与一元加操作符相同的规则，最后将得到数值转化为负。
5.比较与算符
=== ！ < > <= >=
6.逻辑运算符
逻辑与&&(同真才真，有假则假)
如果第一个操作数是null，NaN,undefined,false,0,"“可被转化为false的值的时候返回改值
如果第一个数位真，则返回第二个数。
逻辑或||(有真则真，同假才假)
如果两个操作数都是null,NaN,undefined,false,0,”“可被转换为false的值的时候返回该值
如果第一个操作数是null，NaN，undefined，false，0,”",则返回第二个操作数
如果第一个操作数是真，直接返回第一个操作数。
非(NOT):连用两次逻辑非，就可以将任意数据类型转化为Boolean类型
三目运算符
variable=boolean_expression?true_value:false_value;
(例如)：求任意两个数之间最大值
function max(m,n){
return m>n?m:n //如果m>n为true返回m,如果m>n为false，返回n.
}
7.其他数据类型转为string
(1)tostring()函数
除了null，undefined，其他三种基本数据类型的变量均有一个tostring()函数，该函数可以获取该指定的字符串表示。
如果变量为number类型，默认情况下tostring()是以十进制格式返回数值的字符串表示，通过传递参数，可以输入以二进制，八进制，十六进制乃至任意有效进制格式的字符串值。
(2)string()函数，包装器，转换器
可以将其他任意基本数据类型的值转化为字符串，包括null,undefined,
(3)使用拼接空字符串进行转换 +""
8.其他数据类型转化为Boolean
Boolean()包装器 或者使用!!转换
9.其他数据类型转换为Number
Number()包装器
Number(undefined) //NAN
10.其他数据类型转化为Number
parseInt()函数
如果转换的值是null，undefined，Boolean，均转化为NaN
parseFloat()函数
如果转换的值是null，undefined，Boolean，均转化为NaN
六.流程控制语句
(1)if(condition){
//condition表示任意表达式
code to run if condition is true
}
run some other code
(2)if-else
if(condition){
//如果condition为true时，执行if代码块中的内容，否则，执行else代码块中的内容
code to run if condition is true
}else{
run some other code instead
}
(3)if-else if-else
If(condition1){
//多条件分支，当condition1为true时，执行statement1,否则当condition2为true时执行 statement2，当condition1,condition2都为false的时候执行statement3。
statement1 }
else if(condition2)
{ statement2 }
else { statement3 }
(4)分支语句
switch(expression){
case choice1:
run this code
break;
case choice2:
run this code instead
break;
default:
aactually,just run this code
//expression可以是变量也可以是表达式，当expression===choice，执行当前case代码块 的代码。每个case代码块都必须包含break; 表示执行完当前代码块的内容跳出switch 代码块。当所有case不满足情况下，执行default代码块的内容。default位置可以随意
}
(5)循环语句：一个循环语句应该具备三要素：计数器，循环结束条件，迭代器
3.split()和join()的区别
前者是将字符串切割成数组的形式，后者是将数组转化成字符串
七.对象
1.创建Object实例
(1)使用构造函数创建，new Object()
var person = new Object()
person.name=“rose”;
person.age=23;
(2)使用对象字面量表示法
不同的属性之间用",“分割，属性名和属性值之间用”:"分割
var person={
name:“rose”,
age:23
}
2.访问对象属性
(1)点表示法，右侧必须是以属性名称命名的简单标识符
person.name
(2)中括号表示法
person[“first name”]
3.删除属性
delete stu.name //删除学生对象中的name属性
4.检测属性
in 检测某属性是否是某对象的自有属性或者是继承 属性
Object.prototype.hasOwnProperty()检测给定的属性是否是对象的自有属性，对于继承性将返回false。
Object.prototype.propertyIsEnumerable()检测给定的属性是否是该对象的自由属性，
5.Object构造函数原型对象中的部分属性之方法
(1)constructor 保存用户创建当前对象的函数，与原型对象对应的构造函数
(2)hasOwnProperty(propertyName)检查给定的属性名是否是对象的自有属性
(3)propertyIsEnumerable(propertyName)检测给定的属性在当前对象实例中是否存在
(4)valueOf()返回对象的字符串，数值，
(5)toLocaleString()返回对象的字符串表示，
(6)toString() 返回对象的字符串表示
(7)isPrototypeOf(object) 检查传入对象的原型。
6.对象序列化
JSON.stringify(obj) 将对象序列化为Json字符串，只能序列化对象可枚举的自有属性。
JSON.parse(jsonStr) 反序列化
7.属性类型
(1)数据属性
Configurable 表示是否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性(属性直接定义在对象中，默认为true)，当为false时，不能重新定义，不能使用delete删除
Enumerable 表示能否通过for-in循环返回属性。(属性直接定义在对象中，默认为true)
writeable 表示能否修改属性的值。(属性直接定义在对象中，默认为true)
value 包含这个属性的数据值 name:jack
(2)访问器属性
访问器属性不包含数据值，包含的是一对get\set方法，在读写访问器属性时，就是通过这两个方法进行操作处理的，访问器属性不能直接定义，要通过Object.defineProperty()这个Object的静态方法来定义
访问器属性特性：
Confjgurable 表示是否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性(默认为false)
Enumerable 表示能否通过for-in循环返回属性(默认为false)
get 在获取属性时调用的函数，默认为undefined
set 在写入属性时调用的函数，默认为undefined
8.定义属性
(1)使用object的defineProperty静态方法可以定义对象中的单个数据属性或者访问器属性(Object.defineProperty)
(2)Object.defineProperties() Object的静态方法
该方法接受两个对象参数，第一个参数是要添加或者要修改的属性对象，第二个参数是对象的属性和描述对象
(3)读取属性的特性
Object.getOwnPropertyDescriptor()
获取指定属性的描述符该方法接受两个参数，第一个为属性所在的对象，第二个为要读取其描述符的属性名称。
八.函数
1.函数允许我们封装一系列代码来完成特定任务。当想要完成某一任务时，只需要调用相应的代码即可。方法一般为定义在对象中的函数。
函数由function关键字声明，后面紧跟函数名，函数名后面为形参列表，列表后大括号括起来的内容为函数体。
2.表示方法
(1)函数声明
function 函数名(形参列表){
//函数体
}
(2)函数表达式
var 函数名=function(形参列表){
//函数体
}
3.函数的内部属性
(1)arguments
是类数组对象，包含着传入函数中的实际参数，arguments还有一个callee属性，用来指向拥有这个arguments对象的函数
(2)this
指向的是函数赖以执行的环境对象
(3)立即执行函数 IIFE
(function(){})()
(4)函数声明的提升
函数声明提升到最顶部，变量声明提升到顶部
(5)局部变量与全局变量
函数内部使用var修饰的变量，是函数内部的局部变量
(5)函数的调用
函数声明好之后并不会直接运行，需要进行调用才能运行
(6)调用函数
函数名(实参列表)
函数名.call(执行环境对象，实参列表)
函数名.apply(执行环境对象，实参列表数组)
函数名.bind(执行环境对象)(实参列表)
函数名.bind(执行环境对象，实参列表)()
4.函数属性和方法
函数本质上也是一种对象，拥有属性和方法
(1)length表示函数希望接受的命名参数个数，即形参的个数
(2)apply()可以调用当前函数，并可以指定其执行环境对象
(3)call()可以调用当前函数，并可以指定其执行环境对象
5.函数的应用
函数本质上是一种对象，可以将其当作普通对象来使用。
(1)作为参数
由于函数名本身就是变量，所以函数可以当作值来使用(参数，返回值)
(2)作为返回值
九.数组
1.初始化
使用Array构造函数
var arr=new Array()
var arr=new Array(20) //预先指定数组的大小
var arr =new Array(“terry”,“larry”) //传入参数
2.使用数组字面量
由一对包含数组项的方括号表示，多数组项之间用逗号隔开
var arr=[“terry”,“larry”]
var arr=[] //空数组
3.访问数组变量名[索引]
(1)如果索引小于数组的长度，返回对应项的值
(2)如果索引大于数组长度，返回undefined
(3)如果给索引大于等于数组的长度的位置设置了值，数组自动增加到该索引值加1的长度
4.数组的检测
对于一个网页或者一个全局作用域而言，使用instanceof操作符即可判断某个值是否是数组。如果网页中包含多个框架，新增了Array.isArray()方法进行判断
var arr=[];
typeof arr; //结果为object
arr unstanceof Array //结果为true，在同一个作用域下可以这么判断
Array.isArray(arr)； //结果为true，判断arr是否是数组类型
5.数组序列化
toString() 在默认情况下都会以逗号隔开
join() 使用指定字符串来分隔数组字符串
6.栈，队列方法，改变原数组(数组方法)
push()尾部添加 pop()尾部删除 {栈}
unshift()头部添加 shift()头部删除 {队列}
7.排序
(1)reverse() 反转数组项的顺序，改变原数组
(2)sort()
var arr =[11,2,23,7,4,1,9,1]
console.log(arr.sort(compare));
//该比较函数适合于大多数数据类型
function compare(v1,v2){
if(v1>v2){
return -1;
}else if(v1<v2){
return 1;
}else{
return 0
}
}
8.截取方法
concat()不改变原数组
slice(）数组切割，当接受两个参数，起始到结束之间的项，但是不包含结束位置的项。不改变原数组
spilic() 向数组的中部插入数据将始终返回一个数组，该数组中包含从原数组中删除的项
（1）删除：指定两个参数(起始位置，要删除的项数)
（2）插入：指定三个参数(起始位置，0，要插入的任意数量的项)
（3）替换：指定三个参数((起始位置，要删除的项数，要插入的任意数量的项)
9.索引方法
indexOf() 从数组开头向后查找，使用全等操作符，找不到该元素返回-1，第一个参数为要查找的项，第二个参数（可选）为索引开始位置
lastIndexOf() 从数组末尾项前查找，使用全等操作符，找不到该元素返回-1.第一个参数为要查找的项，第二个参数(可选)为索引开始位置。
10.迭代方法
参数：每一项上运行的函数，运行该函数的作用域对象（可选）
(1)every()对数组的每一个元素运行给定的函数，如果该函数对每一项都返回true，则该函数返回true。
var arr =[11,2,23,7,4,1,9,1]
var result=arr.every(function(item,index,arr){
return item>2;
});
console.log(result); //false
(2)some() 对数组中每一运行给定的函数，如果该函数对某一项返回true，则返回true
(3)filter() 对数组中的每一项运行给定的函数，会返回满足该函数的项目组成的数组。
(4)map() 对数组中的每一元素运行给定的函数，返回每次函数调用的结果组成的数组。
(5)forEach() 对数组中的每一元素运行给定的函数，没有返回值。
十.面向对象程序设计
1.内置对象及内置函数
基本包装类型
Boolean、Number，不建议直接使用这两种包装器类型
String类型
(1)length 属性，获取字符串的字符数量
(2)charAt(i) 返回给定位置的字符
(3)charCodeAt(i) 返回给定位置的字符的字符编码
(4)indexOf() 从前往后查找指定字符所在位置
(5)lastIndexOf() 从后往前查找字符串所在位置，可以有第二个参数，代表从哪个字符串中那个位置开始查找
(6)concat() 将一个或多个字符串拼接起来，返回拼接得到的新字符串，但是大多使用“+”拼接
(7)slice() 截取字符串(开始位置，结束位置)不包括阔结束位置的字符
(8)substr()截取字符串(开始位置，截取字符个数)
(9)sunstring() 截取字符串(开始位置，结束位置)不包括结束位置的字符
(10)trim() 删除前置以及后置中的所有空格，返回结果
(11)toLowerCase() 转换为小写
(12)toUpperCase() 转换为大写
2.Math对象
常用方法
(1) 比较方法
Math.min() //求一组数中的最小值 Math.max() //求一组数中的最大值 Math.min(1,2,19,8,6); //1将小数值舍入为整数的几个方法
Math.ceil() 向上舍入
Math.floor() 向下舍入
Math.round() 四舍五入
Math.ceil(12.41); //13
Math.floor(12.41); //12
Math.round(12.3); //12
Math.round(12.5); //13
随机数 Math.random() //返回大于0小于1的一个随机数 [0，1)
3.Date
将一个字符串转换为Date对象： var str = “2019-12-12”; var date = new Date(str);　　 //字符串转换为Date对象 document.write(date.getFullYear()); //然后就可以使用Date对象的方法输出年份了  Date的方法  Date.prototype.getFullYear() 返回年份 如2020。 var date = new Date(); document.write(date.getFullYear());　　//返回2020,2020年  Date.prototype.getYear() 返回Date对象中的年份值减去1900
十一.深入理解对象
1.创建对象
（1）工厂模式
function creatPerson(name,age){
var o=new Object();
o.name=name;
o.age=age;
o.job=job;
o.sayName=function(){
alert(this.name);
}
return 0;
}
var p1=createPerson(“terry”,11,“boss”),
var p2=createPerson(“larry”,12,“daBass”)
!!工厂模式问题
var t1=typeOf p1; //object无法对象识别，即所有对象都是Object类型
2.构造函数模式
js中可以自定义构造函数，从而自定对象类型的属性和方法，构造函数本身也是函数，只不过可以用来创建对象。
functionPerson(name,age,job){
this.name=name;
this.sge=age;
this.job=job;
this.sayName=function(){
console.log(this.name);
}
}
var p1=new Person(“terry”,11,“boss”);
var p2=new Person(“larry”,12,“ceo”)
3.使用new操作符调用构造函数创建对象实际上经历了以下几个步骤：
（1）创建一个新对象
（2）将构造函数的作用域赋予给新对象(this指向这个新对象)
（3）执行构造函数中的代码
（4）返回新对象
4.原型模式
每个函数都有一个属性：prototype(原型属性)，这个属性是一个指针，指向一个对象，该对象的用途是包含可以由特定类型的所有实列共享的属性和方法。
function Person(){}
Person.prototype.name=“tom”;
Person.prototype.age=22;
Person.prototype.job=“boss”;
Person.prototype.friends=[];
Person.prototype.sayName = function(){ alert(this.name); } var p1 = new Person(); p1.name = “terry”; var p2 = new Person(); p2.name = “larry”;
十二.继承：子构造函数继承父构造函数中的属性和方法。当原型对象等于另外一个类型的实例及继承。Dog.prototype=new Animal();
2.默认原型
所有函数默认原型对象都是Object的实列，默认原型对象中都会包含一个内部指针，指向Object
3.确定实列和构造函数的关系
1）通过使用instanceof
2)通过使用isPrototypeOf()
4.经典继承
function Animal(name){
this.name=name;
this.colors=[“red”,“gray”];
}
function Dog(name){
//继承Animal
Animal.call(this,name);
this.color=“gray”;
}
Animal.prototype.sayName=function(){
alert(this.name);
}
5.组合继承（原型链继承+经典继承）
function Animal(name){
this.name=name;
this.colors=[“red”,“gray”];
}
function Dog(name){
//继承Animal
Animal.call(this,name);
this.color=“gray”;
}
Animal.prototype.sayName=function(){
alert(this.name);
}
//原型链继承，继承了方法
Dog.prototype=new Animal();
Dog.prototype.constructor = Animal;
十三.文档对象模型
1.DOM是针对HTML和XML文档的一个API(应用程序编程接口)，DOM描绘了一个层次化的节点数，允许开发人员添加，移除，修改页面某一部分。
2.文档对象模型
(1)取得自定义属性
getAttribute()参数为实际元素的属性名
(2)设置属性
dom.className=“one”
dom.setAttribute(“className”,“one”)
setAttribute():两个参数，第一个参数为要设置的特性名，第二个参数为对应值。如果该值存在，替换
（3）移除属性 removeAttribute()移除指定特性
十四.DOM事件
1.JavaScript与HTML之间的交互是通过事件实现的，事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
2.事件三要素：
(1)事件目标(event target) 发生的事件与之相关联或与之相关的对象
(2)事件处理程序(event handler)
处理或相应事件的函数
(3)事件对象(event object) 与特定事件相关且包含有关该事件详细的信息
3.事件流：描述的是从页面中接受事件的顺序
(1)事件冒泡(IE事件流)
从内到外 事件开始由最具体的元素接收，然后逐级向上传播到不具体的节点
（2）事件捕获 不太具体的节点更早接收事件，具体的节点到最后接收事件。

5.Ajax请求get和post方式的区别
get:url后的查询字符串
默认get上传数据，数据格式是表单数据格式application/x-www-form-urlencoded
post:参数在请求体里
如果post传递参数的格式是表单格式需设置application/x-www-form-urlencoded,还需要将js对象转为表单数据格式（qs）qs.stringify(obj)
如果post方式传递参数格式是json格式，需要设置application/json,还需要将js对象转为json字符串传递JSON.stringif(obj)
get大小有限制(只能提交少量参数)
get提交数据不安全
6.call和apply的区别
两者传递的参数不同
apply传入的是一个参数数组
call传入的是直接的参数列表
7.Ajax请求时，如何解析josn数据
JSON.parse
8.什么是事件委托
利用事件冒泡的原理，让自己所触发的的事件，有父元素代替执行
9.什么是闭包，对页面有什么影响 闭包的好处
闭包就是能够读取其他函数内部的变量， 使得函数不被GC回收，如果过多使用闭包，容易导致内存泄漏
闭包的好处：

1. 希望一个变量长期驻扎在内存当中(不被垃圾回收机制回收)
2. 避免全局变量的污染
3. 私有成员的存在
4. 安全性提高

10.如何阻止事件冒泡
ie：e.cancleBubble=true;
非ie：e.stopPropagation();
11.如何阻止事件默认
e.preventDefault();
12.添加、删除、替换、插入到某个节点的方法
1)创建节点
creatElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2)添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore()
3)查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的name属性值
getElementById() //通过id 唯一性

13.函数声明和函数表达式的区别
函数声明function t(){} 函数表达式 t=function(){}
在Javscript中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。
14.JavaScript事件流模型都有什么？
1）事件冒泡：事件开始由最具体的元素接收，然后逐级向上传播
2）事件捕获：事件由最不具体的节点接收，然后逐级向下，一直到最具体的
3）DOM事件流：事件捕获、目标阶段、事件冒泡
15.JavaScript的两种变量范围有什么不同
全局变量：当前页面内有效
局部变量：函数方法内有效
16.null和undefined的区别
null是一个表示无的对象，转为数值时为0，undefined表示一个无的原始值，转为数值时为NAN
17.new操作符具体干了什么
1）创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型
2）属性和方法被加入到this引用对象中
3）新创建的this由对象引用，并且最后隐式的返回this
18.写一个function清除所有字符串前后空格
String.prototype.trim=function(){
return this.replace(/^\s+/,"").replace(/\s+$/,"")
}
19.如何获取JavaScript三个数中的最大值和最小值
Math.max(a,b,c); //获取最大值
Math.min(a,b,c);//获取最小值
20.JavaScript是面向对象的，怎么体现JavaScript是继承关系
使用prototype来实现
21.form中的input可以设置为readonly和disable，请问两者有什么区别？
readonly不可以编辑，但可以选择和复制，值可以传递到后台
disable不能编辑，不能复制，不能选择，值不可以传递到后台
22.JavaScript中三种主要数据类型两种复合数据类型两种特殊数据类型
主要数据类型：string、Boolean、number
复合数据类型：function object
特殊类型：undefined、null
23.程序中捕获异常的方法

try{
}catch(e){
}finally{
}

24.Ajax原理

1. 创建对象
   var xhr=new XMLHttpRequest();

2. 打开连接
   xhr.open(‘get’,url)

3. 发送请求
   xhr.send();发送请求到服务器

4. 接收响应
   xhr.onreadystatechange=function(){
   if(xhr.readyState=4&&xhr.status=200){
   //获取响应数据
   console.log(‘xhr.responseText’)
   }if(xhr.readyState=4&&xhr.status=500){

   console.log(‘错误:’+xhr.responseText)
   }
   }
   25.js中的三种弹出式消息提醒(警告窗口、确认窗口、信息输入窗口)
   alert
   confirm
   prompt
   26.节点的种类有几种，分别是什么
   1）元素节点
   nodeType=1;
   2)文本节点
   nodeType=3
   3)属性节点
   nodeType===2
   27.innerHTML和outerHTML的区别
   innerHTML(元素内包含的内容)
   outerHTML(自己以及元素内的内容)
   28.冒泡排序
   var arr[1,21,2,45,3,5,7,9,45]
   for(var i=0;i<arr.length;i++){
   for(var j=0;j<arr.length-1-i;j++){
   if(arr[j]>arr[j+1]){
   var temp=arr[j];
   arr[j]=arr[j+1];
   arr[j+1]=temp
   }
   }
   }
   29.forEach和map的相同点和不同点
   相同点：forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item(当前一项)、index(索引值)、arr(数组)匿名函数中的this指向window 只能遍历数组，都有兼容问题
   不同点：map速度比forEach快
   map会返回一个新数组，不对原数组产生影响，forEach不会产生新数组
   map因为返回数组可以链式操作，forEach
   JavaScript中Object构造函数的方法
   Object构造函数的方法节
   Object.assign()
   通过复制一个或多个对象来创建一个新的对象。
   Object.create()
   使用指定的原型对象和属性创建一个新对象。
   Object.defineProperty()
   给对象添加一个属性并指定该属性的配置。
   Object.defineProperties()
   给对象添加多个属性并分别指定它们的配置。
   Object.entries()
   返回给定对象自身可枚举属性的[key, value]数组。