原生JS优化each函数

each —— 算是JavaScript中的一个“语法糖”API了。它的作用是“遍历数组/对象中的每一个元素/属性，操作想要操作的事情（执行回调函数）”。

其中在jQuery中使用的尤其广泛：

var arr=[1,2,3,4];

$.each(arr,function(i,v){
	console.log(i+", "+v);
	if(i===2){
		return false;
	}
});

其结果如下图：

这时，我们将鼠标移至【each】上，会显示如下内容：

---

那现在，我们用原生JavaScript来实现一下each函数：

var arr=[1,2,3,4,3];
var each=function(arr,fn){
	for(var i=0;i<arr.length;i++){
		if(fn(i,arr[i])===false){
			break;
		}
	}
};

var index=-1;
each(arr,function(i,v){
	console.log(i+", "+v);
	if(v===3){
		index=i;
		return false;
	}
	return true;
});
console.log(index);

这样，就能在这个功能上和上面的代码达到同样的效果了！

但是，这个代码正确吗？

---

关于this的指向：
在jQuery中，这样写：

var arr=[1,2,3];
$.each(arr,function(){
	console.log(this);
})

能得到如下结果：

但修改前面JS内容如上，只能得到三个window！

显然的，是在【回调函数】中更改了this的指向 —— 我们很容易想到call & apply：

//each函数“简易最终版”：

var each=function(arr,fn){
	for(var i=0;i<arr.length;i++){
		if(fn.call(arr[i],i,arr[i])===false){
			break;
		}
	}
};

---

小结：利用优化的each更改页面元素样式

var getTag=function(tag){
	return document.getElementsByTagName(tag);
};

var each=function(arr,fn){
	for(var i=0;i<arr.length;i++){
		if(fn.call(arr[i],i,arr[i])===false){
			break;
		}
	}
};

var list1=getTag('div');
each(list1,function(){
	this.style.backgroundColor='green';
});