四、数组及其基本操作(遍历、增删、排序)、循环嵌套、slice、for...of

关注

原创 2024-11-15 08:48:59 415 阅读 AI 写同款· GEO 优化 ›

JavaScript数组方法大全与实战解析 pop方法用于删除数组最后一个元素，并返回被删除的值。// 4逐行解读：第1行：初始化数组arr。第2行：调用pop删除最后一个元素4。第3行：输出修改后的数组。第4行：输出被删除的元素。性能分析：pop的时间复杂度为 O(1)，是非常高效的删除操作。优先使用push和pop：效率高，适合大多数场景。避免频繁使用unshift和shift：尤其在大型数组中性能较差。使用不可变更新策略。阅读详情

1. 数组Array

<!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>
    // 数组Array 引用数据类型
    let names = ['Tom', 'Jerry', 'Jack', 'Rose']

    // 控制台打印整个数组
    console.log(names)

    // 拿到数组某个元素 元素索引/下标
    console.log(names[2])

    // 数组长度
    console.log(names.length)

    // 拿到最后一个元素
    console.log(names[names.length - 1]) 
  </script>
</body>

</html>

遍历数组

数组求和及平均数

数组最大值最小值

<!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>
    let names = ['Tom', 'Jerry', 'Jack', 'Rose']

    // for loop 可生成for循环框架
    /* for (let i = 0; i < array.length; i++) {
      // const element = array[i];
    } */

    // 遍历数组
    for (let i = 0; i < names.length; i++) {
      // console.log(names[i])
    }

    // 数组求和
    let nums = [2, 6, 1, 7, 4]
    let sum = 0
    for (i = 0; i < nums.length; i++) {
      sum += nums[i]
    }
    console.log(`
    数组共有${nums.length}个元素，
    其元素总和为${sum}，
    其平均值为${sum / nums.length}
    `)


    let nums2 = [10, 2, 100, 6, 1, 25, 7]
    console.log(nums2.length)
    // 数组最大值
    let max = nums2[0]
    for (let i = 1; i < nums2.length; i++) {
      max = max > nums2[i] ? max : nums2[i]
    }
    console.log(max)

    // 数组最小值
    let min = nums2[0]
    for (let i = 1; i < nums2.length; i++) {
      min = min < nums2[i] ? min : nums2[i]
    }
    console.log(min)
  </script>
</body>

</html>

数组增删改查

<!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>
    let names = ['小红', '小明', '大强']

    // 查 根据数组元素下标查找
    // console.log(names[0]) // 小红
    // console.log(names[100]) // undefined

    // 改
    // names[0] = '修改数据'

    // 增
    // names[3] = 'jack'
    // 未连续增加数据，下标4和5的元素为空属性
    // names[6] = 'jack'

    // unshift 开头增加，返回值是当前数组的长度
    // console.log(names.unshift('jack'))

    // push 结尾增加，返回值是当前数组的长度
    // console.log(names.push('rose'))

    // 删
    // shift 开头删除，返回值是删除的数据
    // console.log(names.shift())

    // pop 结尾删除，返回值是删除的数据
    // console.log(names.pop())

    // names.splice （索引，删除数据的个数，增加的数据1，增加的数据2...）
    // splice 返回值为被删除元素组成的数组
    // console.log(names.splice(1, 1))

    console.log(names)
  </script>
</body>

</html>

数组筛选

<!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>

    let nums = [2, 0, 6, 1, 77, 0, 52, 10, 18, 29, 45, 5]
    console.log(nums)

    // 筛选出大于等于10的数据 放到新数组中
    let arr1 = []
    for (let i = 0; i < nums.length; i++) {
      if (nums[i] >= 10) {
        arr1.push(nums[i])
      }
    }
    console.log(arr1)

    // 数组去0
    let arr2 = []
    for (let i = 0; i < nums.length; i++) {
      if (nums[i] !== 0) {
        arr2.push(nums[i])
      }
    }
    console.log(arr2)
  </script>
</body>

</html>

案例1-手风琴

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>手风琴案例</title>
  <style>
    .accordion {
      display: flex;
      overflow: hidden;
      width: 1120px;
      height: 260px;
      margin: 50px auto;
    }

    .accordion>div {
      width: 120px;
      border: 1px solid #fff;
      transition: all 0.5s;
    }

    .accordion>div:hover {
      width: 400px;
    }
  </style>
</head>

