JS冲刺

1、简单/复杂数据类型
1)基本数据类型把数据名和值直接存储在栈当中
复杂数据类型在栈中存储数据名和一个堆的地址，在堆中存储属性及值，访问时先从栈中获取地址，再到堆中拿出相应的值
简单数据类型：number,string,boolean
复杂数据类型：object
空类型:undefined,null
五种基本数据类型（Number,String,Boolean,Undefined,Null）,和一种复杂数据类型（Object）
基本数据类型作为参数时，函数内部对参数值的修改不会改变外部变量的值
复杂数据类型作为参数时，函数内部对参数值的修改会改变外部变量的值
2)作用域及作用域链
es5中存在函数作用域和块级作用域，es6新增块级作用域
全局变量：
该变量是由var声明的，为全局变量，可以在页面的任何位置使用。如果页面不关闭，该变量将一直占有内存空间不被释放
外部不可以访问函数内部的变量
块级作用域：{}一对大括号可视为一块，在这对括号内定义的变量只能在该块内使用。js中不存在块级作用域，在块内声明的变量也可以在块外使用，函数除外。
es6中存在块级作用域
3)类型转换
显式转换：
转换为数值类型：Number(mix)、parseInt(string,radix)、parseFloat(string)
转换为字符串类型：toString(radix)、String(mix)
转换为布尔类型：Boolean(mix)
隐式转换：
常见的隐式转换有
①双等号模糊比较时，js会对不同类型的数据进行隐式转换：
null==undefined ''==false 都返回true
转换的主要路径是对象->字符串->数值 布尔值->数值
②字符串拼接时，会把数值转换为字符串
2、
1)字符串转整数
parseInt(其他类型的数据);
2)其他类型转字符串：变量名.toString()
3)数组：创建数组：
new Array(1,2,3)
new Array(4)//长度为4
将伪数组转换为真数组的方法Array.prototype.slice.call(yourFakeArr)
3、函数
1)arguments查看所有传入的实参
.length:获取当前参数列表的参数个数
arguments[i] 读取实参
2)
命名函数：函数具有函数名，函数名存储的是函数代码
匿名函数：函数不具有函数名，不能直接调用
(function(){console.log("你好")})();
函数的自调用，没有名字，声明的同时直接调用

4、预解析：
把变量声明提前到当前所在作用域最上面。把函数声明提前到当前所在作用域最上面。先提升var，再提升function
在当前作用域下,js运行之前，会把带有var和function关键字的事先声明，并在内存中安排好。然后再从上到下执行js语句。
预解析只会发生在通过var定义的变量和function上。

5、节点
1）定义：不是元素，节点是页面中的所有内容（标签，属性，文本）,Node。它使得任何标签中的元素获取都十分方便

2）节点的相关属性

6、对象
1)遍历方式
除了可以点出来之外，还可以用变量名["键名"]的方式来访问
function Person(name,age){
this.name=name;
this.age=age;
this.play=function(...){...};
}//自定义类
var obj=new Person("cc",20);
obj["name"]=xx;
//通过中括号取代点
obj["play"]();

obj["name"]=xx;
//通过中括号取代点
obj["play"]();
2)创建对象的方式
工厂模式/字面量方式/构造函数
3)
自定义构造函数创建对象做了4件事
1、内存中开辟空间，存储创建的新的对象
2、把this设置为当前的对象
3、设置对象的属性和方法的值
4、返回this对象

7、JSON
JSON遍历时可以使用for-in循环(for(var key in json))

8、Date
1)没有字面量形式，以new Date()创建
2)new Date('可传入时间')
3)获取细节：
var month=dt.getMonth();
var day=dt.getDate();
var hour=dt.getHour();
var min=dt.getMinutes();
var sec=dt.getSeconds();

9、String
1)字符串具有不可变性，仅指值。不可通过索引修改
2)常用字符串属性和方法：
.length 字符串长度
.charAt(index) 返回指定索引处的字符
.indexOf(str,[fromIndex]) 从fromIndex开始，返回第一次出现指定字符(串)处的索引，可用来判定字符串以什么开头===0
.lastIndexOf(str) 从字符串末尾开始找
.concat(str1,str2,str3,…) 将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回.是无缝连接
.replace(str,substr) 用substr替代字符串中str,只替代找到的第一个str，全部匹配需要使用正则，不改变字符串本身
.slice(beginIndex[,endIndex]) 提取一个字符串的一部分，并返回一串新的字符串。包左不包右，不改变原字符串 。复制字符串的快捷方法：.slice(0)从头截到尾
.split(seperator,num) 将一个字符串分割为字符串数组，seperator为分隔符，num限制所得到字符串长度
.substr(index,length) 从index开始截取长度为length的字符串
.toLocaleLowerCase() 将调用的字符串转为小写
.toLocaleUpperCase() 将调用的字符串转为大写
.trim() 去空格

