学习目标：
- 掌握数组
学习内容：
- 数组是什么
- 数组的基本使用
- 练习
- 操作数组
数组是什么：
- 数组
Array是一种可以按顺序保存数据的数据类型。 - 场景：如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便。
数组的基本使用：
- 声明语法
let 数组名 = [数据1,数据2，... ，数据n]
<title>数组</title>
</head>
<body>
<script>
// let 数组名 = [数据1,数据2,...,数据n]
// let arr = [10,20,30]
// 1.声明语法 有序
let arr = ['雪碧', '丸子', '妮妮', '星星', '月亮']
// 2.使用数组 数组名[索引号] 从0开始
console.log(arr[0]) // 雪碧
//3.数组长度 = 索引号 + 1
console.log(arr.length) // 5
</script>
</body>
let arr = new Array(数据1,数据2，... ，数据n)
<title>数组的基本使用</title>
</head>
<body>
<script>
//1.字面量声明数组
// let arr = [1,2,3,'pink',true]
//2.使用new Array 构造函数声明 了解
let arr = new Array(1, 2, 3, 4)
console.log(arr)
</script>
</body>
- 数组是按顺序保存，所以每个数据都有自己的编号。
- 计算机中的编号从0开始，所以雪碧的编号为0，丸子的编号为1，以此类推。
- 在数组中，数据的编号也叫索引或下标。
- 数组可以存储任意类型的数据。
- 取值语法
数组名[下标]
let arr = ['雪碧', '丸子', '妮妮', '星星', '月亮']
arr[0] //雪碧
arr[1] //丸子
- 通过下标取数据。
- 取出来是什么类型的，就根据这种类型特点来访问。
- 一些术语
- 元素：数组中保存的每个数据都叫数组元素。
- 下标：数组中数据的编号。
- 长度：数组中数据的个数，通过数组的
length属性获得。
let arr = ['雪碧', '丸子', '妮妮', '星星', '月亮']
console.log(arr[0]) // 雪碧
console.log(arr[1]) //丸子
console.log(arr.length) //5
- 遍历数组（重点）
用循环把数组中每个元素都访问到，一般会用for循环遍历。
for (let i = 0; i < 数组名.length; i++) {
数组名[i]
}
练习：
- 数组求和与平均值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习-数组求和</title>
</head>
<body>
<script>
let arr = [2, 6, 1, 7, 4]
//1.求和的变量 sum
let sum = 0
//2.遍历累加
for (let i = 0; i < arr.length; i++) {
// sum = sum + arr[i]
sum += arr[i]
}
document.write(`所有元素的和是${sum}`)
//3.平均值 sum / arr.length = 4
document.write(`数组的平均值是${sum / arr.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>练习-数组求最大值</title>
</head>
<body>
<script>
let arr = [2, 6, 1, 77, 52, 25, 7]
let max = arr[0]
//遍历数组
for (let i = 1; i < arr.length; i++) {
// 如果max比数组元素里面的值小，我们就要把这个数组元素赋值给max
if (max < arr[i]) {
max = arr[i]
}
}
console.log(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>练习-数组求最小值</title>
</head>
<body>
<script>
let arr = [2, 6, 1, 77, 52, 25, 7]
let min = arr[0]
for (let i = 1; i < arr.length; i++) {
if (min > arr[i]) {
min = arr[i]
}
}
console.log(min)
</script>
</body>
</html>
操作数组：
数组本质是数据集合，操作数据无非就是 增 删 改 查 语法。
- 操作数组-改
<title>操作数组-改</title>
</head>
<body>
<script>
let arr = ['pink', 'red', 'green']
//修改
// arr[0] = 'hotpink'
// console.log(arr)
//给所有的数组元素后面加个老师 修改
for (let i = 0; i < arr.length; i++) {
arr[i] = arr[i] + '老师'
}
console.log(arr)
</script>
</body>
- 操作数组-新增
数组.push()方法将一个或多个元素添加到数组的末尾，并返回改数组的新长度（重点）。
arr.push(元素1,...,元素n)
arr.unshift(新增的内容)方法将一个或多个元素添加到数组的开头，并返回该数组的新长度。
arr.unshift(元素1,...,元素n)
<title>操作数组-新增</title>
</head>
<body>
<script>
let arr = ['pink', 'hotpink']
//1.新增 push 推末尾
// arr.push('deeppink')
// console.log(arr)
//2.开头追加
arr.unshift('red')
console.log(arr)
</script>
</body>
- 练习-数组筛选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习-数组筛选</title>
</head>
<body>
<script>
let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
//1.声明新的空数组
let newArr = []
//2.遍历旧数组
for (let i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
//3.满足条件 追加给新数组
newArr.push(arr[i])
}
}
//4.输出新的数组
console.log(newArr)
</script>
</body>
</html>
- 操作数组-删除
数组.pop()方法从数组中删除最后一个元素，并返回该元素的值。
arr.pop()
数组.shift() 方法从数组中删除第一个元素，并返回该元素的值。
arr.shift()
数组.splice()方法 ，删除指定元素。
arr.splice(start,deleteCount)
arr.splice(起始位置,删除几个元素)
<title>操作数组-删除</title>
</head>
<body>
<script>
let arr = ['red', 'pink', 'blue']
//1.pop() 删除最后一个元素
// arr.pop()
// arr.pop()
// console.log(arr)
//2.shift() 删除第一个元素
// arr.shift()
// console.log()
//3.splice 删除指定元素 splice（起始位置-索引号，删除几个）
arr.slice(1, 1) //从索引号1的位置开始删，只删除1个
// arr.slice(1) //从green 删除到最后
console.log(arr)
</script>
</body>
