本篇文章給大家分享的是有關(guān)怎么用JS: 函數(shù)式array.forEach，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)是專業(yè)的潘集網(wǎng)站建設(shè)公司，潘集接單;提供成都做網(wǎng)站、網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行潘集網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

array.forEach() 語法概述

forEach()方法對數(shù)組的每個元素執(zhí)行一次給定的函數(shù)。

const array1 = ['a', 'b', 'c'];  array1.forEach(element => console.log(element));  // expected output: "a" // expected output: "b" // expected output: "c"

 參數(shù)

callback

為數(shù)組中每個元素執(zhí)行的函數(shù)，該函數(shù)接收一至三個參數(shù)：

- currentValue 數(shù)組中正在處理的當(dāng)前元素。

- index 可選 數(shù)組中正在處理的當(dāng)前元素的索引。

- array 可選 forEach() 方法正在操作的數(shù)組。

thisArg 可選 可選參數(shù)。當(dāng)執(zhí)行回調(diào)函數(shù) callback 時，用作 this 的值。

返回值

undefined。

array.forEach() 描述

forEach() 方法按升序為數(shù)組中含有效值的每一項執(zhí)行一次 callback 函數(shù)，那些已刪除或者未初始化的項將被跳過(例如在稀疏數(shù)組上)。

可依次向 callback 函數(shù)傳入三個參數(shù)：

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. 數(shù)組當(dāng)前項的值

3. 數(shù)組當(dāng)前項的索引

4. 數(shù)組對象本身

如果 thisArg 參數(shù)有值，則每次 callback 函數(shù)被調(diào)用時，this 都會指向 thisArg 參數(shù)。如果省略了 thisArg  參數(shù)，或者其值為 null 或 undefined，this 則指向全局對象。按照函數(shù)觀察到 this 的常用規(guī)則，callback 函數(shù)最終可觀察到 this  值。

forEach() 遍歷的范圍在第一次調(diào)用 callback 前就會確定。調(diào)用 forEach 后添加到數(shù)組中的項不會被 callback  訪問到。如果已經(jīng)存在的值被改變，則傳遞給 callback 的值是 forEach()  遍歷到他們那一刻的值。已刪除的項不會被遍歷到。如果已訪問的元素在迭代時被刪除了(例如使用 shift())，之后的元素將被跳過——參見下面的示例。

