js for循环 异步

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<script type="text/javascript">

    function queue(num){

        return new Promise(resolve=>{
            resolve();
        }).then(
            value=>{
                let promise=Promise.resolve();
                num.map(v=>{
                    promise=promise.then(_=>{
                        return new Promise(resolve=>{

                            //异步操作
                            setTimeout(() => {
                                console.log(v);
                                resolve();
                            }, 1000);

                        })
                    })
                })
            }
        )
    }

    new Promise(resolve=>{
        resolve();
    }).then(
        _=>{
            let num=[1,2,3,4,5];
            return Promise.resolve(num);
        }
    ).then(
        value=>{
            queue(value);
        }
    ).then(
        value=>{
            console.log("完成");
        }
    )


</script>   

</body>
</html>

得到的结果:
img

问题:
如何实现在打印出1~5之后,再打印"完成"?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script type="text/javascript">
    function queue(num){
        return new Promise(resolve=>{
            resolve();
        }).then(
            value=>{
                let promise=Promise.resolve();
                num.map(v=>{
                    promise=promise.then(_=>{
                        return new Promise(resolve=>{
                            //异步操作
                            setTimeout(() => {
                                console.log(v);
          if(v>=5)console.log("完成");
                                resolve();
                            }, 1000);
                        })
                    })
                })
            }
        )
    }
    new Promise(resolve=>{
        resolve();
    }).then(
        _=>{
            let num=[1,2,3,4,5];
            return Promise.resolve(num);
        }
    ).then(
        value=>{
            queue(value);
        }
    ).then(
        value=>{
            console.log("完成");
        }
    )
 
</script>   
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script type="text/javascript">
var  is =false;
    function queue(num){
        return new Promise(resolve=>{
            resolve();
        }).then(
            value=>{
                let promise=Promise.resolve();
                num.map(v=>{
                    promise=promise.then(_=>{
                        return new Promise(resolve=>{
                            //异步操作
                            setTimeout(() => {
                            if(v==5){
                              is=true
                            }
                                console.log(v);
         
                                resolve();
                            }, 1000);
                        })
                    })
                })
            }
        )
    }
    new Promise(resolve=>{
        resolve();
    }).then(
        _=>{
            let num=[1,2,3,4,5];
            
            return Promise.resolve(num);
        }
    ).then(
        value=>{
            queue(value);
        }
    ).then(
        value=>{
        if(is){
         console.log("完成");
        }
        
           
        }
    )
 
</script>   
</body>
</html>

img