JavaScript知识点总结

JavaScript知识点

1.数组的遍历

语法

使用for和for/in,我们可以访问数组的下标，而不是实际的数组元素值：

for(var i = 0; i < arr.length; ++i){
	console.log(arr[i]);
}

for(var i in arr){
	console.log(arr[i]);
}

使用for/of,则可以直接访问数组的元素值：

for(const v of arr){
	console.log(v);
}

使用forEach(),则可以同时访问数组的下标与元素值：

arr.forEach((v,i) => console.log(v));

2.作用域

var a = 1;
function test(){
	var a = 2;
	console.log(a);  //2
}
test();

上方的函数作用域中声明并赋值了a，且在console之上，所以遵循就近原则输出a等于2。

var a = 1;
function test2(){
	console.log(a);  //undefined
	var a = 2;
}
test2();

上方函数作用域中虽然声明并赋值了a，但位于console之下，a变量被提升，输出时已声明但尚未被赋值，所以输出“undefined“。

var a = 1;
function test3(){
	console.log(a);  //1
	a = 2;
}
test3();

上方的函数作用域中a被重新赋值，未被重新声明，且位于console之下，所以输出全局作用域中的a。

3.闭包

var elem = document.getElementsByTagName('div');  //如果页面上有5个div
for(var i = 0; i < elem.length; i++){
	elem[i].onclick = function(){
		alert(i); //总是5
	};
}

上方是一个很常见闭包问题，点击任何div弹出的值总是5，因为当你触发点击事件的时候i的值早已是5，可以用下面方式解决：

var elem = document.getElementsByTagName('div'); //如果页面上有5个div
for(var i = 0; i < elem.length;i++){
	(function (w) {
		elem[w].onclick  = function(){
			alert(w);  //依次为0，1，2，3，4
		};
	})(i);
}

在绑定点击事件外部封装一个立即执行函数，并将i传入该函数即可。

4.this指向

var obj = {
	name: 'xiaoming',
	getName: function(){
		return this.name;
	}
};
console.log(obj.getName());  //'xiaoming'

上方对象方法中的this指向对象本身，所以输出”xiaoming“。

var obj = {
	myName: 'xiaoming',
	getName: function(){
		return this.myName;
	}
};
var nameFn = obj.getName;
console.log(nameFn()); //undefined

上方将对象中的方法赋值给了一个变量，此时方法中的this也将不在指向obj对象，从而指向window对象，所以console为”undefined“。

var obj = {
	myName: 'xiaoming',
	getName: function(){
		return this.myName;
	}
};
var obj2 = {
	myName: 'xiaohua'
};
var nameFn = obj.getName;
console.log(nameFn.apply(obj2));//'xiaohua'

上方同样将obj对象中的方法赋值给了变量nameFn，但是通过apply方法将this指向了obj2对象，所以最终console为’xiaohua’。