数组，字符串，以及一些BOM操作总结（自用总结，不喜勿喷）

数组，字符串，以及一些BOM操作总结

基本数据类型：number、string、Boolean、undefined、null

引用数据类型：object（array也属于object）、function

数组的常见API

pop（） 删除并返回数组的最后一个元素 修改原数组

push（） 向数组的末尾添加一个或者更多的元素，并返回新的长度 修改原数组

shift（） 删除并返回数组的第一个元素 修改原数组

unshift（） 想数组的开头添加一个或更多的元素，并返回新的长度 修改原数组

reverse（） 颠倒数组中元素的顺序 修改原数组

sort（） 对数组的元素进行排序 修改原数组

splice（） 删除元素， 并向数组添加新元素 修改原数组

concat（） 连接两个或更多的数组，并返回结果 不修改原数组

join（） 把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔 不修改原数组

slice（） 从某个已有的数组返回选定的元素 不修改原数组

tostring（） 把数组转化为字符串，并返回结果 不修改原数组

去重方式

1、双重for循环，找到重复的就删除

2、利用对象属性名不冲突

3、ES6（set是一种新的数据类型，加强版数组，默认不重复）

JSON数据格式（对象和数组相互嵌套）

ES5新增的数组常见方法

两个索引方法：indexof（）和lastindexof（）

indexof()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1

lastindexof（）方法返回指定元素在数组中的最后一个的索引，如果不存在则返回-1.从数组的后面向前查找，从fromindex处开始

5个迭代方法：foreach（）、map（）、filter（）、some（）、every（）

foreach（）方法对数组的每个元素执行一次提供的函数

map（） 方法创建一个新的数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果

filter（） 方法创建一个新数组，其包含通过所提供函数实线的测试的所有元素

some（）方法测试是否至少有一个元素可以通过被提供的函数方法。该方法返回一个Boolean类型的值

every（）方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值

2个归并方法：reduce（）、reduceright（）

reduce（）方法对数组中的每个元素执行一个由您提供的reducer函数，将其结果汇总返回单个返回值

reduceright（）

方法接受一个函数作为累加器和数组的每个值（从右到左）将其减少为单个值

string内置对象

常见api

charAt（） 返回在指定位置的字符

indexOf（） 检索字符串，返回下标

lastindexOf（） 从后向前检索字符

charCodeAt（） 返回在制定位置的字符的Unicode编码

fromCharCode（） 从字符编码创建一个字符串

concat（） 连接字符串

match（） 找到一个或多个（正则表达式的）匹配

replace （） 替换与正则表达式匹配的子串

search（） 检索与正则表达式相匹配的值

slice（） 提取字符串的片断，并在新的字符串中返回被提取的部分

split（） 把字符串分割为字符串数组

substr（） 从起始索引号提取字符串中指定数目的字符

substring（） 提取字符串中连个指定的索引号之间的字符

toLowerCase（） 把字符串转换为小写

toUpperCase（） 把字符串转化为大写

trim（） 去掉字符串前后空格（ES5）

startsWith（） 字符串是否以某个字符开头（ES6）

endsWith（） 字符串是否以某个字符结尾（ES6）

includes（） 字符串是否包含某个字符(ES6)

repeat（） 重复某个字符串几次（ES6）

ASCLL码和字符集

字符串的大小比较 比较的是ASCLL码 其中字符和英文从小到大的顺序是0_9<AZ<a~z

Math内置对象

Math.PI 返回圆周率

math对象方法

abs（x） 返回数的绝对值

sin(x) 返回数的正弦

cos(x) 返回数的余弦

tan(x) 返回角的正切

ceil（x） 对数进行上舍入

floor（x） 对数进行下舍入

round（x） 把数四舍五入最为接近的整数

max（x,y） 返回x和y中的最高值

min（x,y） 返回x和y中的最低值

pow(x,y) 返回x的y次幂

sqrt(x) 返回数的算术平方根

random() 返回0~1之间的随机小数，包含0不包含1

Date内置对象

日期对象的创建

时间戳是指格林威治时间1970年01月01日00时00分00秒（北京时间1970年01月01日08时00分00秒）起至现在的总毫秒数（时间戳）

var date = new Date（） //当前时间的日期对象

var date = new Date（2012,6,10） //2012年7月10号的日期对象

get系列API

getFullYear() 返回年

getMonth（） 返回月份0~11

BOM（browser object model 浏览器对象模型）

window下的属性 document frames history location navigator screen

window是全局浏览器内置顶级对象

1、全局变量默认是挂在window下的

2、window下的子对象

A、location

window.location.reload（） 刷新页面的方法。一般情况下给reload（）传递一个true，让他刷新，并不使用缓存。

B、window.navigator

C、history

history.go（1） 参数可写任意整数，正数前进 ，负数后退

history.back（） 后退

history.forward（） 前进

D、screen：屏幕

window.screen.width 返回当前屏幕宽度（分辨率）

window.screen.height 返回当前屏幕的高度（分辨率）

window下的弹框方法

alert（） prompt（） confirm（）

