一、数组是什么？
数组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.输出结果