10、Array
1)instanceof 判断是否属于某一数据类型
2)常用数组属性和方法：
Array.from(arr) 根据arr中的内容复制一个新数组
.concat(arr1，arr2,...) 按参数先后顺序将数组合成一个新数组
.every(callback(el.index,thisArr){})
测试数组的所有元素是否通过了指定函数的测试，返回布尔类型。callback处为一回调函数,被调用时传入3个参数：元素值，元素的索引，原数组
全部数组元素满足条件时，才会返回true
.filter(callback) 创建一个新数组，该数组的元素时原数组中符合函数规定条件的元素
.push(值)；将值添加到数组最后边
.pop();删除数组中的最后一个元素,返回值就是删除值
.shift();删除数组中第一个元素，返回值就是删除值
.unshift(值);向数组的第一个元素之前插入一元素，返回的是插入的数据
.forEach(callback(el.index,thisArr){}) 为数组中所有元素执行一次callback，没有返回值。forEach不改变简单数据类型数组的数据
.join(seperator) 方法用于把数组中的所有元素放入一个字符串,元素之间用seperator分隔
.reverse() 反转数组
.slice(start,end) 返回一个从开始到结束选择的数组的一部分浅拷贝到一个新数组，包左不包右，不改变原数组
.splice(start,num,sub) 可以用来增添或者删除数组元素。num为正数时，从索引start开始，删除num个元素，并使用sub替代，返回被删除的数组
num为0时，从start开始增添sub
.sort() 数组排序，按照ASCII码排序，不改变原数组
括号中可以传回调函数，用于指定排序规则
arr.sort(function(a,b){
//a相当于冒泡排序中的a[j]
//b相当于冒泡排序中的a[j+1]
if(a>b){
return 1;
}else if(a==b){
retuen 0;
}else{
return -1;
}
});//固定写法

11、DOM
1)文档对象模型
网页即文档
节点：标签、文本、属性
元素：网页中的标签
2)nodeType
nodeType:
1:标签
2：属性
3：文本
3)nodeName:节点的名字
1：标签节点:大写的标签名字
2：属性节点：小写的属性名字
3：文本节点：#text
4)nodeValue:节点的值
标签节点：null
属性节点：属性值
文本节点：文本内容
5)获取相关的父级节点和父级元素
只有标签才能作为父节点，属性和文本不存在嵌套关系
对象名.parentNode
对象名.parentElement
6)寻找子节点,注意节点包括换行和空格等,返回伪数组
.childNodes
寻找子元素
children
7)第一个子节点：
.firstChild
第一个子元素：
.firstElementChild
最后一个子节点：
.lastChild
最后一个子元素：
.lastElementChild
某个元素的前一个兄弟节点：
previouSibling
某个元素的前一个兄弟元素：
previouElementSibling
某个元素的后一个兄弟元素：
.nextSibling
某个元素的后一个兄弟节点：
.nextElementSibling
凡是获取节点的代码，在谷歌与火狐中，得到的都是相关的节点；
凡是获取元素的代码在谷歌和火狐得到的都是相关的元素；从子节点和兄弟节点开始，
凡是获取节点的代码在ie8中得到的是元素；获取元素的相关代码，在ie8中得到的是undefined
,即不支持
8).setAttribute('property','value')设置属性
.getAttribute('property')

12、事件
1)绑定事件的方式
①标签内绑定
<... 事件名称='f()'>
②on绑定
.on事件名称=(e){
函数内的this指向window对象
e是mouseEvent
}
③.addEventListener(不用on开头事件名,()=>{})
2)禁用文本框:disabled=true

13、常用属性
1)获取对象的属性时，用className
2)textContent/innerText/innerHTML
前两者都是返回/设置相应元素内的文本，包括后代内的，但是前者ie8不支持。
innerHTML不仅会返回文本，还会返回/设置内容的标签
3)设置/获取/移除自定义属性
setAttribute(name,value)
getAttribute(name)
removeAttribute(name)