定时器

超时定时器setTimeout clearTimeout

间隔定时器setInterval clearInterval

window.onload 表示最后解析

window.onscroll 绑定滚轮事件

window.onresize

DOM(Document Object Model文档对象模型)

获取DOM节点

1、document.getElementByid（id名）

2、getElementsByTagName（标签名）得到的是一个集合（不止一个是一堆）

3、getElementsByName（） 通过Name值获取元素，返回值是集合，通常是用来获取有name的input的值

【注】不是所有的标签都有name值 低版本的浏览器会有兼容问题

4、children属性，获得DOM元素的所有子元素；返回值是集合

5、parentNode属性，获得DOM元素的父级元素

6、getElementsByClassName（class名称）

7、ES5选择器

document.querySelector（） 一旦匹配一个元素，就不往后匹配了

document.querySelectorAll（） 匹配所有满足的元素

属性的获取和操作

1、getAttribute（） 获取元素的属性值，他是节点方法！所以前缀必须是节点

2、setAttribute（）设置元素的属性。设置的属性永远都是字符串类型

3、removeAttribute（） 删除属性

DOM元素类型（元素、文本和属性）

操作DOM

增删克隆节点

创建节点

var oDiv = document.createElement（“div”）

克隆节点

clonedNode = Node.cloneNode(boolean) //只有一个参数，传入一个布尔值，true表示深克隆，赋值该节点下的所有子节点；false表示浅克隆，只复制该节点

插入节点

parentNode.appendChild(childNode) //将新节点追加到子节点列表的末尾

parentNode.insertBefore(newNode,targetNode) //将newNode插入targetNode之前

替换节点

parentNode.replaceChild(newNode,targetNode) //使用newNode替换targetNode

移除节点

parentNode.removeChild(childNode) //移除目标节点

node.parentNode.removeChild(node) //在不清楚父节点的情况下使用

node节点

根节点：root>>>>>HTML没有父节点

节点操作：（通过父子关系）

childNodes 获取当前元素的所有子节点

nodeType 节点种类，返回值是数字

nodeValue 获取（文字）节点的文本内容

nodeName 返回node节点名称（#text，注释，标签…）

一个可以找出元素节点的方法

innerHTML和nodeValue

box.innerHTML = “<strong>abc<strong>”

box.childNodes[0].nodeValue = <strong>abc</strong>

innerHTML会将标签解析

nodeValue不会进行解析，会将标签名转译成字符串，直接输出

childNodes 获取当前元素接地那的所有子节点

firstChild 获取当前元素节点的第一个子节点

lastChild 获取当前元素节点的最后一个子节点

previousSibling 获取当前节点的前一个同级节点

nextSibling 获取当前节点的后一个同级节点

************以上五种方法都包含空白文本节点

firstElementChild 获取当前元素节点的第一个元素子节点

lastElementChild 获取当前元素节点的最后一个元素子节点

parentNode 获取当前节点的父元素

创建文档碎片 以节约资源

++DOM尺寸和位置

box.style.width box.style.height

只能获取到内联样式属性的css样式中的宽和高，有则获取，没有则返回空

getStyle（box，“width”）

通过计算获取元素的大小，无关你是否是行内、关联或者链接，如果设置了返回大小 没设置返回默认值 IE浏览器没设置返回auto

box.clientWidth box.clientWidth

返回了元素大小，但没有单位，默认单位是px，（返回结果不含边框）

box.scrollWidth box.scrollHeight

获取滚动内容的元素大小

box.offsetWidth box.offsetHeight

返回了元素大小，默认单位是px（包含边框）

坐标位置

box.clientLeft box.clientTop

获取左边框和上边框的宽度

box.offsetLeft box.offsetTop

获取元素当前相对于offsetParent父元素的位置

box.scrollTop box.scrollLeft

获取滚动内容上方和左方的位置（就是隐藏内容的高度）

事件对象

事件兼容 e=e||window.event

鼠标事件及方法

e.buttons 返回鼠标点击按键（1左键，2右键，4中键滚轮）

e.offsetX/offsetY 获取事件触发最近的盒子的坐标

e.clientX/clientY 获取可视区的坐标（根据浏览器的定位）

e.screenX/screenY 获取整个屏幕的坐标

e.pageX/pageY 获取文档的坐标（包含滚动条）

键盘事件

keydown、keyup、keypress

有兼容问题

e.keyCode||e.which

阻止默认事件

e.preventDefault

window.event.returnValue = false

return false

事件冒泡

阻止冒泡

e.stopPropagation()

e.cancelBubble = true

事件监听

可以给同一个事件绑定多个事件

attachEvent（“on句柄”，执行函数）IE方法

addEventListener（“句柄”，执行函数，布尔值）flase为冒泡阶段 true为捕获阶段

移除事件监听

oDiv.removeEventListener( “click”,fn）

oDiv.detachEvent(“onclick”,fn)

事件委托

使用场景主要用于事件源不稳定的情况下，可以把事件委托给父级

判断事件源

e.target||e.srcElement