JavaScript 基础

数据类型转换

显式类型转换 （强制类型转换）：Number、ParseInt、ParseFloat

Number 整体转换如果包含不能转的内容转为NaN

1. 字符串 被转为 0
2. 布尔值 true 转为 1 false 转为 0 Number(true) // 1
3. 函数 转为 NaN
4. Number([]) / Number([’’]) / Number(null) 转为 0
5. Object 转为 NaN
6. Number([1, 2, 3]) / Number([‘1’, ‘2’, ‘3’]) / Number([’’, ‘’]) / Number(undefined) // NaN
7. Number(’+100’) // 100

parseInt 第二个参数是以多少进制转换（2，8，10，16进制）

• 从左到右开始转换，到第一个不是数字的位置截断
• 只能转以数字开始的字符串 其他的接卸都会返回NaN
• 能识别‘+’、‘-’、空格符号（空格只能识别开始的空格不能识别中间的空格）

parseFloat

• 从左到右开始转换，到第一个不是数字的位置截断
• 只能转以数字开始的字符串 其他的接卸都会返回NaN
• 能识别‘+’、‘-’、小数点（只能识别第一个）、空格符号（空格只能识别开始的空格不能识别中间的空格）

隐式类型转换 （转不成功转为NaN）

隐式类型转换：

• 加（+）减（-）乘（*）除（/）取模（%） 纯数字字符串会转化为数字

• 加（+） 字符串 + 数字 数字会被转化为字符串

• ‘++’ 、 ‘–’ 纯数字字符串转化为数字

• ‘>’、 ‘<’
  数字字符串与数字比较 字符串转为数字
  两数字字符串比较 会以ASCII码比较
  两数字比较 直接比较数字大小
  字符串比较为逐位比较

• !取反 把数据类型直接转为布尔值

• ‘==’ 只判断值 存在数据类型转换

NaN

• 不是一个数字的数字类型 typeof(NaN) // number
• 一旦程序中出现NaN 必然进行了非法运算符操作
• NaN 布尔值为 false （用于判断）
• NaN 自己不与自己相等 isNaN 判断是不是数字

函数

函数传参： 参数可以是数字、字符串、布尔、函数、对象、未定义
重用代码：

• 尽量保证HTML代码结构一致，可以通过父级选取子元素
• 实现核心主程序 用函数包起来
• 把每组内不同的值找出来，通过参数传入

作用域：什么范围内可以对数据进行读写操作？
Js预解析：

1. 先找var、function等申明的变量和函数 然后 逐行解读代码（从左往右，从上往下）
2. 所有的变量在正式运行代码前都提前赋了值undefined 所有的函数 在正式运行代码前 都是整个函数块
3. 表达式（+、-、*、/、%、++、–、！）可以修改预解析的值
4. 火狐不能对if for 下面的变量、函数进行预解析 避免兼容问题 不要在 if for 内声明变量、函数

return 返回值：

1. 函数默认返回undefined
2. 可以是数字、字符串、布尔值、函数、对象（元素、[]、{}、null）、未定义
3. 函数无return值、直接return （后面未接任何值） 都 返回undefined
4. return 后面任何代码都不执行
5. console 函数 得到的是 return 后面的值

arguments：

1. 实参的合集 有length属性
2. 当函数的参数个数不确定的时候使用
3. arguments能读也能写

var a = 1
function fn(a) {
	arguments[0] = 3  // arguments[0]就是a
	console.log(a) // 3
	var a = 2
	console.log(arguments[0]) // 2
}
fn(a)
console.log(a) // 1

判断中的真、假

真	假
非0的数字	0、NaN
非空字符串	空字符串
true	false
函数
能找到的元素	不能找到的元素
数组、JSON	null、undefined

获取样式

1. 行间样式可以通过 [element].style[样式属性] 获取（修改）样式
2. 通过getComputedstyle(element)[样式属性] 获取浏览器计算后的样式（IE低版本不支持）
3. cssText [element].style.cssText = “color:red; font-size:13px;”
4. IE低版本通过 [element].currentStyle[样式属性] 获取浏览器计算后的样式 （标准浏览器不支持）
5. getComputedstyle、 currentStyle不能正常取到复合样式；获取到的单一样式不能用于判断只能用于赋值；[样式属性] 中不能包含空格、‘-’等（如果存在返回undefined）；不能获取未设置的样式（不兼容）
6. getComputedstyle 在获取4.0前需要传第二个参数才能正常获取到（第二个参数值无要求）

