API-数组map和join方法

雪碧bibi是我的好大二

已于 2024-07-03 16:14:10 修改

阅读量294

点赞数 9

分类专栏： Web API 文章标签：前端 javascript 开发语言

于 2024-07-01 20:39:59 首次发布

本文链接：https://blog.csdn.net/m0_64105917/article/details/140109453

版权

Web API 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

学习目标：

掌握数组map和join方法

学习内容：

数组map方法
数组join方法
小结
案例

数组`map`方法：

使用场景：
map可以遍历数组处理数据，并且返回新的数组。

 <title>数组Map和join方法</title>
</head>

<body>
  <script>
    const arr = ['red', 'blue', 'pink']

    //1.数组map方法  处理数据并返回一个数组
    const newArr = arr.map(function (ele, index) {
      // console.log(ele) //数组元素
      // console.log(index) //索引号
      return ele + '颜色'
    })
    console.log(newArr)
  </script>
</body>

map也称为映射。映射是个术语，指两个元素的集之间元素相互“对应”的关系。
map重点在于有返回值，forEach没有返回值。

数组`join`方法：

作用：

join()方法用于把数组中的所有元素转换一个字符串。

语法：

const arr = ['red', 'blue', 'pink']
console.log(newArr.join('')) //red颜色blue颜色pink颜色

参数：

数组元素是通过参数里面指定的分隔符进行分割的，空字符串（''），则所有元素之间都没有任何字符。

<title>数组Map和join方法</title>
</head>

<body>
  <script>
    const arr = ['red', 'blue', 'pink']
    //2.数组join方法  把数组转换成字符串
    //小括号为空则逗号分割
    console.log(newArr.join()) //red颜色,blue颜色,pink颜色
    //小括号是空字符串，则元素之间没有分隔符
    console.log(newArr.join('')) //red颜色blue颜色pink颜色
    console.log(newArr.join('|')) //red颜色|blue颜色|pink颜色
  </script>
</body>

小结：

字符串拼接新思路：（效果更高，开发常用的写法）
利用map()和join()数组方法实现字符串拼接。

案例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>案例-学生就业统计表案例</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/index5.css">
</head>

<body>
  <h1>学生就业统计表</h1>
  <form class="info" autocomplete="off">
    <input type="text" class="uname" name="uname" placeholder="姓名" />
    <input type="text" class="age" name="age" placeholder="年龄" />
    <input type="text" class="salary" name="salary" placeholder="薪资" />
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    <select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">
      <i class="iconfont icon-tianjia"></i>添加
    </button>
  </form>

  <div class="title">共有数据<span>0</span>条</div>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>录入时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- <tr>
          <td>1</td>
          <td>迪丽热巴</td>
          <td>23</td>
          <td>女</td>
          <td>12000</td>
          <td>北京</td>
          <td>2099/9/9 08:08:08</td>
          <td>
            <a href="javascript:">
              <i class="iconfont icon-shanchu"></i>
              删除
            </a>
          </td>
        </tr> -->
    </tbody>
  </table>
  <script>
    // 参考数据
    const initData = [
      {
        stuId: 1001,
        uname: '迪丽热巴',
        age: 19,
        gender: '女',
        salary: '20000',
        city: '上海',
        time: '2024/10/1 08:08:08'
      }
    ]
    // localStorage.setItem('data', JSON.stringify(initData))
    //1.渲染业务
    //1.1先读取本地存储的数据
    //(1) 本地存储有数据则记得转换为对象然后存储到变量里面，后期用于渲染页面
    //(2) 如果没有数据，则用空数组来代替
    const arr = JSON.parse(localStorage.getItem('data')) || []
    console.log(arr)
    //1.2利用map和join方法来渲染页面
    const tbody = document.querySelector('tbody')
    function render() {
      //(1)利用map遍历数组，返回对应tr的数组
      const trArr = arr.map(function (ele, index) {
        return `
            <tr>
              <td>${ele.stuId}</td>
              <td>${ele.uname}</td>
              <td>${ele.age}</td>
              <td>${ele.gender}</td>
              <td>${ele.salary}</td>
              <td>${ele.city}</td>
              <td>${ele.time}</td>
              <td>
                <a href="javascript:" data-id:'${index}'>删除</a>
              </td>
            </tr>
  
            
            `
      })
      console.log(trArr)
      //(2)把数组转换为字符串 join
      //(3)把生成的字符串追加 tbody
      tbody.innerHTML = trArr.join('')
      //显示共计有几条数据
      document.querySelector('.title span').innerHTML = arr.length
    }
    render()

    //2.新增业务
    const info = document.querySelector('.info')
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const salary = document.querySelector('.salary')
    const gender = document.querySelector('.gender')
    const city = document.querySelector('.city')
    //2.1 form表单注册提交时间，阻止默认行为
    info.addEventListener('submit', function (e) {
      e.preventDefault()
      //2.2非空判断
      if (!uname.value || !age.value || !salary.value) {
        return alert('输入内容不能为空')
      }

      //2.3给arr数组追加对象，里面存储 表单获取过来的数据
      arr.push({
        //处理stuId:数组最后一条数据的stuId + 1
        stuId: aarr.length ? arr[arr.length - 1].stuId + 1 : 1,
        uname: uname.value,
        age: age.value,
        salary: salary.value,
        gender: gender.value,
        city: city.value,
        time: new Date().toLocaleString()
      })
      //2.4渲染页面和重置表单 reset()方法
      render()
      this.reset()//重置表单

      //2.5把数据重新存入本地存储里面。记得转换为JSON字符串存储
      localStorage.setItem('data', JSON.stringify(arr))

    })

    //3.删除业务
    //3.1采用事件委托形式，给tbody注册点击事件
    tbody.addEventListener('click', function (e) {
      //判断是否点击的是删除按钮  A链接
      if (e.target.tagName === 'A') {
        // alert(11)
        //3.2得到当前点击的索引号，渲染数据的时候，动态给a链接添加自定义属性 例如 data-id = "0"
        console.log(e.target.dataset.id)

        //确认框 确认是否要真的删除
        if (confirm('你确定要删除这条数据吗？')) {
          //3.3根据索引号，利用splice 删除数组这条数据
          arr.splice(e.target.dataset.id, 1)
          //3.4重新渲染页面
          render()
          //3.5把最新 arr数组存入本地存储
          localStorage.setItem('data', JSON.stringify(arr))
        }
      }

    })

  </script>

</body>

</html>