forEach() 為每個數(shù)組元素執(zhí)行一次 callback 函數(shù);與 map() 或者 reduce() 不同的是，它總是返回 undefined  值，并且不可鏈?zhǔn)秸{(diào)用。其典型用例是在一個調(diào)用鏈的最后執(zhí)行副作用(side effects，函數(shù)式編程上，指函數(shù)進行 返回結(jié)果值 以外的操作)。

forEach() 被調(diào)用時，不會改變原數(shù)組，也就是調(diào)用它的數(shù)組(盡管 callback  函數(shù)在被調(diào)用時可能會改變原數(shù)組)。(此處說法可能不夠明確，具體可參考EMCA語言規(guī)范：'forEach does not directly mutate the  object on which it is called but the object may be mutated by the calls to  callback function.'，即 forEach 不會直接改變調(diào)用它的對象，但是那個對象可能會被 callback 函數(shù)改變。)

注意： 除了拋出異常以外，沒有辦法中止或跳出 forEach() 循環(huán)。如果你需要中止或跳出循環(huán)，forEach() 方法不是應(yīng)當(dāng)使用的工具。

若你需要提前終止循環(huán)，你可以使用：

• 一個簡單的 for 循環(huán)

• for...of / for...in 循環(huán)

• Array.prototype.every()

• Array.prototype.some()

• Array.prototype.find()

• Array.prototype.findIndex()

這些數(shù)組方法則可以對數(shù)組元素判斷，以便確定是否需要繼續(xù)遍歷：

• every()

• some()

• find()

• findIndex()

只要條件允許，也可以使用 filter() 提前過濾出需要遍歷的部分，再用 forEach() 處理。

案例 01 不對未初始化的值進行任何操作(稀疏數(shù)組)

如你所見，3 和 7 之間空缺的數(shù)組單元未被 forEach() 調(diào)用 callback 函數(shù)，或進行任何其他操作。

const arraySparse = [1,3,,7]; let numCallbackRuns = 0;  arraySparse.forEach(function(element){   console.log(element);   numCallbackRuns++; });  console.log("numCallbackRuns: ", numCallbackRuns);  // 1 // 3 // 7 // numCallbackRuns: 3

 案例 02 將 for 循環(huán)轉(zhuǎn)換為 forEach

const items = ['item1', 'item2', 'item3']; const copy = [];  // before for (let i=0; i
 案例 03 打印出數(shù)組的內(nèi)容
注意：為了在控制臺中顯示數(shù)組的內(nèi)容，你可以使用 console.table() 來展示經(jīng)過格式化的數(shù)組。下面的例子則是另一種使用 forEach()  的格式化的方法。
下面的代碼會為每一個數(shù)組元素輸出一行記錄：
function logArrayElements(element, index, array) {   console.log('a[' + index + '] = ' + element); }  // 注意索引 2 被跳過了，因為在數(shù)組的這個位置沒有項 [2, 5, , 9].forEach(logArrayElements); // logs: // a[0] = 2 // a[1] = 5 // a[3] = 9
 案例 04 使用 thisArg
舉個勉強的例子，按照每個數(shù)組中的元素值，更新一個對象的屬性：
function Counter() {   this.sum = 0;   this.count = 0; } Counter.prototype.add = function(array) {   array.forEach(function(entry) {     this.sum += entry;     ++this.count;   }, this);   // ^---- Note };  const obj = new Counter(); obj.add([2, 5, 9]); obj.count; // 3 === (1 + 1 + 1) obj.sum; // 16 === (2 + 5 + 9)
因為 thisArg 參數(shù)(this)傳給了 forEach()，每次調(diào)用時，它都被傳給 callback 函數(shù)，作為它的 this 值。
注意：如果使用箭頭函數(shù)表達式來傳入函數(shù)參數(shù)， thisArg 參數(shù)會被忽略，因為箭頭函數(shù)在詞法上綁定了 this 值。
案例 05 對象復(fù)制器函數(shù)
下面的代碼會創(chuàng)建一個給定對象的副本。 創(chuàng)建對象的副本有不同的方法，以下是只是一種方法，并解釋了 Array.prototype.forEach()  是如何使用 ECMAScript 5 Object.* 元屬性(meta property)函數(shù)工作的。
function copy(obj) {   const copy = Object.create(Object.getPrototypeOf(obj));   const propNames = Object.getOwnPropertyNames(obj);    propNames.forEach(function(name) {     const desc = Object.getOwnPropertyDescriptor(obj, name);     Object.defineProperty(copy, name, desc);   });    return copy; }  const obj1 = { a: 1, b: 2 }; const obj2 = copy(obj1); // 現(xiàn)在 obj2 看起來和 obj1 一模一樣了
 案例 06 如果數(shù)組在迭代時被修改了，則其他元素會被跳過。
下面的例子會輸出 "one", "two", "four"。當(dāng)?shù)竭_包含值 "two"  的項時，整個數(shù)組的第一個項被移除了，這導(dǎo)致所有剩下的項上移一個位置。因為元素 "four" 正位于在數(shù)組更前的位置，所以 "three" 會被跳過。  forEach() 不會在迭代之前創(chuàng)建數(shù)組的副本。
var words = ['one', 'two', 'three', 'four']; words.forEach(function(word) {   console.log(word);   if (word === 'two') {     words.shift();   } }); // one // two // four
 案例 07 扁平化數(shù)組
下面的示例僅用于學(xué)習(xí)目的。如果你想使用內(nèi)置方法來扁平化數(shù)組，你可以考慮使用 Array.prototype.flat()(預(yù)計將成為 ES2019  的一部分，并且已在主要瀏覽器中實現(xiàn))或參考其 polyfill。
/**  * Flattens passed array in one dimensional array  *  * @params {array} arr  * @returns {array}  */ function flatten(arr) {   const result = [];    arr.forEach((i) => {     if (Array.isArray(i))       result.push(...flatten(i));     else       result.push(i);   })    return result; }  // Usage const problem = [1, 2, 3, [4, 5, [6, 7], 8, 9]];  flatten(problem); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
 案例08 針對 promise 或 async 函數(shù)的使用備注
如果使用 promise 或 async 函數(shù)作為 forEach() 等類似方法的 callback  參數(shù)，最好對造成的執(zhí)行順序影響多加考慮，否則容易出現(xiàn)錯誤。
let ratings = [5, 4, 5];  let sum = 0;  let sumFunction = async function (a, b) {     return a + b; }  ratings.forEach(async function(rating) {     sum = await sumFunction(sum, rating); })  console.log(sum); // Expected output: 14 // Actual output: 0
以上就是怎么用JS: 函數(shù)式array.forEach，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
            
            
                        

            當(dāng)前文章：怎么用JS:函數(shù)式array.forEach            

            URL網(wǎng)址：http://weahome.cn/article/gsooij.html