<body>
  <div class="accordion box">
    <!-- <div><img src="./images/1.jpg" alt=""></div>
    <div><img src="./images/2.jpg" alt=""></div>
    <div><img src="./images/3.jpg" alt=""></div>
    <div><img src="./images/4.jpg" alt=""></div>
    <div><img src="./images/5.jpg" alt=""></div>
    <div><img src="./images/6.jpg" alt=""></div>
    <div><img src="./images/7.jpg" alt=""></div> -->
  </div>

  <!-- scr属性不加引号不报错，HTML容错解析
  示例代码：<img src=images/photo.jpg alt=家庭照片>
  
  如果images/photo.jpg路径中不包含空格或特殊字符，
  并且alt属性的值也不包含这些字符，
  那么上述代码在大多数浏览器中都能够正确解析和显示图像。
  然而，这种做法并不符合HTML规范，也不建议在实际开发中使用。 -->

  <script>
    let arr = [
      './images/1.jpg',
      './images/2.jpg',
      './images/3.jpg',
      './images/4.jpg',
      './images/5.jpg',
      './images/6.jpg',
      './images/7.jpg',
    ]
    // console.log(arr[0]);

    // 1. 课上方法 构建字符串(性能高)
    /* 
      在实际开发中，推荐使用文档片段（未学）或先构建字符串再一次性更新 DOM 的方法，
      以避免频繁操作 DOM 带来的性能问题。同时，这种方法也更具可读性和可维护性。
    */
    let str = ''
    for (let i = 0; i < arr.length; i++) {
      str += `<div><img src="${arr[i]}" alt=""></div>`
    }
    // console.log(str);
    document.querySelector('.box').innerHTML = str
    /*
      好处：
        ①. 性能优化：通过先构建字符串 str，然后一次性设置 innerHTML，可以减少对 DOM 的多次操作，从而提高性能。
        ②. 代码清晰：字符串拼接逻辑与 DOM 操作分离，代码更易于理解和维护。
      坏处：
        内存占用：当 arr 很大时，字符串 str 可能会占用大量内存。
    */

    // 2. 自做
    /* for (let i = 0; i < arr.length; i++) {
      document.querySelector('.accordion').innerHTML += `
        <div><img src="${arr[i]}" alt=""></div>
      `
    } */
    /*
      好处：
        简单直接：代码简单直观，易于理解。
      坏处：
        ①. 性能问题：每次循环都会修改 .accordion 的 innerHTML，这会导致浏览器重新解析和渲染整个 .accordion 元素的内容，效率低下，特别是在 arr 很大时。
        ②. 潜在的错误：如果 .accordion 在 DOM 中不存在，每次循环都会抛出错误。
    */

  </script>
</body>

</html>

数组排序

<!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>
    let arr = [100, 20, 40, 5, 23, 70, 120, 56]
    console.log(arr) // [100, 20, 40, 5, 23, 70, 120, 56]

    // sort 会改变原数组
    // sort 自带功能 → 遍历
    // 升序 元素数值小的在前面

    // 1.升序排列写法
    arr.sort(function (a, b) {
      return a - b
    })
    console.log(arr) // [5, 20, 23, 40, 56, 70, 100, 120]

    // 2.降序排列写法
    arr.sort(function (a, b) {
      return b - a
    })
    console.log(arr) // [120, 100, 70, 56, 40, 23, 20, 5]

  </script>
</body>

</html>

2. 循环嵌套

<!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>
    // 生气 道歉 一天三遍 三天
    for (let i = 0; i < 3; i++) {
      console.log(`第${i + 1}天`)

      for (let j = 0; j < 3; j++) {
        console.log(`第${i + 1}天第${j + 1}遍，巴拉巴拉错了`)
      }
    }
  </script>
</body>

</html>

案例2-生成电影院座位