14、伪数组
伪数组也称为类数组，它本身也是对象，但具有以下特点：
1.按索引方式存储数据；
2.具有length属性；
3.没有数组的push、pop等方法；
有哪些常用的伪数组呢？
function的arguments对象，还有getElementsByTagName等，自定义的某些对象。
如何转换为标准数组？
1、Array.prototype.slice.call({0:"likeke",1:12,2:true,length:3});
2、[].slice.call()，但不如第一个方式效率高。
3、es6中Array.from({0:"likeke",1:12,2:true,length:3})
4、es6中的rest参数，比如：
var sortNumbers = (...numbers) => numbers.sort();

15、this
1)箭头函数：在定义时绑定父级(基于父执行上下文)执行上下文的this。简单对象（非函数）是没有执行上下文的
只取决于外层（函数或全局）的作用域
2)普通this:this对象是在运行时基于函数的执行环境绑定的：在全局函数中，this指向的是window；
当函数被作为某个对象的方法调用时，this就等于那个对象

16、常用事件(均小写）
onLoad ：当页面加载完毕后触发，常用于body元素
onUnload ：当页面关闭后触发，常用于body元素
onBlur ：当失去焦点时触发，常用于input表单元素
onFocus ：当获得焦点时触发，常用于input表单元素
onClick ：当点击时触发，可以用于任何元素
onMouseOver ：当鼠标悬浮时触发
onMouseOut ：当鼠标离开时触发
onMouseDown ：当鼠标按下时触发
onMouseUp ：当鼠标弹起时触发
onMouseMove ：当鼠标移动时触发
onChange ：当状态改变时触发，常用于select下拉选框
onSelect ：当文本框中的文本选中时触发
onkeypress ：当键盘按下时触发（要快于onkeydown）
onkeydown ：当键盘按下时触发（可能捕获功能键，如上下左右）
onkeyup ：当键盘弹起时触发
onSubmit ：当表单提交时触发，常用于form表单元素
onReset ：当表单重置时触发，常用于form表单元素

17、创建元素的方式
1)document.write('标签及内容')
document.write()创建元素，如果是在页面加载完毕后，
此时通过这种方式创建元素，
页面中的所有内容都会被重写而被代替。如果是在页面未加载完成时执行，则不会出现以上情况
2).innerHTML('标签及内容')
不建议body使用innerHTML属性，因为这样同样会使得body内元素被重写
3)document.createElement('标签') 只能放小写标签名，自己再另外加属性
//创建元素
//把元素追加到父元素中
//点击按钮，在div中创建一个p
my$("btn").onclick = function () {
//创建元素,该方法返回一个对象
var pObj = document.createElement("p");
pObj.innerHTML='你好'
//把创建后的子元素追加到父元素中
my$("dv").appendChild(pObj);//可多次追加
};

3、相关操作方法
均由父级元素调用
.insertBefore(newChild,refChild)
在某元素之前追加一个元素。第一个参数是需要追加的元素，第二个参数是参照元素，将在它前面追加
.replaceChild(newChild,refChild)
替换元素，参照的元素将被替换为新的元素
.removeChild(oldChild)
移除父级元素中的某一子级元素

18、绑定与解绑事件
1)attachEvent/addEventListener
前者仅ie8支持
多次绑定后执行的顺序是不一样的，attachEvent是后绑定先执行，addEventListener是先绑定先执行。
绑定事件时，attachEvent必须带on，如onclick，onmouseover等，而addEventListener不能带on，如cli
ck，mouseover。
参数个数也不一样
2)attachEvent("on事件类型",命名函数)
detachEvent("on事件类型",函数名称)
3).addEventListener(type,listener,useCapture)
type:非on的事件类型
listener:事件处理函数
useCapture:true:事件捕获 false：事件冒泡
.removeEventListener(type,listener,useCapture)
4)事件处理函数对象
在IE/Opera中，是window.event，而在Firefox中，是event
e.type 事件类型
e.target 触发事件的对象
e.eventPhase 事件阶段判断
1–捕获阶段
2–目标阶段
3–冒泡阶段
冒泡和捕获时候不可能同时发生的
5)冒泡/捕获
事件捕获和事件是相反的,也就是说,当用户触发了一个事件的时候,这个事件是从DOM树的最上层开始触发一直到捕获到事件源.
冒泡则是由最特定到最不特定
.cancelBubble 阻止冒泡，仅支持ie和google
.stoppropagation() 阻止冒泡和捕获，主流浏览器均支持

