JavaScript-数组

雪碧bibi是我的好大二

已于 2024-06-14 15:36:08 修改

阅读量573

点赞数 16

分类专栏： JavaScript基础知识文章标签： javascript 前端开发语言

于 2024-06-13 10:18:28 首次发布

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

版权

JavaScript基础知识专栏收录该内容

19 篇文章 0 订阅

订阅专栏

学习目标：

掌握数组

学习内容：

数组是什么
数组的基本使用
练习
操作数组
案例

数组是什么：

数组Array 是一种可以按顺序保存数据的数据类型。
场景：如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便。

数组的基本使用：

声明语法

let 数组名 = [数据1,数据2，... ，数据n]

<title>数组</title>
</head>

<body>
  <script>
    // let 数组名 = [数据1,数据2,...,数据n]
    // let arr = [10,20,30]
    // 1.声明语法  有序
    let arr = ['雪碧', '丸子', '妮妮', '星星', '月亮']
    // 2.使用数组  数组名[索引号] 从0开始
    console.log(arr[0])  // 雪碧

    //3.数组长度  = 索引号 + 1
    console.log(arr.length) // 5



  </script>

</body>

let arr = new Array(数据1,数据2，... ，数据n)

<title>数组的基本使用</title>
</head>

<body>
  <script>
    //1.字面量声明数组
    // let arr = [1,2,3,'pink',true]
    //2.使用new Array  构造函数声明   了解
    let arr = new Array(1, 2, 3, 4)
    console.log(arr)
  </script>

</body>

数组是按顺序保存，所以每个数据都有自己的编号。
计算机中的编号从0开始，所以雪碧的编号为0，丸子的编号为1，以此类推。
在数组中，数据的编号也叫索引或下标。
数组可以存储任意类型的数据。

取值语法

数组名[下标]

let arr = ['雪碧', '丸子', '妮妮', '星星', '月亮']
arr[0] //雪碧
arr[1] //丸子

通过下标取数据。
取出来是什么类型的，就根据这种类型特点来访问。

一些术语

元素：数组中保存的每个数据都叫数组元素。
下标：数组中数据的编号。
长度：数组中数据的个数，通过数组的length属性获得。

let arr = ['雪碧', '丸子', '妮妮', '星星', '月亮']
console.log(arr[0]) // 雪碧
console.log(arr[1]) //丸子
console.log(arr.length) //5

遍历数组（重点）

用循环把数组中每个元素都访问到，一般会用for循环遍历。

for (let i = 0; i < 数组名.length; i++) {
      数组名[i]
    }

练习：

数组求和与平均值

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习-数组求和</title>
</head>

<body>
  <script>
    let arr = [2, 6, 1, 7, 4]
    //1.求和的变量 sum
    let sum = 0

    //2.遍历累加
    for (let i = 0; i < arr.length; i++) {
      // sum = sum + arr[i]
      sum += arr[i]
    }
    document.write(`所有元素的和是${sum}`)
    //3.平均值 sum / arr.length = 4
    document.write(`数组的平均值是${sum / arr.length}`)

  </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>练习-数组求最大值</title>
</head>

<body>
  <script>
    let arr = [2, 6, 1, 77, 52, 25, 7]
    let max = arr[0]
    //遍历数组
    for (let i = 1; i < arr.length; i++) {
      // 如果max比数组元素里面的值小，我们就要把这个数组元素赋值给max
      if (max < arr[i]) {
        max = arr[i]
      }
    }
    console.log(max)
  </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>练习-数组求最小值</title>
</head>

<body>
  <script>
    let arr = [2, 6, 1, 77, 52, 25, 7]
    let min = arr[0]
    for (let i = 1; i < arr.length; i++) {
      if (min > arr[i]) {
        min = arr[i]
      }
    }
    console.log(min)
  </script>

</body>

</html>

操作数组：

数组本质是数据集合，操作数据无非就是 增删改查 语法。

在这里插入图片描述

操作数组-改

 <title>操作数组-改</title>
</head>