<!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="./fonts/iconfont.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="movie"></div>
  <div class="cinema">
    <!-- <div class="row">
      <i class="iconfont icon-zuowei"></i>
    </div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div> -->
  </div>

  <!-- 课上讲解 -->
  <script>
    // 数组数据的个数用来表示座位数
    // 数组内包数组 二维数组
    // 二维数组取数据 seats[0][0] → seats二维数组的第一个数组元素的第一个值
    let seats = [
      [0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0],
      [0, 0, 1, 1, 1, 1, 0, 0],
      [0, 0, 1, 1, 0, 1, 1, 0, 0],
      [0, 1, 1, 1, 1, 0],
      [0, 0, 0, 0, 0, 0],
    ]

    // 只有每行拼接
    /* for (let i = 0; i < seats.length; i++) {
      let str = ''
      for (let j = 0; j < seats[i].length; j++) {
        str += seats[i][j] !== 1 ? `<i class="iconfont icon-zuowei"></i>` : `<i class="iconfont icon-zuowei" style="color: blue;"></i>`
      }
      document.querySelector(`.row:nth-child(${i + 1})`).innerHTML = str
    } */

    // 所有都拼接
    let str = ''
    for (let i = 0; i < seats.length; i++) {
      let strI = ''
      for (let j = 0; j < seats[i].length; j++) {
        strI += seats[i][j] !== 1 ? `<i class="iconfont icon-zuowei"></i>` : `<i class="iconfont icon-zuowei" style="color: blue;"></i>`
      }
      str += `<div class="row">${strI}</div>`
    }
    document.querySelector('.cinema').innerHTML = str
  </script>

  <!-- 自做 未用字符串拼接 性能差 -->
  <!-- <script>
    // 数组数据的个数用来表示座位数
    let seats = [
      [0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0],
      [0, 0, 1, 1, 1, 1, 0, 0],
      [0, 0, 1, 1, 0, 1, 1, 0, 0],
      [0, 1, 1, 1, 1, 0],
      [0, 0, 0, 0, 0, 0],
    ]

    for (let i = 0; i < seats.length; i++) {
      let row = seats[i]

      for (let j = 0; j < row.length; j++) {
        // .row:nth-child(6)

        // 出现问题 .row:nth-child(${i})错误 i起始值为0 找不到第0个row 为空
        // document.querySelector(`.row:nth-child(${i})`).innerHTML += `

        // 正确做法
        /* document.querySelector(`.row:nth-child(${i + 1})`).innerHTML += `
          <i class="iconfont icon-zuowei"></i>
        ` */

        // 进阶 根据座位是否有人已购票渲染座位颜色
        /*  if (row[j] !== 1) {
           document.querySelector(`.row:nth-child(${i + 1})`).innerHTML += `
             <i class="iconfont icon-zuowei"></i>
           `
         } else {
           // 行内css书写方式 <p style="color: blue; font-size: 20px;">这是一个带有内联样式的段落。</p>
           document.querySelector(`.row:nth-child(${i + 1})`).innerHTML += `
             <i class="iconfont icon-zuowei" style="color: blue;"></i>
           `
         } */
      }
    }

  </script> -->
</body>

</html>

案例3-生成快捷导航

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./fonts/iconfont.css">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    nav {
      padding-top: 16px;
      padding-bottom: 24px;
      background: #3f7ef7;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    nav .txt {
      background-color: #588ff8;
      padding: 0px 11px 0 4px;
      color: white;
      height: 26px;
      font-size: 14px;
      border-radius: 13px;
      margin: 0 5px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .search {
      background-color: #3f7ef7;
      text-align: center;
      padding-top: 24px;
      margin: 0 auto;
    }

    .search-wrapper {
      margin: 0 auto;
      width: 40%;
      position: relative;
    }

    input {
      padding-left: 60px;
      width: 100%;
      height: 40px;
      border: none;
      outline: none;
      border-radius: 4px;
    }

    header {
      width: 1440px;
      height: 54px;
      margin: 0 auto;
    }

    header img {
      width: 1440px;
      height: 54px;
      display: block;
    }

    .web-icon {
      width: 28px;
      height: 28px;
      position: absolute;
      top: 6px;
      left: 6px;
    }

    .web-icon img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .triangle {
      position: absolute;
      top: 12px;
      left: 38px;
      width: 16px;
      height: 16px;
      line-height: 16px;
      color: #c3c8d0;
      font-size: 12px;
    }

    .txt .iconfont {
      width: 20px;
      height: 20px;
      border-radius: 10px;
      color: white;
      background-color: black;
      text-align: center;
      line-height: 20px;
      margin-right: 6px;
    }

    .icon-github {
      color: white;
      background-color: black;
    }
  </style>
</head>

<body>
  <header>
    <img src="./images/juejin.png" alt="">
  </header>

  <div class="search">
    <div class="search-wrapper">
      <input type="text" placeholder="输入关键词 ｜ tab键切换搜索引擎">
      <div class="web-icon">
        <img src="./images/chrome.png" alt="">
      </div>

      <span class="triangle iconfont icon-xiangxia"></span>
    </div>
  </div>

  <!-- nav H5新增的标签 导航标签 -->
  <nav>
    <!-- <span class="txt">
      <span class="iconfont icon-github"></span>
      github
    </span> -->
  </nav>

  <script>
    // 需求：用户输入2个导航名称，显示到导航区域

    // 默认导航内容
    let navs = ['百度', '抖音', '淘宝']

    /* navs.push(prompt('请输入添加导航名称'))
    navs.push(prompt('请输入添加导航名称')) */
    for (let i = 1; i <= 2; i++) {
      navs.push(prompt('请输入添加导航名称'))
    }

    let str = ''
    for (let i = 0; i < navs.length; i++) {
      str += `
        <span class="txt">
          <span class="iconfont icon-github"></span>
          ${navs[i]}
        </span>
      `
    }
    // console.log(str)
    document.querySelector('nav').innerHTML = str
  </script>

  <!-- 自做 未用字符串拼接 -->
  <!-- <script>
    let navs = ['百度', '抖音', '淘宝']
    navs.push(prompt('请输入添加导航名称'))
    navs.push(prompt('请输入添加导航名称'))
    for (let i = 0; i < navs.length; i++) {
      document.querySelector('nav').innerHTML += `
      <span class="txt">
        <span class="iconfont icon-github"></span>
        ${navs[i]}
      </span>
    `
    }
  </script> -->
