【JavaScript】金丹期功法——数组

05112

目录

数组

数组（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

原文链接：【JavaScript】金丹期功法——数组

© 版权声明
文章版权声明 1、本网站名称：拾光赋
2、本站永久网址：https://www.blogs.ink
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ：805375623进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END
Java（ZH）
# python
喜欢就支持一下吧
点赞12 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容

旧时代博客
Lee的头像-拾光赋
今日剩余 100%
本周剩余 100%
本月剩余 100%
本年剩余 100%
最近评论
Qthree3的头像-拾光赋

Qthree36个月前0

表情[baoquan]-拾光赋
Alex的头像-拾光赋

Alex6个月前0

给力啊！ 老铁
Jason.Meng的头像-拾光赋钻石会员

Jason.Meng徽章-人气大使-拾光赋6个月前2

已重新上传
Alex的头像-拾光赋

Alex6个月前0

可惜文件不存在了
Alex的头像-拾光赋

Alex6个月前0

很好很好
每日一言