数组
数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素，数组是一种将一组数据存储在单个变量下的优雅方式。
//普通变量一次只能存储一个值
let num = 10;
//数组一次可以存储多个值
let arr = [1, 2, 3, 4];
数组的创建方式
Js中穿件数组有两种方式
-
利用new创建数组
-
利用数组字面量创建数组
利用new创建数组
//1.数组（Array）：就是一组数据的集合 存储在单个变量下的优雅方式
//2.利用new创建数组
let arr = new Array(); //创建了一个空数组
let 数组名= new Array();
let arr1 = new Array(3, 6, 4)
console.log(arr1);
注意Array()，A要大写
利用数组字面量创建数组
//利用数组字面量创建数组[]
let arr = []; //创建了一个空的数组
let arr1 = [1, 2, 'pink', 4];
//我们数组里面的数据一定用逗号分隔
//数组里面的数据，比如1,2，我们称为数组元素。
-
数组的字面量是方括号[]；
-
声明数组并赋值称为数组的初始化
-
这种字面量方式也是我们以后最多使用的方式
数组元素的类型
数组中可以存放任意类型的数据，例如字符串，数字，布尔值。
let arr =[12, true, 'pink', 4];
数组的基本使用
（1）声明数组：
let num = [3, 6, 7, 8, 9];
-
数组是按顺序保存，所以每个数据都有自己的编号
-
计算机中的编号从0开始，所以3的编号为0，6编号为1，以此类推
-
在数组中，数据的编号也叫索引或下标
-
数组可以存储任意类型的数据
（2）获取数据：
let num = [3, 6, 7, 8, 9];
//数组名[下标]
console.log(arr[2]);// 7
console.log(arr.length);// 数组长度（即个数） 3
-
元素：数组中保存的每个数据都叫数组元素
-
下标：数组中数据的编号
-
长度：数组中数据的个数，通过数组的length属性获得
遍历数组
用循环把数组中每个元素都访问到,一般会用for循环遍历
let arr = [];
arr.length = prompt('请输入你喜欢的人数');
for (let i = 0; i < arr.length; i++) {
arr[i] = prompt('请输入名字');
console.log(arr[i]);
}
数组求和案例
需求：求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值
分析：
①：声明一个求和变量 sum。
②：遍历这个数组，把里面每个数组元素加到 sum 里面。
③：用求和变量 sum 除以数组的长度就可以得到数组的平均值。
let arr = [2,6,1,7, 4];
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
console.log(sum);
数组求最大值案例
需求：求数组 [2,6,1,77,52,25,7] 中的最大值
分析：
①：声明一个保存最大元素的变量 max。
②：默认最大值可以取数组中的第一个元素。
③：遍历这个数组，把里面每个数组元素和 max 相比较。
④：如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较。
⑤：最后输出这个 max
let arr = [2,6,1,77,52,25,7],
//数组的第一个元素
max = arr[0];
//遍历数组
for (let i = 0; i < arr.length; i++) {
// 最大值：<
// 求最小值：>
if (max < arr[i]) {
max = arr[i]
}
}
console.log(max);
操作数组
数组本质是数据集合, 操作数据无非就是 增 删 改 查
增加新的数据
数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点)
let num = [45, 66, 44, 11, 33]
console.log(num.push(44)); // 6
//此时数组 num=[45, 66, 44, 11, 33, 44]
console.log(num.push(22, 66));// 8 增加多个元素，用 “,” 隔开。
//此时数组 num=[45, 66, 44, 11, 33, 44, 22, 66]
arr.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
let num = [45, 66, 44, 11, 33];
console.log(num.unshift(22)); // 6
//此时数组 num=[22,45, 66, 44, 11, 33]
console.log(num.unshift(30, 66));// 8 增加多个元素，用 “,” 隔开。
//此时数组 num=[30, 66, 22, 45, 66, 44, 11, 33]
数组筛选案例
需求：将数组 [1, 2, 5, 50, 70, 8, 9, 11, 30] 中大于等于 10 的元素选出来，放入新数组
分析：
①：声明一个新的数组用于存放新数据num1
②：遍历原来的旧数组， 找出大于等于 10 的元素
③：依次追加给新数组 num1
let num2 = [1, 2, 5, 50, 70, 8, 9, 11, 30];
let num1 = [];
for (let i = 0; i < num2.length; i++) {
if (num2[i] > 10) {
num1.push(num2[i])
}
}
console.log(num1);
数组删除元素
数组. pop() 方法从数组中删除最后一个元素，并返回该元素的值
let num = [45, 66, 44, 11, 33]
console.log(num.pop()); // 33
//此时数组 num=[45, 66, 44, 11]
数组. shift() 方法从数组中删除第一个元素，并返回该元素的值
let num = [45, 66, 44, 11, 33]
console.log(num.shift()); // 45
//此时数组 num=[66, 44, 11,33]
数组. splice() 方法 删除指定元素
num.splice(start, deleteCount,increase)
-
start 起始位置:
指定修改的开始位置（从0计数）
-
deleteCount:
表示要移除的数组元素的个数可选的。 如果省略则默认从指定的起始位置删除
到最后。
-
increase:
表示要增加的数组元素的个数可选的。 如果省略则默认从指定的起始位置增加
到最后。
let num = [3, 6, 7, 8, 9];
// 先寻找 num 数组下标 1 的位置，接着删除 num[1] 的 6 ，最后再增加 num[1] 的 66
num.splice(1, 1, 66)
console.log(num);
冒泡排序案例
let num = [2, 3, 1, 4, 5];
let num2;
//一共比较了 num.length-1 趟
for (let i = 0; i <= num.length-1; i++) {
//一趟比较了 num.length - i - 1次
for (let j = 0; j <= num.length - i - 1; j++) {
//判断大小
if (num[j] < num[j + 1]) {
// 交换位置，需要三个值，其中一个值为 0 或 undefined 。
num2 = num[j + 1];
num[j + 1] = num[j];
num[j] = num2;
}
}
}
console.log(num);
柱状图案例
需求：
-
打开页面 弹出4个对话框，让我们来输入高度
-
写完4个输入款的高度之后，页面中自然出现对应高度的 4 个珠子
-
每一个柱子，有特定的样式和自己对应的高度
解决：
- 先写布局
- 动态生成 ul 和4个 li 标签
- 自己定义一个高度数组，按个给 li 标签设置 行内样式
- 循环输入来获取 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>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
margin: 100px auto;
width: 500px;
height: 300px;
list-style: none;
border: 1px solid pink;
display: flex;
align-items: flex-end;
justify-content: space-around;
}
li {
width: 50px;
height: 100px;
background-color: rgb(245, 191, 245);
position: relative;
}
li span {
position: absolute;
left: 50%;
top: -20px;
transform: translateX(-50%);
}
div {
position: absolute;
width: 70px;
bottom: -40px;
text-align: center;
}
</style>
</head>
<body>
<script>
let lihtml = `<ul>`;
let liheight = [];
for (let j = 0; j < 4; j++) {
let height = +prompt('请输入值');
liheight.push(height)
}
for (let i = 0; i < 4; i++) {
let h = liheight[i];
lihtml += `<li style="height:${h}px;"><span>${h}</span> <div>第${i+1}季度</div></li>`
}
lihtml += `</ul>`;
document.write(lihtml)
</script>
</body>
</html>
补充
-
获取数组最后一个元素:
arr[arr.length-1]
-
新增或者修改元素:
arr[10]
-
数组快速删除元素的方式
（1）arr.length=0 （2）arr=[]