</body>

</html>

案例4-九九乘法表

<!-- 课上讲解 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    span {
      /* 转换为行内块元素 → 一行可以共存，宽高还能生效 */
      display: inline-block;
      /* padding: 2px 5px; */
      width: 70px;
      /* height: 30px; */
      border: 1px solid lightcoral;
      padding-left: 5px;
    }
  </style>
</head>

<body>

  <!-- <p>
    <span></span>
  </p> -->

  <script>
    // 九九乘法表
    let strI = ''
    for (let i = 1; i <= 9; i++) {
      let strJ = ''
      for (let j = 1; j <= i; j++) {
        strJ += `<span>${j}×${i}=${j * i}</span>`
      }
      strI += `<p>${strJ}</p>`
    }
    document.write(strI)
  </script>
</body>

</html>


<!-- 自做 -->
<!-- <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      border-collapse: collapse;
      margin: 0 auto;
      color: hotpink;
    }

    td {
      border: 1px solid blueviolet;
      padding: 3px 8px;
    }
  </style>
</head>

<body>

  <table>
  </table>

  <script>
    // 九九乘法表
    let strRow = ''
    for (let i = 1; i <= 9; i++) {
      let str = ''
      for (let j = 1; j <= i; j++) {
        str += `<td>${j}×${i}=${i * j}</td>`
      }
      strRow += `<tr>${str}</tr>`
    }
    document.querySelector('table').innerHTML = strRow
  </script>
</body>

</html> -->

3. 作业

3.1 数组版-渲染王者荣耀头像

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 600px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
    }

    img {
      width: 100px;
      height: 100px;
      border-radius: 10px 0;
      border: 2px solid blue;
      margin-bottom: 10px;
      margin-right: 10px;
    }
  </style>
</head>

<body>

  <div class="box">
    <!-- <img src="./images/1.webp" alt=""> -->
  </div>

  <!-- 
    根据用户输入的个数，页面可以渲染对应王者荣耀英雄的个数
  -->
  <script>
    // 图片路径数组
    let arr = []
    for (let i = 1; i <= 20; i++) {
      arr.push(`./images/${i}.webp`)
    }

    // 判断输入数字是否复合规范
    for (; ;) {
      let num = +prompt('请输入1～20个之间的英雄的个数：')
      if (num > 0 && num <= 20) {
        let str = ''
        for (let i = 0; i < num; i++) {
          str += `<img src="${arr[i]}" alt="">`
        }
        document.querySelector('.box').innerHTML = str
        break
      } else {
        alert('输入数字错误，请输入正确的数字哦')
      }
    }

  </script>
</body>

</html>

3.2 slice

<!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>
    // 参考网址
    // https://wangdoc.com/javascript/stdlib/array#slice

    // 实现对 数组 arr 进行快速复制得到新数组
    let arr = [10, 20, 30]
    console.log(arr)

    let newArr = arr.slice()
    console.log(newArr)

  </script>
</body>

</html>

3.3 for...of

<!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>
    // 参考网址
    // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of

    // 使用for...of 语句来遍历数组，进行求和
    let arr = [10, 20, 30]

    let sum = 0
    for (let i of arr) {
      sum += i;
    }
    console.log(sum);
  </script>
</body>

</html>

3.4 选择排序算法

<!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>
    // 选择排序算法
    let arr = [4, 2, 5, 1, 3]
    for (let i = 0; i < arr.length - 1; i++) {
      for (let j = 0; j < arr.length - i - 1; j++) {
        // 开始交换 但是前提第一个数大于第二个数才交换
        if (arr[j] > arr[j + 1]) {
          // 交换2个变量
          let temp = arr[j]
          arr[j] = arr[j + 1]
          arr[j + 1] = temp
        }
      }
    }
    console.log(arr)
  </script>
</body>

</html>

收录于