定时器

设置定时器：setInterval(fn, time) 、 setTimeout(fn, time) 【 time毫秒 最好14以上】
清空定时器：clearInterval(setInterval(fn, time) )、 clearTimeout(setTimeout(fn, time))
定时器如果有事件控制需要先关后开

时间：系统时间对象

注：取到的都是number

1. new Date().getFullYear() // 获取年
2. new Date().getMonth() // 获取月
3. new Date().getDate() // 获取日
4. new Date().getHours() // 获取时
5. new Date().getMinutes() // 获取分
6. new Date().getSeconds() // 获取秒
7. Math.floor( t / 86400 ) // 天
8. Math.floor( t / 86400 / 3600 ) // 时
9. Math.floor( t / 86400 / 3600 / 60 ) // 分
10. Math.floor( t / 60 ) // 秒

字符串

• 空格 字符串的length也计算
• charAt(index) 返回指定位置的字符 index取值范围 0~字符串长度
• charCodeAt(index) 返回指定位置的字符的 Unicode 编码 index取值范围 0~字符串长度
• fromCharCode(Unicode 编码) 返回一个字符串 可以传多个用“，”分割
• indexOf(value, index) 返回指定的字符串值首次出现的位置 找不到返回-1 value：检索的字符串值 index：开始检索的位置，取值范围0~字符串长度 不能为负数
• lastIndexOf(value, index) 返回一个指定的字符串值最后出现的位置 找不到返回-1 value：检索的字符串值 index：开始检索的位置，取值范围0~字符串长度 负数自动当0处理
• subString(start， end) 返回字符串中介于两个指定下标之间的字符(新的字符串) start：从哪开始？end：到哪结束？ 注：可以检查start、end数的大小 小的数是start 大的数字是end 负数当0处理
• slice(start,end) 以新的字符串返回字符串的某个部分 从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符 注：不可自动检查start、end数的大小，-n 负数指倒数第n个字符
• toUpperCase() 将小写转为大写
• toLowerCase() 将大写转为小写
• split(separator, length) 将字符串分割成数组 separator：以什么作为分割（字符串或者正则） length：返回的数组的最大长度

JSON

for in 遍历 JSON 数组可以使用 for in 遍历的 key 就是对应的索引

数组

定义数组方式

• []
• new Array()

两种定义数组方式的区别

new Array(4) // 数组长度为4
new Array('4')  // 数组长度为1
[1, 2, 3, 4].length = 1  // 得到的数组[1]

清空数组的方法

• 设置数组的长度为0
• 重新赋值一个空数组

数组方法

• console.log(arr.push(4)) // 数组 push 4 后数组的长度

• push(value1，value2，…) 向数组的末尾添加一个或多个元素，返回新的长度

• unshift(value1，value2，…) 向数组的开头添加一个或更多元素，返回新的长度 注：IE低版本不支持

• pop() 删除并返回数组的最后一个元素

• shift() 删除并返回数组的第一个元素

• splice(index，num，val) 向数组添加、替换、删除元素，返回被删除的元素（无删除返回空） index：整数，添加、删除元素的位置，使用负数从数组结尾处规定位置 num：删除的项目数量。设置为 0，不删除 val：添加的新元素

      // 用于数组去重
      for (var i = 0; i < arr.length; i++) {
      	for (var j = i + 1; i < arr.length; i++) {
      		if (arr[i] == arr[j]) {
      			arr.splice(j, 1)
      			j--
      		}
      	}
      }
  

• sort(fn) 对数组的元素进行排序 fn： 函数 规定排序规则
  常见排序方法：快速、希尔（谢尔）、冒泡、归并、选择、插入
  可参见

      //修正 数字排序
      arr.sort(function (a, b) {
      	return a - b // 从小到大   b-a  从大到小
      })
  

• join(分隔符) 数组中的所有元素放入一个字符串 分隔符默认使用‘，’

• concat(arr, …) 连接两个或多个数组 arr: 可以是具体的值，也可以是数组对象

• reverse() 颠倒数组中元素的顺序

• slice(start， end) 从已有的数组中返回选定的元素（返回新的字符串） start：从哪开始？ end：到哪结束？ 负数从末尾开始算

