JavaScript原生系列-总结篇(一)

window.onload是在页面中包含图片在内的所有元素全部加载完成再执行，多次会覆盖；【JQ】$(document).ready()是DOM树加载完成之后执行，不包含图片，其他媒体文件；一般$(document).ready()快于window.onload执行，代码少的情况下执行顺序是不确定的。<body οnlοad="meathName1();meathName2();">在body加载完成执行，在window和dom之后执行，总是最后执行，这里的函数会覆盖window.onload，但是meathName2不会覆盖meathName1。

详细资料： https://blog.csdn.net/pcaxb/article/details/100661841

2.数组去重

(1)使用ES6数据结构Set 和 ES6 Array.from()

let arr = ['a','bb','22','a','yuci','haha','22'];
let setArr = new Set(arr);
console.log(setArr);
arr = Array.from(setArr);
console.log(arr);

Array.from()扩展，将类数组转换成数组参考

(2)使用push 和 indexOf

let arr = ['a','bb','22','a','yuci','haha','22'],
arrCenter = [];

for (const index in arr) {
    let item = arr[index];
    if(arrCenter.indexOf(item) == -1){
      arrCenter.push(item);  
    }
}
console.log(arrCenter);

如果当前数组的第i项在当前数组中第一次出现的位置不是i，那么表示第i项是重复的，忽略掉。否则存入结果数组

let arr = ['a','bb','22','a','yuci','haha','22','cc'],
arrCenter = [];

for (const index in arr) {
    let item = arr[index];
    //0 1 2 0 4 5 2 7 
    // console.log(arr.indexOf(item));
    if(arr.indexOf(item) == index){
      arrCenter.push(item);  
    }
}
console.log(arrCenter);

(3)排序去除相邻重复元素

let arr = ['a','bb','22','a','yuci','haha','22','cc'],
arrCenter = [];
arr = arr.sort();//["22", "22", "a", "a", "bb", "cc", "haha", "yuci"]

for (let index in arr) {
    //index 是字符串
    let item = arr[index];
    if(item != arr[parseInt(index)+1]){
      arrCenter.push(item);  
    }
}
console.log(arrCenter);

3.事件委托(事件代理)、事件捕获、事件冒泡

事件委托(事件代理)：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

事件捕获：当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件

事件冒泡：当事件到达目标节点后，会沿着捕获阶段的路线原路返回。同样，所有经过的节点,都会触发对应的事件

//事件冒泡 
window.addEventListener("click",()=>console.log("window"));
document.addEventListener("click",()=>console.log("document"));
document.body.addEventListener("click",()=>console.log("body"));
document.getElementById("div01").addEventListener("click",()=>console.log("div01"));

//事件捕获
window.addEventListener("click",()=>console.log("window"),true);
document.addEventListener("click",()=>console.log("document"),true);
document.body.addEventListener("click",()=>console.log("body"),true);
document.getElementById("div01").addEventListener("click",()=>console.log("div01"),true);

参考资料：https://blog.csdn.net/pcaxb/article/details/100665670

4.判断变量类型

typeof()用于判断简单数据；

判断一个变量是对象还是数组使用instanceof，constructor或Object.prototype.toString.call()；

参考资料：https://blog.csdn.net/pcaxb/article/details/101020581

5.同步和异步（简要阐述）

同步：由于js单线程，同步任务都在主线程上排队执行，前面任务没执行完成，后面的任务会一直等待；

异步：不进入主线程，进入任务队列，等待主线程任务执行完成，开始执行。最基础的异步操作setTimeout和setInterval，等待主线程任务执行完，在开始执行里面的函数；

参考资料：http://www.ruanyifeng.com/blog/2014/10/event-loop.html

6.返回false的几种情况

除了"",0,false,null,undefined,NaN返回false，其他全部返回true(包括空对象，空数组)

参考资料：https://blog.csdn.net/pcaxb/article/details/101020581

7.js数据在内存中的存储

存储方式：

简单数据类型：存储在栈中；

引用数据类型：存储在堆中，在栈中存储了指针，指向存储在堆中的地址，解释器会先检索在栈中的地址，从堆中获得实体；

内存占用大小：

简单数据类型：大小固定，占用空间小，频繁使用，所以存储在栈中；

引用数据类型：大小不固定，占用空间大；

8.闭包

何为闭包：有权访问另一个作用域中变量的函数

闭包特性：可实现函数外访问函数内变量，外层变量可以不被垃圾回收机制回收

for(var i = 0; i < 10; i++) {  
    setTimeout(function() {  
        console.log(i);    
    }, 1000);  
}  
//结果全部是10
//闭包解决
for(var i = 0; i < 10; i++) {  
    (function(j) {  
        setTimeout(function() {  
            console.log(j);    
        }, 1000);  
    })(i);  
}

参考资料：https://blog.csdn.net/pcaxb/article/details/100583697

9.this的指向

1.当函数作为对象的方法被调用时，this 指向该对象

2.作为普通函数调用时，this 总是指向全局对象（window）

3. 构造器调用，构造器里的 this 就指向返回的这个对象

4. Function.prototype.call 或 Function.prototype.apply 调用，将this指向第一个参数指明的对象。

5.全局范围：指向window（严格模式下不存在全局变量，指向undefined）;

参考资料：https://blog.csdn.net/pcaxb/article/details/87622552

10.new具体做了些什么

(1)创建一个对象

(2)将构造函数的作用域赋给新对象(因此this指针就指向了新的对象) 【代码：p.__proto__ = Person.prototype】

说明：Person中的prototype是在创建构造函数的时候创建的。其实原型对象就是构造函数的一个实例对象。Person.prototype就是Person的一个实例对象。相当于在Person创建的时候，自动创建了一个它的实例，并且把这个实例赋值给了prototype。

function Person(){};
var temp = new Person();
Person.prototype = temp;

(3)执行构造函数中的代码

(4)返回新对象

参考资料：https://blog.csdn.net/pcaxb/article/details/100668246

11.原型和原型链

参考资料：https://blog.csdn.net/pcaxb/article/details/100668246

12.继承方式

参考资料：https://blog.csdn.net/pcaxb/article/details/100668246

13.数组常用方法

1.改变原数组

尾部删除pop()，尾部添加push()，头部删除shift()，头部添加unshift()，排序sort()，颠倒数组元素reverse()，删除或插入元素splice();
2.不改变原数组

合并数组concat()，拼接数组元素join()，截取元素slice()，indexOf()，lastIndexOf()，toString()

参考资料：Array数组方法总结

14.数据存储

Cookie：用于客户端与服务端通信，也具有本地存储的功能

localStorage，sessionStorage：专门用于存储

区别：

大小：Cookie容量为4K，因为用于客户端与服务端通信，所有http都携带，如果太大会降低效率； localStorage，sessionStorage大小为5M。

失效时间：Cookie会在浏览器关闭时删除，除非主动设置删除时间；localStorage一直都在直到用户主动删除或清除浏览器缓存；sessionStorage在浏览器关闭时删除。

JavaScript原生系列-总结篇(一)

博客地址：https://mp.csdn.net/postedit/100654006