小編給大家分享一下Array中forEach()和map()有什么不同,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
創(chuàng)新互聯(lián)是專業(yè)的平順網(wǎng)站建設(shè)公司,平順接單;提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行平順網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!Array中Array.forEach()
和Array.map()
方法之間的區(qū)別。
forEach()
和map()
方法通常用于遍歷Array元素,但幾乎沒有區(qū)別,我們來一一介紹。
forEach()
方法返回undefined
,而map()
返回一個(gè)包含已轉(zhuǎn)換元素的新數(shù)組。
const numbers = [1, 2, 3, 4, 5]; // 使用 forEach() const squareUsingForEach = []; numbers.forEach(x => squareUsingForEach.push(x*x)); // 使用 map() const squareUsingMap = numbers.map(x => x*x); console.log(squareUsingForEach); // [1, 4, 9, 16, 25] console.log(squareUsingMap); // [1, 4, 9, 16, 25]
由于forEach()
返回undefined
,所以我們需要傳遞一個(gè)空數(shù)組來創(chuàng)建一個(gè)新的轉(zhuǎn)換后的數(shù)組。map()
方法不存在這樣的問題,它直接返回新的轉(zhuǎn)換后的數(shù)組。在這種情況下,建議使用map()
方法。
map()
方法輸出可以與其他方法(如reduce()
、sort()
、filter()
)鏈接在一起,以便在一條語句中執(zhí)行多個(gè)操作。
另一方面,forEach()
是一個(gè)終端方法,這意味著它不能與其他方法鏈接,因?yàn)樗祷?code>undefined。
我們使用以下兩種方法找出數(shù)組中每個(gè)元素的平方和:
onst numbers = [1, 2, 3, 4, 5]; // 使用 forEach() const squareUsingForEach = [] let sumOfSquareUsingForEach = 0; numbers.forEach(x => squareUsingForEach.push(x*x)); squareUsingForEach.forEach(square => sumOfSquareUsingForEach += square); // 使用 map() const sumOfSquareUsingMap = numbers.map(x => x*x).reduce((total, value) => total + value) ; console.log(sumOfSquareUsingForEach); // 55 console.log(sumOfSquareUsingMap); // 55
當(dāng)需要多個(gè)操作時(shí),使用forEach()
方法是一項(xiàng)非常乏味的工作。我們可以在這種情況下使用map()
方法。
// Array: var numbers = []; for ( var i = 0; i < 1000000; i++ ) { numbers.push(Math.floor((Math.random() * 1000) + 1)); } // 1. forEach() console.time("forEach"); const squareUsingForEach = []; numbers.forEach(x => squareUsingForEach.push(x*x)); console.timeEnd("forEach"); // 2. map() console.time("map"); const squareUsingMap = numbers.map(x => x*x); console.timeEnd("map");
這是在MacBook Pro的Google Chrome v83.0.4103.106(64位)上運(yùn)行上述代碼后的結(jié)果。 建議復(fù)制上面的代碼,然后在自己控制臺(tái)中嘗試一下。
forEach: 26.596923828125ms map: 21.97998046875ms
顯然,map()
方法比forEach()
轉(zhuǎn)換元素要好。
這兩種方法都不能用break
中斷,否則會(huì)引發(fā)異常:
const numbers = [1, 2, 3, 4, 5]; // break; inside forEach() const squareUsingForEach = []; numbers.forEach(x => { if(x == 3) break; // <- SyntaxError squareUsingForEach.push(x*x); }); // break; inside map() const squareUsingMap = numbers.map(x => { if(x == 3) break; // <- SyntaxError return x*x; });
上面代碼會(huì)拋出SyntaxError
:
? Uncaught SyntaxError: Illegal break statement
如果需要中斷遍歷,則應(yīng)使用簡(jiǎn)單的for循環(huán)或for-of
/for-in
循環(huán)。
const numbers = [1, 2, 3, 4, 5]; // break; inside for-of loop const squareUsingForEach = []; for(x of numbers){ if(x == 3) break; squareUsingForEach.push(x*x); }; console.log(squareUsingForEach); // [1, 4]
建議使用map()
轉(zhuǎn)換數(shù)組的元素,因?yàn)樗Z法短,可鏈接且性能更好。
如果不想返回的數(shù)組或不轉(zhuǎn)換數(shù)組的元素,則使用forEach()
方法。
最后,如果要基于某種條件停止或中斷數(shù)組的便利,則應(yīng)使用簡(jiǎn)單的for循環(huán)或for-of
/for-in
循環(huán)。
看完了這篇文章,相信你對(duì)“Array中forEach()和map()有什么不同”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!