19、事件委托
1)利用冒泡的原理，把事件加到父级上，触发执行效果
2)好处：提高性能，借助event.target事件可以从更宏观的角度进行事件触发
可以为之后生成的元素绑定好之前的事件

20、BOM
1)Browser Object Model
浏览器对象模型
浏览器中的顶级对象：window
页面中的顶级对象：document
页面中所有的内容都是属于浏览器的，也都是window的，window是可以省略的
2)locatoion 对象
.scheme 通信协议
.host 主机名及端口号
.hostname 主机名
.hash 锚点
.port 端口号
.pathname 路径
.protocol 协议
.href 设置页面跳转地址
.assign() 同上，会被记录到历史中
.reload() 重新加载页面
.replace() 替换地址栏地址，不会记录到历史中
3)history对象
.back() 后退
.forward() 前进
.go(number|URL) 可加载历史列表中的某个具体的页面
4)navigator
.platform 系统类型
.userAgent 浏览器信息

21、定时器
1)定时器都是属于window对象的
2)多次定时执行:setInterval
返回一个定时器的id
清除定时器clearInterval(id)
3)单次定时执行：setTimeout(func,time)
同样也需要清理
clearTimeout(id)

22、位置属性
1)left 和 offsetLeft
left是可读可写的，offsetLeft不可写
left的值为带单位的字符串，offsetLeft是仅数值
前者若是为显式给值，weiundefined,外联样式给定的left无法获取，通过window.getComputedStyle(对象)获取元素
2)mouseEvent属性：
clientX：当鼠标事件发生时（不管是onclick，还是omousemove，onmouseover等），鼠标相对于浏览器（这里说的是浏览器的有效区域）x轴的位置；
clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置；
screenX：当鼠标事件发生时，鼠标相对于显示器屏幕x轴的位置；
screenY：当鼠标事件发生时，鼠标相对于显示器屏幕y轴的位置；
offsetX：相对于事件触发源的左偏移
offsetY：相对于事件触发源的右偏移
pageX:距页面左上角。对于整个页面来说，包括了被卷去的body部分的长度
pageY:距页面左上角。对于整个页面来说，包括了被卷去的body部分的长度
3)window.pageXOffset
整数只读属性，表示X轴滚动条向右滚动过的像素数（表示文档向右滚动过的像素数）。IE不支持该属性，使用body元素的scrollLeft属性替代。
window.pageYOffset
整数只读属性，表示Y轴滚动条向下滚动过的像素数（表示文档向下滚动过的像素数）。IE不支持该属性，使用body元素的scrollTop属性替代。
IE 8 及 更早 IE 版本不支持该属性,但可以使用 document.documentElement.scrollLeft 和 document.documentElement.scrollTop 属性
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft
|| document.body.scrollLeft,
top: window.pageYOffset || document.documentElement.scrollTop
|| document.body.scrollTop || 0
};
}
4)scrollLeft/scrollTop
这两个属性只能用于元素设置了overflow的css样式中。否者这两个属性没有任何意义。
且overflow的值不能为visible，但可以为hidden,auto,scroll的之中，但是hidden最常见。
向左/上被卷曲（被隐藏）的内容的长度
scrollHeight/scrollWidth :元素实际的高宽，包括被卷曲的
在有文档声明的情况下，也就是第一行有个dtd声明，标准浏览器认识document.documentElement.scrollTop，
可chrome竟然不认识他。在没有文档声明的情况下，chrome、safari还是可以读取到scrollTop值。因为chrome是通过document.body.scrollTop获取值的。
解决办法是可以通过以下代码来兼容各浏览器获得需要的值
var scrollTop = document.body.scrollTop || (document.documentElement && document.documentElement.scrollTop);
5)
offsetLeft值跟offsetTop值的获取跟父级元素没关系，
而是跟其上一级的定位元素(offsetParent)(除position:static;外的所有定位如fixed,relative,absolute)有关系。
offsetWidth/offsetheight
offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距
offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距

6)
.clientWidth //可视区域的宽，不包括边框
,clientHeight //可视区域的高，不包括边框
.clientLeft //左边框的宽度，与margin无关
.clientTop//上边框的宽度
7)e.preventDefault();阻止浏览器默认事件

23、对象
1)创建方式：字面量/工厂模式/构造函数/自定义构造函数

