JavaScript 基础三part1.数组-CSDN博客

本文链接：https://blog.csdn.net/yavlgloss/article/details/135384439

本文详细介绍了JavaScript中的数组基础知识，包括数组定义、基本使用（声明、取值、术语和遍历）、以及操作数组的方法（修改、新增、删除和排序）。通过实例演示了如何获取用户输入数据并生成柱状图进行可视化分析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript 基础三part1.数组

2.1 数组是什么
2.2 数组的基本使用
2.3 操作数组
综合案例

2.1 数组是什么

数组：(Array)是一种可以按顺序保存数据的数据类型

数据的编号也叫索引或下标
数组可以存储任意类型的数据

2.2 数组的基本使用

（1）声明

声明语法（1）let 数组名 =[数据1, 数据2, 数据3, ......,数据n]
中括号[ ]是数组的字面量。
声明语法（2）let arrn = new Array(数据1, 数据2, 数据3, ......,数据n)
声明新的空数组：let arr = [ ];

（2）取值

语法：数组名[下标]

（3）一些术语

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

（4）遍历数组

let nums = [10, 20, 30, 40, 50];
for(let i = 0; i < nums.length; i++) {
	document.write(nums[i]);
}

2.3 操作数组

数组本质是数据集合，操作数据无非就是增删改查语法
在这里插入图片描述

（1）修改

let arr = [];
console.log(arr[0]); // undefined
arr[0] = 1;
arr[1] = 5;
console.log(arr); // [1,5]

let arr = ['pink', 'red', 'green'];
console.log(arr); // ['pink', 'red', 'green']
arr[0] = 'hotpink';
console.log(arr); // ['hotpink', 'red', 'green']

（2）新增

① 数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点)
可以push一个，也可以push多个

let arr = ['red', 'green'];
arr.push('pink')
console.log(arr); // ['red', 'green','pink']

let arr = ['red', 'green'];
console.log(arr.push('pink')); // 3 返回新数组的长度

let arr = ['red', 'green'];
arr.push('pink','hotpink')
console.log(arr); // ['red', 'green','pink','hotpink']

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

可以unshift一个，也可以unshift多个

（3）删除

① 数组. pop() 方法从数组中删除最后一个元素，并返回该元素的值
只能删一个
语法： arr.pop();
② 数组. shift() 方法从数组中删除第一个元素，并返回该元素的值
语法：arr.shift();
③ 数组. splice() 方法删除指定元素
这个方法有两个参数
arr.splice(start，deleteCount)
arr.splice(起始位置，删除几个元素) 如果第二个参数不写的话后面的都删掉了。

let arr =['red', 'green','pink'];
arr.splice(1,1); //删除了green

（4）排序 sort 方法

let arr = [2,4,3,5,1];
arr.sort();
console.log(arr); // 1 2 3 4 5

升序 & 降序

let arr = [4, 2, 5, 1, 3]

// 1.升序排列写法
arr.sort(function (a, b) {
return a - b
})
console.log(arr) // [1, 2, 3, 4, 5]


// 降序排列写法
arr.sort(function (a, b) {
return b - a
})
console.log(arr) // [5, 4, 3, 2, 1]

综合案例

需求：用户输入四个季度的数据，可以生成柱形图
这个柱状图分析，跳转链接

代码通过 document.wirte写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>
    <style>
        * {
            margin: 0;
            padding: 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>
    <script>
        // 1. 四次弹框效果
        // 声明一个新的数组
        let arr = []
        for (let i = 1; i <= 4; i++) {
            // let num = prompt(`请输入第${i}季度的数据:`)
            // arr.push(num)
            arr.push(prompt(`请输入第${i}季度的数据:`))
            // push记得加小括号，不是等号赋值的形式
        }
        // console.log(arr)  ['123','135','345','234']
        // 盒子开头
        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>