当前位置： 首页 > news >正文

【JavaScript】金丹期功法

news 2025/7/2 5:20:02

目录

  • 数组
    • 声明数组
    • 数组的基本使用
    • 遍历数组
    • 案例：求数组中的最值
    • 数组操作
      • 查询数据
      • 修改数据
      • 新增数据
      • 案例：数组筛选
      • 删除数据
  • 案例：渲染柱形图

数组

数组（Array）是一种可以按顺序保存数据的数据类型

场景：如果有多个数据可以用数组保存起来，然后放到一个变量中，方便管理

声明数组

声明语法：

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

代码示例：

let names = ['张三','李四','王五','赵六']

数组的基本使用

获取数组元素

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <script>
        let names = ['张三','李四','王五','赵六']
        document.write(names)
        document.write(names[0]) // 张三
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

注意事项：

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

获取数组的长度

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个JS程序</title>
</head>
<body>
    <script>
        let names = ['张三','李四','王五','赵六']
        document.write('数组的长度为' + names.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>Document</title>
</head>
<body>
    <script>
        let arr = ['刘德华','张学友','周星驰','黎明','郭富城','周华健','周杰伦','王力宏','陶喆']
        for(let i = 0;i < arr.length;i++){
            document.write(arr[i] + `&nbsp`) 
        }
    </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 = [10,9,45,123,4,86]
        // 求数组的最大值
        let max = arr[0]
        // 遍历数组
        for(let i = 0; i < arr.length; i++){
            // 如果当前的元素比max大，就把当前元素赋值给max
            if(arr[i] > max){
                // 把当前元素赋值给max
                max = arr[i]
            }
        }
        // 输出最大值
        document.write(`数组的最大值是${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>第一个JS程序</title>
</head>
<body>
    <script>
        let names = ['张三','李四','王五','赵六']
        document.write(names)
        document.write(names[0]) // 张三
    </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 = ['刘德华','张学友','周星驰','黎明','郭富城','周华健','周杰伦','王力宏','陶喆']
        for(let i = 0;i < arr.length;i++){
            document.write(arr[i] + `&nbsp`) 
        }
    </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 = [0,0,0,0,0,0,0,0,0,0]
        let num = 1
        for(let i = 0;i < 10;i++){
            arr[i] += num
            num++
        }
        document.write(arr)
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

新增数据

利用 数组.push() 将一个或多个元素添加到数组末尾，并返回该数组的新长度

代码示例：

<!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 = ['国破山河在','城春草木深','感时花溅泪','恨别鸟惊心']
        document.write(`新增前的数组：${arr}<br>`)
        document.write(`新增前的数组长度：${arr.length}<br>`)
        arr.push('烽火连三月','家书抵万金','白头搔更短','浑欲不胜簪')
        document.write(`新增后的数组：${arr}<br>`)
        document.write(`新增后的数组长度：${arr.length}<br>`)
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

利用 arr.unshift() 将一个或多个元素添加到数组的开头，并返回该数组的新长度

代码示例：

<!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 = ['竹喧归浣女','莲动下渔舟','随意春芳歇','王孙自可留']
        document.write(`新增前的数组：${arr}<br>`)
        document.write(`新增前的数组长度：${arr.length}<br>`)
        arr.unshift('空山新雨后','天气晚来秋','明月松间照','清泉石上流')
        document.write(`新增后的数组：${arr}<br>`)
        document.write(`新增后的数组长度：${arr.length}<br>`)
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

案例：数组筛选

将数组[90, 65, 70, 97, 78, 89, 80]中大于等于 80 的元素选出来，放入新数组

代码示例：

<!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 = [90, 65, 70, 97, 78, 89, 80]
        let newArr = []
        for(let i = 0; i < arr.length; i++){
            if(arr[i] >= 80){
                newArr.push(arr[i])
            }
        }
        document.write(newArr)
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

删除数据

使用 arr.pop() 从数组中删除最后一个元素，并返回该元素的值

使用 arr.shift() 从数组中删除第一个元素，并返回该元素的值

代码示例：

<!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 = [1,2,3,4,5,6,7,8,9]
        document.write(`原数组： ${arr}<br>`)
        document.write(`pop删除的元素是： ${arr.pop()}<br>`)
        document.write(`shift删除的元素是： ${arr.shift()}<br>`)
        document.write(`删除后的数组： ${arr}<br>`)
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

使用 arr.splice() 删除指定元素

  • 语法：arr.splice(start, deleteCount)
  • start：起始位置，deleteCount：删除几个元素

代码示例：

<!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 = [1,2,3,4,5,6,7,8,9]
        document.write(`原数组： ${arr}<br>`)
        document.write(`splice删除的元素 ${arr.splice(3,3)}<br>`)
        document.write(`删除后的数组 ${arr}<br>`)
    </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>
        *{
            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>
    <!-- <div class="box">
        <div style="height: 123px;">
            <span>123</span>
            <h4>第1季度</h4>
        </div>
        <div style="height: 156px;">
            <span>156</span>
            <h4>第2季度</h4>
        </div>
        <div style="height: 189px;">
            <span>189</span>
            <h4>第3季度</h4>
        </div>
        <div style="height: 200px;">
            <span>200</span>
            <h4>第4季度</h4>
        </div>
    </div> -->
    <script>
        let arr = [];
        for(let i = 1; i <= 4; i++){
            arr.push(prompt(`请输入第${i}季度的销售额`)) 
        }
        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>

结果如下：

屏幕录制 2025-03-26 150619

http://www.dtcms.com/a/91879.html

相关文章：

  • LLM动态Shape实现原理与核心技术
  • 【银河麒麟系统常识】命令：dotnet run（运行）
  • 远程医疗的现状如何？
  • C++ 之 SOCKET 通信详解
  • “自动驾驶背后的数学” 专栏导读
  • 推陈换新系列————java8新特性（编程语言的文艺复兴）
  • 【现代深度学习技术】现代卷积神经网络04：含并行连接的网络（GoogLeNet）
  • 每日总结3.26
  • 算法题（108）：
  • IM腾讯Trtc与vod云点播:实现合流录制并上传,根据参数返回视频地址
  • JSON简介及C++中的JSON使用指南
  • LangChain4j（1）：初识LangChain4j
  • 【Linux】POSIX信号量与基于环形队列的生产消费者模型
  • ADS 学习和培训资源 - Keysight ADS
  • Netty——TCP 粘包/拆包问题
  • 信息系统运行管理员教程1--信息系统运维概述
  • 人员进出新视界：视觉分析算法的力量
  • MySQL入门级操作
  • Ubuntu服务器中Swapper如何与虚拟内存配合
  • 【八股】未知宽高元素水平垂直居中的三种方法
  • CNN基础考点
  • 【C++ Linux编程进阶 从0实现muduo库系列】第五讲：实现C++日志库
  • system V 消息队列信息量（了解）
  • 基于MoE架构的AIGC引擎：海螺AI重新定义人机协同新范式
  • 青柠视频云支持808协议和1078协议，支持SIP信令日志追踪
  • C++ queue容器总结
  • Android系统的安全问题 - Linux的能力模型（Capability）和 SELinux 的区别
  • MarkLogic索引详解
  • C++20 中的std::c8rtomb和 std::mbrtoc8
  • LangChain开发（六）多模态输入与自定义输出