24、原型与原型链：共享数据，节省存储空间，实现继承
1)通过自定义构造函数创建对象
2)我们创建的每一个函数都有prototype属性，它指向一个对象，即原型对象。原型对象包含这个类的所有实例共享的属性,方法及constructor构造函数，
所以原型对象可以理解为这个特定类型构造函数的实例。prototype是用来给实例对象的，__proto__是由自身的构造函数对象给的，实例中的__proto__即为原型对象中的prototype
3)JS 创建的对象都有一个_proto_属性，_proto_属性连接实例和构造函数的原型对象，
对外不可见，无法直接获得，可以通过Object.getPrototypeOf（）方法得到这个属性
4)所有构造器(指Array/String等)的prototype都是object类型，但是function的prototype是一个空函数，且所有构造器（内置对象）的_proto_指向这个空函数
5)当代码获取某个对象的属性时，首先会在对象实例本身内查找，
如果查找不到，就会向上搜索其原型对象。因此在实例中改变原型对象中的属性值，
并不会重写这个属性值，只是原型对象中的属性值被屏蔽了而已。即为实例添加一个属性时，
这个属性会屏蔽原型对象中的同名属性。若想访问原型对象中的属性值，需要使用delete将这个同名属性在实例中彻底删除。
注意：使用delete删除构造函数中的属性将把实例的原型对象中的属性也删除
6).hasOwnProperty("属性名")可以检测一个属性是存在于实例还是原型对象中，其返回值true代表存在于实例中，false代表存在于原型对象中
7)当使用对象字面量来重写原型对象时，会改变其constructor属性，使其指向Object构造函数，而不是原有的对象
8)为系统内置对象的原型对象中添加方法
很多实例对象调用的方法在实例对象中都没有，都是在其所在的构造函数中的原型存在的。
为内置对象中的原型对象添加方法是允许的。相当于改变了系统的源码
如果要避免以上的情况，记得写上构造器
构造函数名.prototype={
constructor:
}

25、继承
1)原型继承
functuin A(){}
function B(){}
B.prototype=new A()
缺陷:用过继承同一实例创建的对象具有相同的属性值
2)构造函数继承
继承时不用改变原型的指向，直接调用父级的构造函数的方式
来为属性赋值即可。把要继承的父级的构造函数拿过来用即可
functuin A(){}
function B(){
A.call(this,args)
}
缺陷：只能继承属性，无法继承方法
3)组合继承
结合1,2继承，保证继承到所有的属性和方法
4)拷贝继承:
深拷贝:通过for in 将构造方法的prototype或某一实例复制过来，新对象成为独立的个体
for(var key in A){
B[key]=A.prototype[key]
}
浅拷贝：直接复制某一实例对象，即获取该对象的地址,一旦原对象发生变化，现对象也会改变

26、高级函数
1)函数定义有函数表达式和函数声明两种方式，函数表达式不存在函数提升
f1()//正常执行
f2()//undefined
function f1(){}
var f2=()=>{}
2)获取对象类型：Object.prototype.toString.call(对象名)
3)name：函数的名称，不可修改
.arguments:.length实参的个数
.length:形参的个数
.caller：返回函数的调用者

27、作用域和作用域链
1)作用域链：变量的使用，从里向外层层搜索，搜索到了就可以直接使用了，搜索不到则报错
2)在A作用域中使用的变量x，却没有在A作用域中声明（即在其他作用域中声明的），对于A作用域来说，x就是一个自由变量
3) 我们常常认为，在某一级变量中找不到定义的变量，要到上一级父级作用域去找，这是不准确的。
var num=10
function f1(){
console.log(num)
}
function f2(){
var num=20;
(function(){
f1()
})()
}
f2()//10
所以应该这么说：要到创建这个函数的那个作用域中取值——是“创建”，而不是“调用”

28、闭包
1)闭包就是能够读取其他函数内部变量的函数。
例如在javascript中，只有函数内部的子函数才能读取局部变量，
所以闭包可以理解成“定义在一个函数内部的函数“。
在本质上，闭包是将函数内部和函数外部连接起来的桥梁。
闭包将函数内部的变量泄露了出去
2)缓存数据，延长作用域链
3)仅在两种情况下产生闭包：函数作为返回值，函数作为参数传递

29、apply/call
1)可以改变函数中this的指向，可以用于函数的调用
apply和call方法中如果没有传入参数，或者传入null,那么调用该方法的函数中的this就是window
函数名.apply(thisArgs,实参数组);
函数名.call(thisArgs,参数列表)
2)