• every(fn， thisValue) 检测数组所有元素是否都符合指定条件

  用指定函数检测数组中的所有元素
  如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测 
  如果所有元素都满足条件，则返回 true
   every() 不会对空数组进行检测
   every() 不会改变原始数组
   thisValue：对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"
  

  // 检查所有元素是否都大于等于 18
  var arrs = [32, 33, 16, 40, 60];
  
  function checkNum(num) {
      return num >= 18;
  }
  
  arrs.every(checkNum) // false
  

• some(fn， thisValue) 检测数组中的元素是否满足指定条件

   用指定函数检测数组中的所有元素
   如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测
   如果没有满足条件的元素，则返回false
   some() 不会对空数组进行检测
   some() 不会改变原始数组
    thisValue：对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"
  

  //数组中是否有元素大于 18
  var arrs= [3, 10, 18, 20];
  
  function checkNum(num) {
      return num >= 18;
  }
  
  arrs.some(checkNum) // true
  

随机数

Math.random() // 返回0~1之间的数
Math.round() // 四舍五入
Math.ceil() 向上取整
Math.max() 获取一组数字中最大的一个
Math.min() 获取一组数字中最小的一个

0~1 整数： Math.round(Math.random())
0~10 整数： Math.round(Math.random() * 10)
5~10 整数： Math.round(Math.random() * 5 + 5)
x~y 整数： Math.round(Math.random() * (y - x) + x)
0~x 整数： Math.round(Math.random() * x)
0~x 整数： Math.ceil(Math.random() * x)

javaScript 组成

• ECMAScript js核心标准 也是一个解析器
• DOM 通过document提供的一些方法或者属性来操作页面
• BOM 通过window提供的一些方法或者属性来操作浏览器

DOM （Document Object Model） document提供了一些API，赋予开发者操作页面的能力

nodeType 属性返回以数字值返回指定节点的节点类型

node	数值
元素节点（标签）	1
document	9
文本节点（文字、换行…）	3
注释节点	8
属性节点	2

节点 node

• childNodes：获取节点的子节点集合，包括元素节点、文本节点、属性节点（元素节点后面跟的回车符，默认为一个文本节点）

• children：获取的只是节点的元素节点集合

• nodeValue：根据节点的类型设置或返回节点的值

• attributes：获取指定节点的属性集合

• nodeName：获取指定节点的属性名

• parentNode：获取指定节点的父节点 找不到返回 null

• nextElementSibling：获取指定节点的下一个兄弟节点（相同节点树层中的下一个节点） 找不到返回 null

• previousElementSibling：获取指定节点的上一个兄弟节点 （相同节点树层中的上一个节点） 找不到返回 null

• firstElementChild：获取指定节点下的第一个子节点

• lastElementChild：获取指定节点下的最后一个子节点

• offsetParent：距离该元素最近的进行过定位的父元素（position：absolute relative fixed），如果其父元素中不存在定位则offsetParent为：body元素 （子级、父级都要有定位，有宽高才能正常使用）

   1、元素自身有fixed定位，父元素不存在定位，则offsetParent的结果为null（firefox中为：body，其他浏览器返回为null）
   2、元素自身无fixed定位，且父元素也不存在定位，offsetParent为<body>元素
   3、元素自身无fixed定位，且父元素存在定位，offsetParent为离自身最近且经过定位的父元素
   4、<body>元素的offsetParent是null
   5、IE7浏览器下，当元素本身经过绝对定位或相对定位，且父级元素无经过定位的元素时，offsetParent是<html>
   6、IE7浏览器下，如果父级元素存在触发haslayout的元素或经过定位的元素，且offsetParent的结果为离自身元素最近的经过定位或触发haslayout的父级元素
  

• offsetLeft：offsetLeft 获取当前元素到其定位父级（offsetParent）的 left 距离 （祖先节点都无定位，默认是到 body 的 left 距离）

• offsetTop：offsetTop 获取当前元素到其定位父级（offsetParent）的 top 距离 祖先节点都无定位，默认是到 body 的 top 距离）

• getBoundingClientRect：获取某个元素相对于视窗的位置集合。集合中有top，right， bottom， left，width，height 等属性 （获取的值是会根据滚动条变化的）

• getAttribute：获取元素的行间属性 获取不到为 null element.getAttribute(属性)

• setAttribute：设置元素的行间属性 element.etAttribute(key, value)

• removeAttribute：删除元素的行间属性 element.removeAttribute(属性)

注：getAttribute、setAttribute、removeAttribute 可以操作行间自定义属性，可以获取src、href等的相对地址，通过getAttribute获取的src、href获取的地址可用于判断使用，值不受浏览器影响 （其他方式获取的src、href不可用于判断，不同浏览器可能不同）

