前端for循環(huán)遍歷foreach、map使用方法舉例
title: 前端不同類(lèi)型的for循環(huán)遍歷——foreach、map
date: 2025-01-04 11:02:17
tags: javascript
前端不同類(lèi)型的for循環(huán)遍歷
場(chǎng)景:很多時(shí)候后端發(fā)來(lái)的數(shù)據(jù)是不能夠完全契合前端的需求的,比如你要一個(gè)數(shù)據(jù)對(duì)象中的值,但是這個(gè)值卻作為了key出現(xiàn);比如你要通過(guò)一個(gè)數(shù)組中的對(duì)象的某個(gè)屬性來(lái)確定到底取哪個(gè)對(duì)象。
一、for與foreach
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 計(jì)算for循環(huán)遍歷所需要的相關(guān)的時(shí)間的長(zhǎng)短 let arrs = [...Array(99999999).keys()] let total = 0 let time = 0 let starTime = Date.now() for (let index = 0; index < arrs.length; index++) { total++ } let endTime = Date.now(); time = endTime-starTime; console.log("for循環(huán)遍歷共計(jì)消耗時(shí)間:"+ time+"ms"); total = 0 starTime = Date.now() arrs.forEach(element => { total++ }); endTime = Date.now(); time = endTime-starTime; console.log("foreach循環(huán)遍歷共計(jì)消耗時(shí)間:"+ time+"ms"); </script> </body> </html>
發(fā)現(xiàn)兩種遍歷的效率還是差距挺大的,具體如下測(cè)試結(jié)果。
注意:
.forEach()方法是不支持break這種結(jié)束方法,但是他支持return進(jìn)行結(jié)束。
.forEach()方法不支持異步等待,他會(huì)直接跳過(guò)當(dāng)中的異步同步化(async、await)請(qǐng)求操作。
二、map
1.基礎(chǔ)遍歷
使用.map方法可以幫助遍歷數(shù)組,同時(shí)可以得到數(shù)組的元素、下標(biāo)、還有當(dāng)前數(shù)組本身
let arr = [1,2,3,4,5,6]; arr.map((item,index,arr)=>{ console.log(item,index,arr); })
2.簡(jiǎn)單生成新數(shù)組
return是每次返回一個(gè)子元素(假如只有一行簡(jiǎn)單的代碼,也可以去掉return),就不用復(fù)雜push操作。
let arr = [1,2,3,4,5,6]; //item表示當(dāng)前的元素,index表示下標(biāo),arr當(dāng)前數(shù)組的的相關(guān)數(shù)據(jù) let newArr = arr.map(item=>{ return item*2 }) //2,4,6,8,10,12 console.log(newArr);
3.清洗對(duì)象數(shù)組數(shù)據(jù)
操作數(shù)組對(duì)象中的相關(guān)數(shù)據(jù),可用于清洗數(shù)據(jù)
let arr = [{name:"張三",age:18},{name:"李四",age:22},{name:"王五",age:23},] let newArr = arr.map(item=>{ return item.name }) //可以?xún)H遍歷出了自己想要的屬性的數(shù)組 console.log(newArr); // ['張三', '李四', '王五']
4.在數(shù)組對(duì)象中追加屬性、更改屬性值
…三個(gè)點(diǎn)屬于es6新特性,就是用來(lái)展開(kāi)對(duì)象中的所有屬性的簡(jiǎn)寫(xiě),我們是可以復(fù)寫(xiě)相關(guān)的屬性的,不影響使用。
let arr = [{name:"張三",age:18},{name:"李四",age:22},{name:"王五",age:23},] let newArr = arr.map(item=>{ return { ...item,//es6新語(yǔ)法添加所有屬性 age:`${item.age}歲`,//更改值 class:1 //添加新屬性方法 } }) console.log(newArr);
簡(jiǎn)寫(xiě)方法 ,不寫(xiě)return的時(shí)候的加上一個(gè)小括號(hào)來(lái)包裹相關(guān)的屬性。
let newArr = arr.map(item=>({...item,age:`${item.age}歲`,class:1}))
相關(guān)的結(jié)果如下所示
5.進(jìn)行屬性名稱(chēng)的解構(gòu)替換
假如說(shuō)我們要將name這個(gè)屬性名稱(chēng)改成uname,可以使用map進(jìn)行相關(guān)的解構(gòu)替換。這樣直接使用一個(gè){屬性},可以直接使用,不用再使用item進(jìn)行相關(guān)的調(diào)用。
let arr = [{name:"張三",age:18},{name:"李四",age:22},{name:"王五",age:23},] let newArr = arr.map(({name,age})=>{return{ uname:name,ages:age}}) console.log(newArr);
6.異步請(qǐng)求,同時(shí)展示優(yōu)化
很多時(shí)候起哦們?nèi)ヒ?qǐng)求后端接口拿到數(shù)據(jù),但是請(qǐng)求接口是異步請(qǐng)求,但是又有相關(guān)的需求要同時(shí)展示,這個(gè)時(shí)候就可以利用map添加參數(shù)進(jìn)行異步請(qǐng)求同步化,再使用promise.all一次處理相關(guān)的所有數(shù)據(jù)。
總結(jié)
到此這篇關(guān)于前端for循環(huán)遍歷foreach、map使用方法的文章就介紹到這了,更多相關(guān)前端for循環(huán)遍歷foreach、map使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
兩種WEB下的模態(tài)對(duì)話框 (asp.net或js的分別實(shí)現(xiàn))
在如今互聯(lián)網(wǎng)網(wǎng)站上,AJAX效果風(fēng)靡一時(shí),應(yīng)該說(shuō)AJAX技術(shù)在未來(lái)幾年不會(huì)動(dòng)搖,在AJAX效果中,模態(tài)對(duì)話框是比較常見(jiàn)的效果,也是非常適用的。2009-12-12詳解JavaScript如何實(shí)現(xiàn)一個(gè)簡(jiǎn)易的Promise對(duì)象
Promise對(duì)象的作用將異步操作以同步操作的流程表達(dá)出來(lái),避免層層嵌套的回調(diào)函數(shù),而且Promise提供了統(tǒng)一的接口,使得控制異步操作更加容易。本文介紹了如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Promise對(duì)象,需要的可以參考一下2022-11-11js+canvas實(shí)現(xiàn)畫(huà)板功能
這篇文章主要為大家詳細(xì)介紹了js+canvas實(shí)現(xiàn)畫(huà)板功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09JavaScript代碼實(shí)現(xiàn)春晚劉謙魔術(shù)的模擬程序
昨晚春晚上劉謙的兩個(gè)魔術(shù)表演都非常精彩,尤其是第二個(gè)魔術(shù),他演繹了經(jīng)典的約瑟夫環(huán)問(wèn)題!約瑟夫環(huán)是一個(gè)經(jīng)典的數(shù)學(xué)問(wèn)題,本文給出了完整的 JavaScript 代碼實(shí)現(xiàn),感興趣的同學(xué)可以自己動(dòng)手實(shí)現(xiàn)一下2024-02-02Javascript將數(shù)字轉(zhuǎn)化成為貨幣格式字符串
這篇文章主要介紹Javascript將數(shù)字轉(zhuǎn)化成為貨幣格式字符串的方法,通俗易懂,需要的朋友可以參考下。2016-06-06淺談TypeScript3.7中值得注意的3個(gè)新特性
這篇文章主要介紹了TypeScript3.7中值得注意的3個(gè)新特性,對(duì)TS感興趣的同學(xué),可以參考下2021-05-05Clipboard.js 無(wú)需Flash的JavaScript復(fù)制粘貼庫(kù)
這篇文章主要介紹了JavaScript 內(nèi)容復(fù)制(無(wú)需flash) Clipboard.js使用方法,需要的朋友可以參考下2015-10-10