javaScript 03 数组详解（数组声明/基础操作）
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
🥳博 主：初映CY的前说(前端领域)
🌞个人信条：想要变成得到，中间还有做到！
🤘本文核心：数组概念、数组的声明与调用、数组的基本使用
目录
前言
一、数组是什么？
1.数组的声明
2.数组的调用
二.js数组中常见的操作
1.数组的增删改查
2.数组的应用
一、数组是什么？
数组Array是一种可以按照顺序保存数据的数据类型,可存放多种不同类型的数据
1.数组的声明
1.1let 数组名 = [ 数据1,数据2 ....] （new 可以省略）
let arr = new Array('初映',182,66,'abc','前端学习')注意点：
- 数组的声明内部数据使用 ，隔开
- 数据可以存放多种不同的数据（推荐存放相同类型的的元素）
2.数组的调用
<!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>
</head>
<body>
<script>
let arr =['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
alert( arr[0])
alert( arr[arr.length-1])
</script>
</body>
</html>注意点：
- 数组中取值的写法为： 数组名[下标]
- 数组的下标是从0开始加1开始递增的
- 数组的长度为 数组名.length
- 快速获取最后一个元素，拿上面例子说明为 arr[arr.length-1])
二.js数组中常见的操作
1.数组的增删改查
1.增操作
- 先定义一个数组
let names = ['科比', '库里', '詹姆斯', '欧文', '艾弗森']- 在尾部添加数据用push()方法
- 在头部添加数据用unshift()方法
- names[下标] = '新元素' （有下标对应的位置就是修改，没就是在尾部添加）
下面是给没有下标位置设置就是增加的效果，中间多的以empty空显示
- 拓展 splice()方法用于新增
2.删操作
- 从尾部删除元素 pop()方法
- 头部删除元素 shift()方法
定点删除 splice()方法
3.改操作 直接数组名[下标 ] = '修改的数据'
4.查操作 直接调用方法名/调用数组名[下标]
- 增删改查的源文件如下，大家请自行获取实验喔~
<!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>
</head>
<body>
<script>
// 修改 查询
let names = ['科比', '库里', '詹姆斯', '欧文', '艾弗森']
// document.write(names[2] = `乔丹<br>`)
//在尾部 新增push( ),可添加多个
names.push('林书豪', '易建联')
// 在头部新增unshift( ),可添加多个
names.unshift('汤普森', '拉塞尔')
names[0] = '乔丹'
names[10] = 'ikun'
// 删除尾pop()
// 从数组中删除最后一个元素 括号内不可添元素
names.pop()
// console.log(names);
//删除头部shift()
names.shift()
// document.write(names)
// 定点删除 splice(),如果没写结束位置则从该位置删除到结尾
// splice(开始位置，结束位置)
names.splice(3,1)
// 拓展:spice(起始位置(最后下标+1),删除个数.新增的元素)
names.splice(10,0,'新增的元素')
names[2] =' 乔丹'
document.write(`${names}<br>`)
document.write(names[2])
</script>
</body>
</html>2.数组的应用
1.遍历数组
<!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>
</head>
<body>
<script>
// 注意点：元素下标从0开始
let arr = [18, 19, 20, 15, 17, 39]
for (let i = 0; i < arr.length; i++) {
// 用模板字符串拼接字符串与变量
document.write(`${arr[i]+' '}`)
}
</script>
</body>
</html>1输出结果
2.数组求和
<!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>
</head>
<body>
<script>
// 注意点：从0开始
let sum = 0
let arr = [2, 6, 1, 7, 4]
for (let i = 0; i < arr.length; i++) {
// i是索引，不是数组的数，数组的数字需要数组名[]包起来
sum += arr[i];
}
// 执行从上往下执行，所以如果 avg写上面的话会执行报错，因为到那一步的时候arr还没有被定义。js不知道它是数组
let avg = sum / arr.length
document.write(`该数组的和为${sum}<br>`)
document.write(`该数组的平均数为${avg}`)
</script>
</body>
</html>2.输出结果
3.数组求极值
<!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>
</head>
<body>
<script>
arr = [2, 6, 1, 7, 4]
let tempMin =arr[0]
let tempMax =arr[0]
for (let i = 1; i < arr.length; i++) {
if(tempMin >arr[i]){
tempMin = arr[i]
}
if(tempMax <arr[i]){
tempMax = arr[i]
}
}
document.write(`数组的最小值为${tempMin}`);
document.write(`<br>数组的最大值为${tempMax}`);
</script>
</body>
</html>3.输出结果
用函数的方式写法
4.数组筛选没有0的数组
<!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>
</head>
<body>
<script>
let arr = [88, 0, 45, 9, 0,0, 66]
let count = 0
for (let i = 0; i < arr.length; i++) {
if (arr[i] === 0) {
arr.splice(i, 1)
// 当数组定点删除元素的时候,数组的下标位置也往前面移动了,产生了跳过的效果.因此需要将i的值减去1,将后移的数往前减去一位
i--;
count++;
}
}
console.log(arr);
console.log(count);
</script>
</body>
</html>4.输出结果
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |