快捷導(dǎo)航

前端for循環(huán)遍歷foreach、map使用方法舉例

更新時(shí)間：2025年02月28日 08:35:17 作者：前端燁

這篇文章主要介紹了前端開發(fā)中不同類型的for循環(huán)遍歷,包括for、foreach和map,詳細(xì)探討了它們的使用場(chǎng)景、效率和特點(diǎn),需要的朋友可以參考下

前端不同類型的for循環(huán)遍歷

場(chǎng)景：很多時(shí)候后端發(fā)來的數(shù)據(jù)是不能夠完全契合前端的需求的，比如你要一個(gè)數(shù)據(jù)對(duì)象中的值，但是這個(gè)值卻作為了key出現(xiàn)；比如你要通過一個(gè)數(shù)組中的對(duì)象的某個(gè)屬性來確定到底取哪個(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í)間的長短
        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ì)直接跳過當(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.簡單生成新數(shù)組

return是每次返回一個(gè)子元素（假如只有一行簡單的代碼，也可以去掉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
 })
 //可以僅遍歷出了自己想要的屬性的數(shù)組
 console.log(newArr); // ['張三', '李四', '王五']

4.在數(shù)組對(duì)象中追加屬性、更改屬性值

…三個(gè)點(diǎn)屬于es6新特性，就是用來展開對(duì)象中的所有屬性的簡寫，我們是可以復(fù)寫相關(guān)的屬性的，不影響使用。

 let arr = [{name:"張三",age:18},{name:"李四",age:22},{name:"王五",age:23},]
 let newArr = arr.map(item=>{
 return {
      ...item,//es6新語法添加所有屬性
   		age:`${item.age}歲`,//更改值
      class:1 //添加新屬性方法
      }
 })
 console.log(newArr);

簡寫方法，不寫return的時(shí)候的加上一個(gè)小括號(hào)來包裹相關(guān)的屬性。

 let newArr = arr.map(item=>({...item,age:`${item.age}歲`,class:1}))

相關(guān)的結(jié)果如下所示

5.進(jìn)行屬性名稱的解構(gòu)替換

假如說我們要將name這個(gè)屬性名稱改成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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: