JavaScript基礎(chǔ)之Array?forEach使用示例
前言
forEach() 方法對(duì)數(shù)組的每個(gè)元素執(zhí)行一次給定的函數(shù)。
回調(diào)函數(shù)中傳遞三個(gè)參數(shù):
- 第一個(gè)參數(shù)，就是當(dāng)前正在遍歷的元素
- 第二個(gè)參數(shù)，就是當(dāng)前正在遍歷的元素的索引
- 第三個(gè)參數(shù)，就是正在遍歷的數(shù)組
嘗試一下
var list = ["云層上的光", "初心", "欒樹(shù)"];
list.forEach(function(item, index, array){
console.log(item,index,array)
});
輸出內(nèi)容如下：
那我就好奇了，在forEach回調(diào)函數(shù)中的this指向誰(shuí)呢？forEach函數(shù)是否有返回值
var list = ["云層上的光", "初心", "欒樹(shù)"];
var value = list.forEach(function(item, index, array){
console.log(this);
});
console.log(value);
可以看到 this指向 window并且forEach沒(méi)有返回值，返回值為 undefined
那我們可以更改this指向嗎？
forEach其實(shí)接受兩個(gè)參數(shù)，第二個(gè)參數(shù) 可選參數(shù)。當(dāng)執(zhí)行回調(diào)函數(shù)時(shí)，用作 this 的值。
forEach實(shí)現(xiàn)
Array.prototype.myForEach = function (callback) {
var _arr = this,// 調(diào)用時(shí)誰(shuí) this就是誰(shuí)
_len = _arr.length,
thisArg = arguments[1] || window;
// 校驗(yàn)callback之能是 function時(shí)才往下執(zhí)行
if (typeof callback !== 'function') {
throw new Error(`${callback} is not a function`);
}
// for循環(huán)
for (var i = 0; i < _len; i++) {
callback.apply(thisArg, [_arr[i], i, _arr]);
}
// 注意 forEach 沒(méi)有返回值
}
對(duì)象模仿數(shù)組
對(duì)象的原型上并沒(méi)有 forEach，所以我們調(diào)用 Array.prototype.forEach方法通過(guò)call改變方法內(nèi)部的this指向，myForEach內(nèi)部循環(huán)需要length, 所以我們?cè)趯?duì)象中模擬了添加了一個(gè)length屬性，對(duì)象的key 分別為 0，1，2 分別對(duì)應(yīng)了循序中的下標(biāo)。
const arrayLike = {
length: 3,
0: 2,
1: 3,
2: 4,
};
Array.prototype.forEach.call(arrayLike, (x) => console.log(x));
forEach跳出循環(huán)體？
forEach可以跳出循環(huán)體嗎？其實(shí) return 和 break 是無(wú)法做到的，不過(guò)可以使用 throw new Error
var list = ["云層上的光", "初心", "欒樹(shù)"];
try{
list.forEach(item=>{
if(item === "初心") throw new Error("初心");
})
}catch(err){
if(err.message === "初心")
console.log("在執(zhí)行到初心時(shí)跳出循環(huán)體了")
else
console.error(err)
}以上就是JavaScript基礎(chǔ)之Array forEach使用示例的詳細(xì)內(nèi)容，更多關(guān)于JavaScript Array forEach的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
var that = this;，這代表什么意思呢？this代表的是當(dāng)前對(duì)象，var that=this就是將當(dāng)前的this對(duì)象復(fù)制一份到that變量中，下面為大家介紹這樣做有什么意義2014-05-05
對(duì)JavaScript客戶(hù)端應(yīng)用編程的一些建議
這篇文章主要介紹了對(duì)JavaScript客戶(hù)端應(yīng)用編程的一些建議,主要針對(duì)MVC框架框架的一些相關(guān)使用問(wèn)題,需要的朋友可以參考下2015-06-06
JavaScript中用于生成隨機(jī)數(shù)的Math.random()方法
這篇文章主要介紹了JavaScript中用于生成隨機(jī)數(shù)的Math.random()方法,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
JavaScript類(lèi)屬性的訪問(wèn)方式詳解
javascript對(duì)象之內(nèi)置對(duì)象Math使用方法
用JavaScript實(shí)現(xiàn)頁(yè)面重定向功能的教程
實(shí)例分析javascript中的call()和apply()方法
javascript處理a標(biāo)簽超鏈接默認(rèn)事件的方法