在Javascript中,forEach已經(jīng)成為了非常常見(jiàn)的語(yǔ)句,而且得到了廣泛的應(yīng)用。它是一個(gè)數(shù)組的方法,可以用來(lái)迭代數(shù)組元素,進(jìn)行相應(yīng)操作。與for循環(huán)相比,forEach語(yǔ)句的語(yǔ)法更加簡(jiǎn)潔清晰,具有更高的可讀性。下面將結(jié)合具體的代碼示例來(lái)深入探究JavaScript中forEach方法的使用。
***語(yǔ)法格式:***
***參數(shù)解釋:***
- function(currentValue, index, arr) // 必須。函數(shù)每次執(zhí)行時(shí)會(huì)傳入三個(gè)參數(shù):
- currentValue :當(dāng)前元素的值
- index:當(dāng)前元素的下標(biāo)
- arr:正在迭代的數(shù)組
- thisValue可選,對(duì)象作為該執(zhí)行回調(diào)時(shí)使用,傳給函數(shù),用作 this 的值。如果省略了 thisValue,或者傳了 null、undefined,那么 this會(huì)指向全局對(duì)象(在瀏覽器中就是 window 對(duì)象)。
***示例1。數(shù)組遍歷找奇數(shù):***
上述代碼中,我們首先創(chuàng)建了一個(gè)數(shù)組arr,然后利用forEach方法遍歷數(shù)組中的所有元素,并判斷每一個(gè)元素是否為奇數(shù),如果是奇數(shù)就進(jìn)行相應(yīng)的操作。我們使用箭頭函數(shù)來(lái)代替?zhèn)鹘y(tǒng)的函數(shù)聲明方式,代碼的可讀性更高。最終輸出結(jié)果為:1 3 5 7 9。
***示例2。數(shù)組求和:***
上述代碼中,我們首先定義了一個(gè)數(shù)組arr,然后利用forEach方法對(duì)其進(jìn)行遍歷,并將每個(gè)元素相加。最終輸出結(jié)果為15。
***示例3。數(shù)組元素平方:***
上述代碼中,我們定義了一個(gè)數(shù)組arr,并用forEach方法遍歷數(shù)組,將每個(gè)元素平方,并將結(jié)果推入新的數(shù)組arr2中。最終輸出結(jié)果為[1, 4, 9, 16, 25]。
***示例4。字符串反轉(zhuǎn):***
上述代碼中,我們定義了一個(gè)字符串str,并將其轉(zhuǎn)換為數(shù)組arr,再使用forEach方法遍歷數(shù)組,將每個(gè)元素從數(shù)組的開(kāi)頭位置unshift到新數(shù)組arr2中的頭部。最終將arr2轉(zhuǎn)換為字符串str2,并輸出結(jié)果為'dlroW olleH'。
綜上所述,forEach方法是JavaScript中非常實(shí)用的一個(gè)方法,它可以幫助實(shí)現(xiàn)各種有趣的功能。需要注意的是,在使用forEach方法時(shí)需要遵循其規(guī)范的語(yǔ)法格式,同時(shí)還需要注意函數(shù)的回調(diào)參數(shù)的位置與意義,以及thisValue參數(shù)的作用。
***語(yǔ)法格式:***
array.forEach(function(currentValue, index, arr), thisValue)
***參數(shù)解釋:***
- function(currentValue, index, arr) // 必須。函數(shù)每次執(zhí)行時(shí)會(huì)傳入三個(gè)參數(shù):
- currentValue :當(dāng)前元素的值
- index:當(dāng)前元素的下標(biāo)
- arr:正在迭代的數(shù)組
- thisValue可選,對(duì)象作為該執(zhí)行回調(diào)時(shí)使用,傳給函數(shù),用作 this 的值。如果省略了 thisValue,或者傳了 null、undefined,那么 this會(huì)指向全局對(duì)象(在瀏覽器中就是 window 對(duì)象)。
***示例1。數(shù)組遍歷找奇數(shù):***
// 原始數(shù)組 var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // 找出數(shù)組中所有的奇數(shù) arr.forEach((item, index, arr) => { if (item % 2 !== 0) { console.log(item); } })
上述代碼中,我們首先創(chuàng)建了一個(gè)數(shù)組arr,然后利用forEach方法遍歷數(shù)組中的所有元素,并判斷每一個(gè)元素是否為奇數(shù),如果是奇數(shù)就進(jìn)行相應(yīng)的操作。我們使用箭頭函數(shù)來(lái)代替?zhèn)鹘y(tǒng)的函數(shù)聲明方式,代碼的可讀性更高。最終輸出結(jié)果為:1 3 5 7 9。
***示例2。數(shù)組求和:***
// 原始數(shù)組 var arr = [1, 2, 3, 4, 5]; // 數(shù)組求和 var sum = 0; arr.forEach((item, index, arr) => { sum += item; }) console.log(sum); // 15
上述代碼中,我們首先定義了一個(gè)數(shù)組arr,然后利用forEach方法對(duì)其進(jìn)行遍歷,并將每個(gè)元素相加。最終輸出結(jié)果為15。
***示例3。數(shù)組元素平方:***
// 原始數(shù)組 var arr = [1, 2, 3, 4, 5]; // 數(shù)組元素平方 var arr2 = []; arr.forEach((item, index, arr) => { arr2.push(item * item); }) console.log(arr2); // [1, 4, 9, 16, 25]
上述代碼中,我們定義了一個(gè)數(shù)組arr,并用forEach方法遍歷數(shù)組,將每個(gè)元素平方,并將結(jié)果推入新的數(shù)組arr2中。最終輸出結(jié)果為[1, 4, 9, 16, 25]。
***示例4。字符串反轉(zhuǎn):***
// 原始字符串 var str = 'Hello World'; // 字符串反轉(zhuǎn) var arr = str.split(''); var arr2 = []; arr.forEach((item, index, arr) => { arr2.unshift(item); }) var str2 = arr2.join(''); console.log(str2); // 'dlroW olleH'
上述代碼中,我們定義了一個(gè)字符串str,并將其轉(zhuǎn)換為數(shù)組arr,再使用forEach方法遍歷數(shù)組,將每個(gè)元素從數(shù)組的開(kāi)頭位置unshift到新數(shù)組arr2中的頭部。最終將arr2轉(zhuǎn)換為字符串str2,并輸出結(jié)果為'dlroW olleH'。
綜上所述,forEach方法是JavaScript中非常實(shí)用的一個(gè)方法,它可以幫助實(shí)現(xiàn)各種有趣的功能。需要注意的是,在使用forEach方法時(shí)需要遵循其規(guī)范的語(yǔ)法格式,同時(shí)還需要注意函數(shù)的回調(diào)參數(shù)的位置與意義,以及thisValue參數(shù)的作用。