• clientWidth、clientHeight 获取某元素的宽高 不计算边框 加上padding 不支持 margin

• offsetWidth、offsetHeight 获取某元素的宽高 计算边框 加上padding 不支持margin

• document.createElement(标签名) 创建元素 可以通过这个方法解决标签不兼容问题

• parentNode.appendChild(childNode) 向parentNode末尾添加一个元素

• parentNode.insertBefore(childNode1，childNode2) 向parentNode的指定子节点前插入一个节点 childNode1 新节点 childNode2 已存在的节点 childNode2为假会将childNode1添加到parentNode的末尾

• parentNode.removeChild(childNode) 从parentNode中删除指定节点

• parentNode.replaceChild(node，childNode) 替换parentNode下指定节点 node用来替换的节点 childNode被替换的节点 两参数都必传

• node.cloneNode(boolean) 克隆某节点 boolean 默认false 事件不会被克隆

   true：克隆元素和元素包含的子节点
   false：克隆元素 但不包含元素的子孙节点
  

注：appendChild、insertBefore、replaceChild在操作一个已有的元素时，是将已有的元素移动。而不是复制一份进行操作

table

• table.tHead 获取table的thead
• table.tFoot 获取table的tfoot
• table.tBodies 获取表格主体的集合
• tBodies[n].rows / tHead.rows / tFoot.rows 获取表格的行 tr
• rows[n].cells 获取单元格 td
• table.rows 获取一组 tr

BOM 浏览器对象模型（Browser Object Model）BOM大部分方在window下

• window.open(url，mode) 打开一个新窗口（页面） url：打开页面的地址 如果url为空 默认打开空白页面 mode：打开的方式 如果打开方式为空 则以新窗口的方式打开 _self 本窗口 open() 方法的返回值是新打开窗口的window对象

• close() 关闭窗口 有兼容问题 火狐默认不能关掉 IE默认询问是否关闭 谷歌直接关闭 close方法可以关闭本窗口中通过js方法打开的新窗口

• window.navigator.userAgent：浏览器信息 window.navigator.userAgent.indexof(‘MSIE’) != -1 // IE浏览器

• window.location：浏览器地址信息

   window.location.href  //url
   window.location.search // url?后内容
   window.location.hash  // url#后内容
  

• onScroll：当滚动条滚动时触发

• onResize：当窗口大小发生改变时触发

• obj.focus()：给指定元素设置焦点

• obj.blur()：取消指定元素焦点

• obj.select()：选择指定元素内的文本内容

• onfocus： 获取焦点触发的事件
  注：元素设置焦点方式 1、点击 2、tab 3、js

event 事件对象 事件相关的详细信息

IE / Chrome： event是一个内置全局对象
FF：事件函数的第一个参数

阻止冒泡：当前要阻止冒泡的事件函数中调用 event.cancelBubble = true
事件绑定：

• onclick eg：document.onclick = fn // 会覆盖前面绑定的 fn

• 标准浏览器：addEventListener 非标准浏览：attachEvent

   ie：obj.attachEvent(事件名称，事件函数);
   	1.没有捕获
   	2.事件名称有on
   	3.事件函数执行的顺序：标准ie-》正序   非标准ie-》倒序
   	4.this指向window
  
   	obj.detachEvent(事件名称，事件函数)
   	
   标准：obj.addEventListener(事件名称，事件函数，是否捕获);
   	1.有捕获
   	2.事件名称没有on
   	3.事件执行的顺序是正序
   	4.this触发该事件的对象
   	
   	obj.removeEventListener(事件名称，事件函数，是否捕获)
   	addEventListener 第三个参数是否捕获 : 默认是false    false：冒泡  true：捕获
  

  // 事件绑定
  function bind(obj, evname, fn) {
  	if (obj.addEventListener) {
  		obj.addEventListener(evname, fn, false);
  	} else {
  		obj.attachEvent('on' + evname, function() {
  			fn.call(obj);
  		});
  	}
  }
  

  键盘事件：
  onkeydown : 当键盘按键按下的时候触发
  onkeyup : 当键盘按键抬起的时候触发
  event.keyCode : 数字类型 键盘按键的值 键值
  ctrlKey,shiftKey,altKey 布尔值
  当一个事件发生的时候，如果ctrl || shift || alt 是按下的状态，返回true，否则返回false

