1.数组
1.术语
①元素：数组中保存的每个数据都叫数组元素
②下标：数组中数据的编号
③长度：数组中数据的个数，通过数组的length属性获得
2.语法:
let names = ['小明','小红','小刚','小米','小丽'];
console.log(names[0]) //小明
console.log(names[1]) //小红
console.log(names.length) // 5
3.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>06-数组的初体验.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 1 声明数组 (array)
let arr = ['苹果', '西瓜', '雪梨', '哈密瓜', '榴莲'];
// 2 获取 这个数组中的 第0个元素 （只讲的下标 ）
console.log(arr[0]); // '苹果'
// 告诉我 我的数组 里面有几个元素 （数组的长度）
// arr.length 表示 该数组的长度
console.log( arr.length ); // 5
console.log(arr[100]); // 不会有一个正常的结果 （ 如果我们获取的元素的下标超出了 数组的长度 undefined ）
</script>
</body>
</html>
4.遍历数组
1.用循环把数组中每个元素都访问到,一般会用for循环遍历
2.语法:
for (let i = 0; i < 数组名.length ; index++) {
数组名[i]
}
3.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>07-数组的循环.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 定义一个数组
let arr=[10,20,30,40,50];
// 挨个打印数组里面的元素
arr[0]; // 10
arr[1]; // 20
arr[2]; // 30
arr[3]; // 40
arr[4]; // 50
// arr[5]; // undefined
// 通过循环 挨个打印数组里面的元素
for (let index = 0; index < 5 ; index++) {
// index = 1 , 2 ,3 ,4 , 5 arr[5]
// arr[index] 1 没有输出 arr[0] 2 输出 arr[5] undefined
// 综上所述 我们发现 下标 index 的范围只能是 0 - 4
// let index = 0;
// index <= 4 或者 index < 5 因为 数组的长度 arr.length = 5
// index < 5 => index < arr.length
/*
小结：
1 我们使用 数组做for循环的时候
1 let index= 0 ;
2 判断循环的条件 index < 数组的长度
*/
}
</script>
</body>
</html>
2.增 删 改 查
1.增
①数组添加新的数据
②arr.push(新增的内容)
③arr.unshift(新增的内容)
2.删
①删除数组中数据
②arr.pop()
③arr.shift()
④arr.splice(操作的下标,删除的个数)
3.改
①重新赋值
②数组[下标] = 新值
4.查
①查询数组数据
②数组[下标]
③或者我们称为访问数组数据
3.操作数组
1.增加元素
1.push
①将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点)
②语法:(arr.push)
③案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>12-数组-push-增加元素.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 定义一个数组
let arr = ['苹果', '香蕉'];
// 多增加一个元素
arr.push("西瓜");
console.log(arr);
</script>
</body>
</html>
2.arr.unshift(新增的内容)
①法将一个或多个元素添加到数组的开头，并返回该数组的新长度
②语法:(arr.unshift)
③案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>15-数组-unshift-增加元素.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
let arr = ['black', 'red'];
// push 是把新的元素 设置到 数组的末位
// arr.push('yellow');
// unshift 是把新的元素 设置到数组的开头
arr.unshift("yellow");
console.log(arr);
/*
数组添加元素的总结
1 两种元素添加元素的方式
push 末位
unshift 开头添加元素
2 在开发中 push 用得最多 ， unshift 了解即可
3 有没有指定位置来添加元素 ['black', 'red'] 往中间塞元素可以不可以
可以 splice 即可（还没有讲到 ）
*/
</script>
</body>
</html>
2.删除元素
1.pop
①从数组中删除最后一个元素，并返回该元素的值
②语法:(arr.pop)
③案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>18-数组-删除-pop.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 数组 删除最后一个元素 pop
let arr = ['西瓜', '香蕉', '麻瓜'];
// 希望删除掉最后的一个元素 麻瓜 不要
arr.pop();
console.log(arr); // ['西瓜', '香蕉'
</script>
</body>
</html>
2. shift
①法从数组中删除第一个元素，并返回该元素的值
②语法:(arr.shift)
③案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>18-数组-删除-shift.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
let arr = ['西瓜', '香蕉', '麻瓜'];
// 希望删除掉第一个元素
arr.shift();
console.log(arr);
</script>
</body>
</html>
3.splice
1.删除指定元素
2.语法:
arr.splice(start, deletecount)
arr.splice(起始位置,删除几个元素)
3.解释:
1.start 起始位置:
①指定修改的开始位置（从0计数）
2.deleteCount:
①表示要移除的数组元素的个数
②可选。 如果省略则默认从指定的起始位置删除到最后
4.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>20-数组指定元素来删除.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
let arr = ['西瓜', '香蕉', '麻瓜'];
// 现在想要删除 香蕉
// splice("想要删除的元素的下标","想要删除几个");
// 删除数组中的下标为1的元素，
// 从 1 的位置开始 想要删除几个
// arr.splice(1, 2);
//
// console.log(arr);
// 指定位置来插入元素
// splice("想要删除的元素的下标","想要删除几个","在该下标位置添加元素");
// 在 1的位置，删除0个元素，增加一个红薯
// let arr = ['西瓜', '香蕉', '麻瓜'];
// ['西瓜', '红薯', '香蕉', '麻瓜'];
arr.splice(1, 1, '红薯');
console.log(arr);
</script>
</body>
</html>
4.柱形图步骤
1.需求
①打开页面,弹出4个对话框,让我们来输入高度
②写完4个输入框的高度以后,页面中自然出现对应高度的4个柱子
③每个柱子,有特定的样式 和 自己对应的高度
2. 解决
①先写布局
②动态生成 ul和4个li标签
③自己定义一个高度数组,按个给li标签设置-行内样式
④循环获取4次用户的输入,来组成一个高度数组继续使用
3.注意
①根据老师步骤,去理解每一段代码的功能
②顺着老师的思路和笔记,去实现写出来
③做到不看老师的代码,自己敲出来
④在用自己的思路做出来
