一.Javascript中常见的坑
接下来加单分析一下javascript中for循环的执行逻辑
1.1 javascript中for的执行原理
for(var i=0; i <10; i++){
console.log(i)
}
上面这段代码中实际执行逻辑可以拆分为
var i;
for(i=0; i <10; i++){
console.log(i)
}
执行逻辑拆分为
1.var i=0
2.判断逻辑 i<10
3.i++
上面是较为简单分析一下for循环的一个执行过程，如果for循环中又异步过程，那么执行逻辑会发生变化，废话不多说，直接上干货
1.2 javascript中ES6中新引入的let
首先介绍一下let关键字，ES6之前，声明变量一般用var关键字，在let关键字引入之前是没有块级变量这一说法的，在ES6之前变量的作用域只有两种，全局变量和函数内的局部变量
在ES6之后引入了let关键字之后就有了块级作用域的概念
可能讲到这，大家还是比较模糊，块级作用域是一个怎样的体现，接下来用一个异步调用来体现
首先用var定义变量
for(var j=0; j<5; j++){
setTimeout(function() {
console.log(j)
}, 1000);
}
此时输出结果为 5
但是如果我们用let来声明变量时，注意看
for(let j=0; j<5; j++){
setTimeout(function() {
console.log(j)
}, 1000);
}
此时输出结果为0，1，2，3，4
接下来解释一下为什么两次输出会存在差异，使用var声明变量时，当同步的循环执行完毕后，此时i的值为5，接下来执行异步的setTimeout过程，所以输出此时的5，当使用let声明变量时，由于let声明的变量时块级作用域，每一次循环都会声明一个块级变量，每一次循环都有一个作用域，每个作用域都有不同的j，所以异步函数执行时输出0，1，2，3，4
1.3 javascript中函数自调用
(function (){
console.log("you are very good");
})()
ES6引入了一个箭头函数的概念
上面函数也可以改为箭头函数的实现
(() => {
console.log("you very good");
})()
这里类似一个匿名函数的自调用，控制台中会打印you are very good,由此引出一个闭包的概念
1.4 javascript中的闭包
闭包各种文献的定义非常抽象，我自己的理解就是闭包可以读取其它函数内部变量的函数，由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁
接下来举出一个闭包的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript学习</title>
</head>
<body>
<p id='numbers'>这是一个测试段落</p>
</body>
</html>
var numCount = (() => {
var count = 0;
return () => { return count += 1}
})();
function AddCount(){
document.getElementById('numbers').innerHTML = numCount()
}
其中numCount就是一个闭包，内部返回一个包含局部变量的函数，这样就可以通过闭包实现从外部获取局部变量count的值
1.5 javascript中addEventListener给DOM对象添加事件
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄，如：两个 “click” 事件。
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听。
document.getElementById('countC').addEventListener("click", AddCount)
function AddCount(){
document.getElementById('numbers').innerHTML = numCount()
}
1.6 javascript中Collection
javascript中dom集合，其中有很多方法返回dom集合对象，例如getElementsByTagName() 方法返回 HTMLCollection 对象。
var paraLength = document.getElementById('numbers')
document.getElementById('numbers').innerHTML = paraLength.length
上面就可以统计出文档的段落数并显示
1.7 javascript中NodeList DOM节点
NodeList 对象是一个从文档中获取的节点列表 (集合) 。
NodeList 对象类似 HTMLCollection 对象。
一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。
所有浏览器的 childNodes 属性返回的是 NodeList 对象。
大部分浏览器的 querySelectorAll() 返回 NodeList 对象。
以下代码选取了文档中所有的
节点：
var myNodeList = document.querySelectorAll("p");
NodeList 中的元素可以通过索引(以 0 为起始位置)来访问。
访问第二个 <p> 元素可以是以下代码:
y = myNodeList[1];
HTMLCollection 与 NodeList 的区别
HTMLCollection 是 HTML 元素的集合。
NodeList 是一个文档节点的集合。
NodeList 与 HTMLCollection 有很多类似的地方。
NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, …) 来获取元素。
NodeList 与 HTMLCollection 都有 length 属性。
HTMLCollection 元素可以通过 name，id 或索引来获取。
NodeList 只能通过索引来获取。
只有 NodeList 对象有包含属性节点和文本节点。
节点列表不是一个数组！
节点列表看起来可能是一个数组，但其实不是。
你可以像数组一样，使用索引来获取元素。
节点列表无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。
1.8 javascript中prototype
在JavaScript中，prototype对象是实现面向对象的一个重要机制。每个函数就是一个对象（Function），函数对象都有一个子对象 prototype对象，类是以函数的形式来定义的。prototype表示该函数的原型，也表示一个类的成员的集合。
总结一点就是javascript中面向对象是基于
prototype 继承
所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法：
Date 对象从 Date.prototype 继承。
Array 对象从 Array.prototype 继承。
Person 对象从 Person.prototype 继承。
所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。
JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。
Date 对象, Array 对象, 以及 Person 对象从 Object.prototype 继承。
添加属性和方法
有的时候我们想要在所有已经存在的对象添加新的属性或方法。
另外，有时候我们想要在对象的构造函数中添加属性或方法。
使用 prototype 属性就可以给对象的构造函数添加新的属性：
实例
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";
二. Javascript常见函数用法
2.1 setInterval间隔函数
javascript中setInterval函数是指定一定间隔不停的执行某个事件
setInterval(function(){ alert('hello')}, 2000)
例如上面每隔2秒弹出一个hello，再举一个实时显示当前时间的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>时间</title>
</head>
<body>
<p>在页面显示一个时钟</p>
<p id="demo"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
</script>
</body>
</html>
上面这个案例可以实时显示出当前时间，既然可以实时刷新显示时间，那么也应该可以暂停
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>时间</title>
</head>
<body>
<p>在页面显示一个时钟</p>
<p id="demo">当前时间</p>
<button onclick="myStopFunction()">停止</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
var myStopFunction = function() {
clearInterval(myVar)
}
</script>
</body>
</html>
同样也可以使用clearTimeout来暂停setTimeout定时器
2.2 javascript:void(0)含义
关于理解javascript：void(0)的作用时，其中起到关键的时void这个关键字，void关键字时javascript中一个非常重要的关键字，该操作符指定要计算一个表达式但不返回值。
如下例:
<a href="javascript:void(0)">单击此处什么也不会发生</a>
其中void(0)计算的值为0，但是没有任何返回，所以点击后没有任何反应
以下实力验证void关键字确实没有任何返回
<head>
<script type="text/javascript">
<!--
function getValue(){
var a,b,c;
a = void ( b = 5, c = 7 );
document.write('a = ' + a + ' b = ' + b +' c = ' + c );
}
//-->
</script>
</head>
其中a输出确实为undefined，
2.3 讲讲链接中<a href="#">和<a href=“javascript:void(0)”>区别联系
#包含了一个位置信息，默认的锚是#top 也就是网页的上端
而javascript:void(0), 仅仅表示一个死链接。
在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
如果你要定义一个死链接请使用 javascript:void(0) 。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>
<p>点击以下链接查看不同效果：</p>
<a href="javascript:void(0);">点我没有反应的!</a>
<br>
<a href="#pos">点我定位到指定位置!</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="pos">尾部定位点</p>
</body>
</html>
通过案例我们可以看到#是包含位置信息
203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
