原生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';
});