JavaScript map和join方法结合运用场景

最新推荐文章于 2024-05-30 17:11:44 发布

Lauv-

最新推荐文章于 2024-05-30 17:11:44 发布

阅读量1.2k

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_74086230/article/details/127592023

版权

map方法

语法：

数组.map(function(item,index){})

参数(自行定义):

第一个形参(必须要写) 数组元素

第二个形参(可以省略) 数组的索引

作用:

1.map方法会遍历数组

2.对数组里的元素进行加工处理

返回值 :

加工后的新数组

join方法

语法:

数组.join()

参数:

链接符号没有传递参数数组里的元素会以英文逗号链接

作用:

将数组里的元素合并为一个字符串

map和join方法结合操作数组对象生成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>
<ul></ul>
    
    <script>
        const arr = [
      { uname: '张三', age: 18 },
      { uname: '李四', age: 18 },
      { uname: '王五', age: 18 }
    ]
        const newArr = arr.map(function(item){
             return `<li>${item.uname}</li>`
            // console.log(newArr);
        })
        document.querySelector('ul').innerHTML = newArr.join('')
    </script>  
</body>
</html>