事件和数组操作

事件冒泡

IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。

事件捕获

不太具体的节点会更早的接收到事件，而最具体的节点最后接收到事件。目前IE9以上版本，Safari，Chorome，Opera，Firefox都支持这种事件流模型。

事件委托

我们不应该在大量的dom上都绑定事件，我们可以使用事件委托来应对大量节点需要绑定事件的场景。这种方式利用了冒泡的原理。

如下例，在id为list的ul上，监听所有li的点击事件，使用事件委托的话我们只需注册一个事件监听即可。

var ul = document. getElementById( 'list');

var listChildren = ul. querySelectorAll( 'li');

ul. addEventListener( 'click', function( ev){

var ev = ev || window. event;

var target = ev. target || ev. srcElement;

for( var i = 0, len = list. length; i< len; i++){

if( list[ i] === target){

console . log ( target . innerHTML );

}

}

});

DOM事件流

事件流包括三个阶段，事件捕获阶段，处于目标阶段，和事件冒泡阶段。事件处理被看作事件冒泡阶段的一部分。

DOM0级事件处理程序

每个元素都有自己的事件处理程序属性，这时候的事件处理程序是在元素的作用域中运行。

let btn = document.getElementById('myBtn');
btn.onclick = function({
    console.log(this)}}

DOM2级事件处理程序

DOM2级事件定义了两个方法，分别用于处理事件和删除事件处理程序。它们都接受三个参数，处理的事件名，事件处理程序的函数，一个布尔值，布尔值为true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序。

let btn = document.getElementById('myBtn');
let handler = function(){
console.log(this);
};
btn.addEventListener('click',handler,false);
btn.removeEventListener('click',handler,false);

数组检测

if(value instandof Array){
}
if(Array.isArray(value)){
}

转换方法

const color = ['red','yellow',green'];
console.log(color.toString());

console.log(color.join('||'); // red||yellow||green

栈方法

栈是一种LIFO（后进先出）的数据结构，ES提供了push和pop的方法分别来进行入栈和出栈的操作。

队列方法

shift()方法可以移除数组中的第一个项并返回该项，同时将数组长度剪1，unshift()方法则可以在数组前端添加任意个项，并返回新数组的长度。

重排序

reverse()方法可以反转数组的顺序

sort()方法可以调用每个数组项的toString()转型方法，然后比较得到的字符串，以确定如何排序。但是对数字进行排序，仅仅比较转为字符串的数字，不能够正确的进行排序。所以需要作以下处理。

 function compare(a, b) {
     if (a < b) {
         reurn - 1;
     } else if (b > a) {
         return 1;
     } else if (a === b) {
         return 0;
     }
 }

 var values = [0, 5, 1, 15, 10];
 values.sort(compare);
 console.log(values); // 0,1,5,10,15

操作方法

contact()方法可以复制数组（深拷贝），还可以把接收到的参数添加到这个拷贝数组的末尾，最后返回新构建的数组。

var colors = ['red', 'green', 'blue'];
var colors2 = colors.concat('yellow', ['black', 'brown']);

console.log(colors); //red,green,blue
console.log(colors2);//red,green,blue,yellow,black,brown

slice()方法也可以复制数组，（深拷贝），并且可以指定拷贝开始和结束的位置，然后返回一个新数组。

var colors = ['red', 'green', 'blue', 'yellow', 'black'];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1, 3);

console.log(colors); //red,grren,blue,yellow,black
console.log(colors2); //green,blue,yellow,black
console.log(colors3); //green,blue

splice()可以删除数组中某个位置开始的，指定数量的项，并在这个位置插入传入的项

var num = [0,1,2,3,4,5];
var removed = num.splice(0,1);
console.log(removed); // 0,1
console.log(num); // 2,3,4,5

removed = num.splice(1, 0, "aaa", "bbb");
console.log(removed); // null
console.log(num); // 2,"aaa", "bbb",3,4,5

removed = num.splice(1,2, "ok");
console.log(removed); //"aaa", "bbb"
console.log(num); // 2,"ok",3,4,5

位置方法

ES5为数组实例添加了两个位置方法，indexOf()和lastIndexOf()。这两个方法都接收两个参数，要查找的项和（可选）表示开始查找起点位置的索引。这两个方法返回查找的项在数组中的位置，或者在没有找到的情况下返回-1。

var num = ['a','b','c','d','c','b','a'];
console.log(num.indexOf('c'));// 2
console.log(num.lastIndexOf('c'));//4
console.log(num.indexOf('c',3));//4
console.log(num.lastIndexOf('c',3));//2

还要注意，使用indexOf进行查找时，它比较参数和数组中的项，使用的是全等操作符，要求查找的项必须严格相等。（===）

迭代方法

every()和some()用于查询数组中的项是否满足某个条件，对every来说，传入的函数必须每一项都满足了条件，才会返回true，否则就会返回false。而some()方法是只要传入的函数只要有一项满足了条件，就会返回true。

var num = [1,2,3,4,5,4,3,2,1];

var everyResult = num.every(function(item, index, array){
    return (item > 2);
});
console.log(everyResult); //false

var someResult = num.some(function(item, index, array){
    return (item > 2);
});
console.log(someResult); //true

filter()函数用于过滤并返回符合条件的结果。

var num = [1,2,3,4,5,4,3,2,1];

var filterResult = num.filter(function(item, index, array){
    return (item > 2);
});
console.log(filterResult); // 3,4,5,4,3

map()也返回一个数组，这个数组的每一项都是在原始数组中的对应项上运行传入函数的结果。

var num = [1,2,3,4,5,4,3,2,1];

var map = num.map(function(item,index,array){
    return item * 2;
});
console.log(map); // 2,4,6,8,10,8,6,4,2

forEach()没有返回值，它只是对数组进行遍历。

var num = [1,2,3,4,5,4,3,2,1];

num.forEach(function(item , index, array){
    console.log(item); // 打印每一项
});

归并方法

ES5新增了两个归并数组的方法，reduce()和reduceRight()。两个方法都会迭代数组所有项，然后构建一个最终返回值。reduce()从数组的第一项开始，而reduceRight()从数组的最后一项开始，向前遍历到第一项。传给这两个方法的函数都接收4个参数，前一个值，当前值，项的索引，和数组对象。

var num = [1,2,3,4,5];

var sum = num.reduce(function(prev, cur, index , array){
    return prev + cur;
});
console.log(sum); // 15

defer和async

<script src="script.js"></script>

没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

<script async src="script.js"></script>

有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

<script defer src="myscript.js"></script>

有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。