拖拽

// onmousedown：选择元素
// onmousemove：移动元素
// onmouseup：释放元素
oDiv.onmousedown = function () {
	// 将oDiv.onmousemove 改为 document.onmousemove  解决鼠标移动太快 不能移动元素问题（因鼠标移到元素外了）
	oDiv.onmousemove = function () {}
	oDiv.onmouseup = function () {}
}

// 完整块
oDiv.onmousedown = function (ev) {
	let ev = ev || event
	let disX = ev.clientX - this.offsetLeft
	let disY = ev.clientY - this.offsetTop
	document.onmousemove = function (ev) {
		let ev = ev || event
		oDiv.style.left = ev.clientX - disX + 'px'
		oDiv.style.top = ev.clientY - disY + 'px'
	}
	document.onmouseup = function () {
		document.onmousemove = document.onmouseup = null
	}
}

问题：拖拽的时候 如果文字被选中 拖拽会产生问题
原因：当鼠标按下的时候 如果页面中有文字被选中 会触发浏览器默认拖拽文字效果 （拖图片也有相同问题）
解决：标准浏览器 onmousedown 中 return false 非标准浏览器 设置全局捕获 onmouseup 的时候清楚 全局捕获
element.setCapture() // 设置全局捕获 element.releaseCapture // 释放全局捕获
给一个元素设置全局捕获后，这个元素会监听后续发生的所有事件。当有事件触发时，会被当前设置全局捕获的元素触发
兼容问题： IE：有setCapture 且有效果 FF：有setCapture 但没效果 Chrome：没有setCapture 会报错

oDiv.onmousedown = function(ev) {
	var ev = ev || event
	var disX = ev.clientX - this.offsetLeft
	var disY = ev.clientY - this.offsetTop
	
	// 非标准浏览器 设置全局捕获  阻止浏览器默认选中文字拖拽效果
	if ( oDiv.setCapture ) {
		oDiv.setCapture()
	}
	
	document.onmousemove = function(ev) {
		var ev = ev || event
		oDiv.style.left = ev.clientX - disX + 'px'
		oDiv.style.top = ev.clientY - disY + 'px'
	}
	
	document.onmouseup = function() {
		document.onmousemove = document.onmouseup = null
		//释放全局捕获 releaseCapture()
		if ( oDiv.releaseCapture ) {
			oDiv.releaseCapture()
		}
	}
	
	return false //标准浏览器 阻止浏览器默认选中文字拖拽效果
}

鼠标滚轮事件

ie/chrome : onmousewheel
event.wheelDelta
上：120
下：-120

firefox : DOMMouseScroll 必须用addEventListener （非标准浏览器会报错）
event.detail
上：-3
下：3

if (oDiv.addEventListener) {
	oDiv.addEventListener('DOMMouseScroll', fn, false);
}

return false阻止的是 obj.on事件名称=fn 所触发的默认行为
addEventListener绑定的事件需要通过event下面的preventDefault() 阻止事件默认行为
attachEvent 还是使用 return false 阻止事件默认行为

cookie 存储数据，当用户访问了某个网站（网页）的时候，我们就可以通过cookie来像访问者电脑上存储数据

• 不同的浏览器存放的cookie位置不一样，也是不能通用的
• cookie的存储是以域名形式进行区分的
• cookie的数据可以设置名字的
• 一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样
• 每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样
• 我们通过document.cookie来获取当前网站下的cookie的时候，得到的字符串形式的值，他包含了当前网站下所有的cookie。他会把所有的cookie通过一个分号+空格的形式串联起来
• 如果我们想长时间存放一个cookie。需要在设置这个cookie的时候同时给他设置一个过期的时间
• cookie默认是临时存储的，当浏览器关闭进程的时候自动销毁
• document.cookie = ‘名字=值’ eg：document.cookie = ‘username=leo’

// 设置cookie
function setCookie(key, value, t) {
	var oDate = new Date()
	oDate.setDate( oDate.getDate() + t )
	// oDate.toGMTString() 将事件转为字符串
	document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString()
}
// 获取cookie
function getCookie(key) {
	var arr1 = document.cookie.split('; ')
	for (var i=0; i<arr1.length; i++) {
		var arr2 = arr1[i].split('=')
		if ( arr2[0] == key ) {
			return decodeURI(arr2[1])
		}
	}
}
// 删除 cookie
function removeCookie(key) {
	setCookie(key, '', -1)
}