JS总结笔记(二)

一、数组

1.声明数组
var arr = [1,3,5,7,9];
var arr = new Array(1,3,5);
2.特殊情况(JS特性)
一个长度为4的数组 打印第五位，值为undefined
一个长度为4的数组 设置数组第六位 则数组为一个长度为6的 第五位为undefined的数组。
3.遍历数组
for(var i=0;len=arr.length;i<len;i++){//效率更高的遍历方式
console.log(arr[i]);
}
4.操作数组
4.1 push() 在数组末尾添加一个或多个元素,方法返回值为数组长度
4.2 unshift() 在数组的开头添加一个或多个元素,方法返回值为数组长度
4.3 pop() 删除最后一个元素，方法返回值为最后一个元素的值
4.4 shift() 删除第一个元素，方法返回值为第一个元素的值
4.5 concat() 连接两个数组
var aa = [1,3,5];
var bb = [“a”,”b”,”c”];
aa.concat(bb);
结果 [1,3,5,"aa","bb","cc"]; 返回值为被连接数组的副本
4.6 join() 将数组转换为字符串
var arr = [1,2,3];
console.log(arr.join(“-”)) //参数可选，不填默认用逗号分隔
结果： "1-2-3"
4.7 split() 将字符串转换为数组
var txt="aa-bb-cc";
txt.split("-");
结果 ["aa","bb","cc"];

二、DOM
js三大组成部分:ECMAscript DOM BOM
核心（ECMAScript）欧洲计算机制造商协会:描述了JS的语法和基本对象。
文档对象模型（DOM） 处理网页内容的方法和接口
浏览器对象模型（BOM） 与浏览器交互的方法和接口 window.alert() 很大的兼容问题
1 定义
DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。
目的其实就是为了能让js操作html元素而制定的一个规范。

三、判断真假
我们用条件语句来判断5大数据类型中的真假；
数据 结论
数字类型 所有数字都是真，0是假
字符串 所有字符串都是真，’ ’串是假
对象 所有对象都是真，null是假
未定义 undefined是假，没有真

四、访问关系
1 父节点 parentNode

2 兄弟节点 nextSibling 下一个兄弟 ie678属性
nextElementSibling 其他浏览器属性
previousSibling 同理 上一个兄弟
previousElementSibling

兼容写法： 注意 必须先写正常浏览器 后写 ie678否则会报错（判断先后顺序）
var div = one.nextElementSibling || one.nextSibling;
div.style.backgroundColor = "red";

3 子节点
firstChild 第一个孩子 ie678
firstElementChild 第一个孩子 正常浏览器

var one.firstElementChild || one.firstChild;

lastChild
lastElementChild

4 孩子节点
childNodes 选出全部的孩子
childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点 （嫡出）
火狐 谷歌等高本版会把换行也看做是子节点
利用 nodeType == 1 时才是元素节点 来获取元素节点
children 重要 选取所有的孩子 （只有元素节点,所以很常用没有兼容问题）
ie 678 包含 注释节点 这个要避免开。

5 创建节点
var div = document.createElement(“li”);

6 插入节点
6.1. appendChild(); 添加孩子 放到盒子的 最后面。
6.2. insertBefore(插入的节点，参照节点) 子节点 添加孩子, 如果第二个参数 为 null 则 默认这新生成的盒子放到最后面。

7 删除节点
var da = document.getElementById("xiongda");
demo.removeChild(da);

8 克隆节点
cloneNode();
括号里面可以跟参数 ， 如果 里面是 true 深层复制， 除了复制本盒子，还复制子节点
如果为 false 浅层复制 只复制 本节点 不复制 子节点。

9 设置节点属性
9.1 获取节点属性 getAttribute(属性)
alert(demo.getAttribute("title"));
9.2 设置节点属性 setAttribute(“属性”,”值”);
div.setAttribute(“class”,”demo”);
9.3 删除节点属性
demo.removeAttribute(“title”)

五、内置对象
内置对象就是指这个语言自带的一些对象，供开发者使用，这些对象提供了一些常用的或是最基本而必要的功能。

5.1 日期函数
var date = new Date();
常用的日期的方法
获取日期和时间
getDate() 获取日 1-31
getDay () 获取星期 0-6
getMonth () 获取月 0-11
getFullYear () 获取完整年份（浏览器都支持）
getHours () 获取小时 0-23
getMinutes () 获取分钟 0-59
getSeconds () 获取秒 0-59
getMilliseconds () 获取当前的毫秒
getTime () 返回累计毫秒数(从1970/1/1午夜)

new Date(“2015/12/12 17:30:00”); //自定义时间

5.2 定时器
写法1 setInterval(fun, 1000); //每隔1秒执行一次fun
setTimeout(fun,1000); //一秒后执行 fun 只执行一次
写法2 setInterval(“fun()”,1000)
写法3 setInterval( function(){} , 1000 )
错误写法: setInterval(fun(),1000)
关闭定时器: clearInterval(名称)

注意问题1：
setInterval是排队执行的
假如 间隔时间是1秒， 而执行的程序的时间是2秒 上次还没执行完的代码会排队, 上一次执行完下一次的就立即执行, 这样实际执行的间隔时间为2秒
setTimeout延迟时间为1秒执行, 要执行的代码需要2秒来执行,那这段代码上一次与下一次的执行时间为3秒.
注意问题2：
JavaScript是单线程执行的，当某一段代码正在执行的时候，后续所有的任务都必须等待，行成一个队列，一旦当前任务执行完毕，再从队列中取下一个任务，也被称作“阻塞式执行”，所以，一段代码中设定了一个setTimeout，那么浏览器就会在合适的时间，将代码插入任务队列，如果这个时间设为0，就代表立即插入队列，但不是立即执行，仍然要等待前面代码执行完毕。所以setTimeout并不能保证执行的时间，是否及时执行取决于JavaScript线程是拥挤还是空闲

5.3 arguments对象
只能在正在使用的函数内使用。
例: function fn(a,b,c) { console.log(a+b+c); alert(arguments.length;)}
fn(1,3,4,6);
//返回的是实参的个数
在递归调用中，推荐使用arguments.callee来代替函数名本身.

六、运算符
6.1 运算符
一元操作符 ++， -- + - +5 -6
逻辑操作符 ! && ||
基本运算符 +, -, *, /, %
关系操作符 >, <, >=, <=, ===, ==, !=, !==
= 赋值 == 判断 === 全等
条件操作符 （三元运算符） ? :
赋值运算符 +=, -=, *=, /=, %=
a+=5 a= a + 5
逗号运算符 , var a=0,b=0;

6.2 运算符顺序
1 ()
2 !、-、++、-- (-10) 负号 正号
3 、/、%
4 +、- 10-5
5 <、<=、<、>=
6 ==、!=、===、!==、
7 &&
8 ||
9?:
10 =、+=、-=、=、/=、%= 赋值

6.3 实例

1. a&&b 结果是什么？
   如果a 为假 ，则返回 a
   如果a 为真 ，则返回 b
   var aa = 0&&1;
   alert(aa) // 0
   var bb = 1&&0;
   alert(bb); //0
   var cc = 1&&10;
   alert(cc); // 10

2. a||b
   如果 a 为假 则返回b
   如果 a 为真 则返回a
   console.log(0||1); 1
   console.log(1||0); 1
   console.log(1||5); 1
   console.log(5||1); 5

var a = 1 && 2 && 3;
console.log(a); 3
var b = 0 && 1 && 2;
console.log(b); 0
var c = 1 && 0 && 2;
console.log(c); 0
%=
a+=3
a = a % 3;