<body>
  <script>
    let arr = ['pink', 'red', 'green']
    //修改
    // arr[0] = 'hotpink'
    // console.log(arr)

    //给所有的数组元素后面加个老师  修改
    for (let i = 0; i < arr.length; i++) {
      arr[i] = arr[i] + '老师'
    }
    console.log(arr)
  </script>

</body>

操作数组-新增

数组.push()方法将一个或多个元素添加到数组的末尾，并返回改数组的新长度（重点）。

arr.push(元素1,...,元素n)

arr.unshift(新增的内容)方法将一个或多个元素添加到数组的开头，并返回该数组的新长度。

arr.unshift(元素1,...,元素n)

 <title>操作数组-新增</title>
</head>

<body>
  <script>
    let arr = ['pink', 'hotpink']
    //1.新增 push 推末尾
    // arr.push('deeppink')
    // console.log(arr)

    //2.开头追加
    arr.unshift('red')
    console.log(arr)


  </script>

</body>

练习-数组筛选

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习-数组筛选</title>
</head>

<body>
  <script>
    let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    //1.声明新的空数组
    let newArr = []
    //2.遍历旧数组
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] >= 10) {
        //3.满足条件  追加给新数组
        newArr.push(arr[i])
      }
    }
    //4.输出新的数组
    console.log(newArr)
  </script>

</body>

</html>

操作数组-删除

数组.pop()方法从数组中删除最后一个元素，并返回该元素的值。

arr.pop()

数组.shift() 方法从数组中删除第一个元素，并返回该元素的值。

arr.shift()

数组.splice()方法，删除指定元素。

arr.splice(start,deleteCount)

arr.splice(起始位置,删除几个元素)

 <title>操作数组-删除</title>
</head>

<body>
  <script>
    let arr = ['red', 'pink', 'blue']
    //1.pop() 删除最后一个元素
    // arr.pop()
    // arr.pop()
    // console.log(arr)

    //2.shift()  删除第一个元素
    // arr.shift()
    // console.log()

    //3.splice 删除指定元素 splice（起始位置-索引号，删除几个）
    arr.slice(1, 1) //从索引号1的位置开始删，只删除1个
    // arr.slice(1) //从green 删除到最后
    console.log(arr)
  </script>

</body>

案例：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>案例-渲染柱形图案</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .box {
      display: flex;
      width: 700px;
      height: 300px;
      border-left: 1px solid pink;
      border-bottom: 1px solid pink;
      margin: 50px auto;
      justify-content: space-around;
      align-items: flex-end;
      text-align: center;
    }

    .box>div {
      display: flex;
      width: 50px;
      background-color: pink;
      flex-direction: column;
      justify-content: space-between;
    }

    .box div span {
      margin-top: -20px;
    }

    .box div h4 {
      margin-bottom: -35px;
      width: 70px;
      margin-left: -10px;
    }
  </style>
</head>

<body>
  <!-- <div class="box"> -->
  <!-- <div style="height : 123px;">
      <span>123</span>
      <h4>第一季度</h4>
    </div>
    <div style="height: 156px;">
      <span>156</span>
      <h4>第二季度</h4>
    </div>
    <div style="height: 120px;">
      <span>120</span>
      <h4>第三季度</h4>
    </div>
    <div style="height: 210px;">
      <span>210</span>
      <h4>第四季度</h4>
    </div> -->
  <!-- </div> -->
  <script>
    //1.四次弹框效果
    //声明一个新的数组
    let arr = []
    for (let i = 1; i <= 4; i++) {
      // let data = prompt(`请输入第${i}季度的数据：`)
      // arr, push(data)
      arr.push(prompt(`请输入第${i}季度的数据：`))
      //push记得加小括号，不是等号赋值的形式

    }
    // console.log(arr)
    //盒子开头
    document.write(` <div class="box">`)

    //盒子中间  利用循环的形式  跟数组有关系
    for (let i = 0; i < arr.length; i++) {
      document.write(`
        <div style="height : ${arr[i]}px;">
      <span>${arr[i]}</span>
      <h4>第${i + 1}季度</h4>
    </div>
    `)
    }

    //盒子结尾
    document.write(`</div>`)
  </script>

</body>

</html>