JavaScript
一、案例（星星、九九乘法表）---for循环嵌套
1.五行五列---星星
for (i=1;i<=5;i++) {
for (i=1;i<=5;i++) {
docunment.write('星星')
}
}
2.n行m列---星星
let n = +prompt('请输入几行星星')
let m = +prompt('请输入几列星星')
for (i=1;i<=n;i++) {
for (i=1;i<=m;i++) {
document.write('星星')
}
}
3.倒三角---星星
需求分析：
1行数没有改变
2 列数 发生了变化！
要知道 改变列数 代码(5) index1<= 5
1 第一次循环 列数 ：1
2 第二次循环 列数 : 2
3 第三次循环 列数 : 3
4 发现 不能写死成 5 而是 换成一个变量
变量 可以实现 第一次循环 1 第二次循环 2
let let n = +prompt('请输入几行星星')
for (i=1;i<=n;i++) {
for (i=1;i<=i;i++) {
document.write('星星')
}
}
4.九九乘法表
for (n=1;n<=9;ni++) {
for (m=1;m<=n;m++) {
let sum= n*m
document.write(`<span>${m}*${n}=${sum}</span>`)
}
}
二、数组
1.数组(Array)是一种可以按顺序保存数据的数据类型
2.数组的基本使用
（1）目标：能够声明数组并且能够获取里面的数据
（2）语法
//let 数组名 =[数据1，数据2，数据3...数据n]
//例
let names =['小明'，'小刚'，'小红'，'小丽'，'小米']
（3）数组是按顺序保存，所以每个数据都有自己的编号，编号也叫索引或下标，数组可以存储任意类型的数据。计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推。
（4）通过下标取数据
let names =['小明'，'小刚'，'小红'，'小丽'，'小米']
names[0] //小明
names[1] //小刚
names[2] //小红
（5）数组长度length
let names =['小明'，'小刚'，'小红'，'小丽'，'小米']
console.log(names[1]) //小刚
console.log(names[3]) //小丽
console.log(names.length) //5
（6）遍历输出数组里面的元素
①语法
for (let i=0;i<=数组名.length；i++) {
数组名[i]
}
let num=[10,20,30,4,50,60]
for (let i = 0 ;i<num.length;i++) {
document.write(num[i])
}
(7)数组求和及平均值
<script>
// 数组
let arr = [2, 6, 1, 7, 4];
// 存放总的数据
let sum = 0;
// 循环
for (let index = 0; index < arr.length; index++) {
// 使用变量 来存放数组中的每一个数值
sum += arr[index];
// index=0 sum += arr[index] sum += 2;
// index=1 sum += arr[index] sum += 6;
}
console.log(sum); // 和 20
// 平均值 = 和 / 数组的长度
console.log(sum / arr.length);
</script>
（8）数组最大值和最小值
需求：求数组 [2,6,1,77,52,25,7] 中的最大值 分析： ①：声明一个保存最大元素的变量 max。 ②：默认最大值可以取数组中的第一个元素。 ③：遍历这个数组，把里面每个数组元素和 max 相比较。 ④：如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较。 ⑤：最后输出这个 max
<script>
let arr = [2, 6, 1, 77, 52, 25, 7];
let max = arr[0];
let min = arr[0];
// for循环
for (let i = 0; i < arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
// 如果 arr[i] 比 我的min 要小 那 min 等于你arr[i]
if (arr[i] < min) {
min = arr[i];
}
}
console.log(max);
console.log(min);
</script>
3.操作数组
（1）数组本质是数据集合, 操作数据无非就是 增 删 改 查 语法：
①查：数组[下标]
②改：数组[下标] = 新值
③增：arr.push（最后）、arr.unshift（第一）
④删：arr.pop（最后）、arr.shift（第一）、arr.splice
（2）数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点)
①语法
<script>
// 定义一个数组
let arr = ['苹果', '香蕉'];
// 多增加一个元素
arr.push("西瓜");
console.log(arr);//'苹果', '香蕉','西瓜'
</script>
<script>
// 接收用户的4个输入 输入同学的名字，组成一个数组
let arr = [];
// 用户的输入来实现
for (let index = 1; index <= 4; index++) {
// 用户的输入
let userName = prompt('请输入你同学的名字');
// 把userName 设置到数组中
arr.push(userName);
}
console.log(arr);
</script>
②push过滤
<script>
// 把数组中 大于等于10元素 存放到新的数组
let arr1 = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
// 存放过滤好元素的数组
let arr2 = [];
// 对 第一个数组 循环
for (let index = 0; index < arr1.length; index++) {
// 判断当前的循环的元素 和 10 直接的关系
if (arr1[index] >= 10) {
// 需要把当前的这个元素 添加到新数组中
arr2.push(arr1[index]);
}
}
console.log(arr2);
</script>
（3）数组.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
①语法
arr.unshift(元素1，元素2....元素n)
let arr = ['red','green']
arr.unshift('pink')
console.log(arr)
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>
（4）push和unshift总结
<script>
/*
1 push 和 unshift 都可以做到 给数组添加新元素
2 这两个代码在执行的时候 还可以返回 数组的长度 (了解)
*/
let arr = ['苹果', '西瓜'];
// 添加新元素 == 返回 添加完新元素之后的数组长度
let arrLength = arr.unshift('哈密瓜'); // arrLength = 数组的长度 = 3
console.log(arrLength);
console.log(arr.length);
</script>
（5）案例---获取不等于0数组元素
<script>
/*
获取到一个新的数组 新的数组 大于等于10
获取到一个新的数组 新的数组 不需要带上0
*/
let arr = [1, 3, 4, 5, 3, 2, 4, 0, 0, 3, 22, 98];
let newArr = [];
for (let index = 0; index < arr.length; index++) {
// 满足条件的就要
// 1 满足 元素大于等于10的就要
// if (arr[index] > 10) {
// 新的数组 不需要带上0
if (arr[index] !== 0) {
newArr.push(arr[index]);
}
}
console.log(newArr);
</script>
（6）数组. pop() 方法从数组中删除最后一个元素，并返回该元素的值
①语法
arr.pop()
let arr=['red','green']
arr.pop()
console.log(arr)
<script>
// 数组 删除最后一个元素 pop
let arr = ['西瓜', '香蕉', '麻瓜'];
// 希望删除掉最后的一个元素 麻瓜 不要
arr.pop();
console.log(arr); // ['西瓜', '香蕉'
</script>
（7）数组. shift() 方法从数组中删除第一个元素，并返回该元素的值
①语法
arr.shift()
let arr = ['red','green']
arr.shift()
console.log(arr)
<script>
// 数组 删除最后一个元素 pop
let arr = ['西瓜', '香蕉', '麻瓜'];
// 希望删除掉第一个元素
arr.shift();
console.log(arr);//
</script>
（8）数组. splice() 方法 删除指定元素
arr.splice(start,deleteCount)
arr.splice(起始位置,删除及格元素)
<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>
（9）数组总结
<script>
// 指定哪个删除 可以 只是还没有讲到 splice
// 假如是删除了最后一个后，length的长度会从3个变成2吗？ 会
// 这种删除 和直接删了代码有什么区别
// 数组是我们自己手写的 自己手动删除 不就可以了吗 ！！
// shift和pop 在执行删除的时候 会返回被删除的元素 （理解成从一个鸡蛋篮子里面取鸡蛋）
// 1 篮子里面的鸡蛋个数减少
// 2 获取到那个取出来对应的鸡蛋
// 有默契， 我讲解知识，先讲解最基本使用 大家基本使用都没有问题，
// 愿意补充和拓展
// 这个数组 是动态生成的
// let arr = [];
// for (let index = 0; index < 4; index++) {
// arr.push(prompt('请输入你的分数'));
// }
// // 去掉第一0个分数
// arr.shift();
// // 去掉最后一个分数
// arr.pop();
// console.log(arr);
/*
4种方式 操作数组
2种增加
push 末位 增加
unshift 开头 增加
2种删除
pop 末位删除
shift 开头删除
*/
let arr = ['西瓜', '香蕉', '麻瓜'];
// let first = arr.shift(); // first = 西瓜 arr = 香蕉 麻瓜
// console.log(first);
// console.log(arr);
let last = arr.pop();
// last = 麻瓜
// arr = 西瓜 香蕉
console.log(last);
console.log(arr);
</script>
4.案例---动态生成柱状图
需求分析：（用文字 把看见的需求 描述下来）
1 一打开页面 弹出了4个 输入框
2 用户在每一个输入框 填写数字
3 最后一个输入框填写完毕了 页面上出现 4个div
4 4个div的样式部分
1 一行放4个元素
2 每一个元素颜色相同 高度不同
5 操作
1 第4个步骤 我最熟悉了 写布局 css
（1）动态生成柱状图---静态结构
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
width: 1000px;
height: 600px;
margin: 100px auto;
display: flex;
justify-content: space-around;
background-color: aqua;
/* 设置侧轴的对齐方式 下对齐 */
align-items: flex-end;
}
li {
width: 100px;
background-color: pink;
position: relative;
}
span {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
}
div {
position: absolute;
width: 100%;
text-align: center;
/* 相对于父元素的高 */
top: 100%;
background-color: red;
}
li:nth-child(1) {
height: 100px;
}
li:nth-child(2) {
height: 200px;
}
li:nth-child(3) {
height: 300px;
}
li:nth-child(4) {
height: 400px;
}
</style>
</head>
<body>
<ul>
<li>
<span>1</span>
<div>第1季度</div>
</li>
<li> <span>2</span> <div>第2季度</div> </li>
<li>
<span>3</span>
<div>第3季度</div>
</li>
<li>
<span>4</span>
<div>第4季度</div>
</li>
</ul>
（2）动态生成柱状图---循环生成4个
<script>
/*
需求分析：（用文字 把看见的需求 描述下来）
1 一打开页面 弹出了4个 输入框
2 用户在每一个输入框 填写数字-控制的是每一个li标签的高度
3 最后一个输入框填写完毕了 页面上出现 4个div
4 4个div的样式部分
1 一行放4个元素
2 每一个元素颜色相同 高度不同
5 操作
1 第4个步骤 我最熟悉了 写布局 css 已经完成了！！
2 先实现 for循环生成4个柱子li(类似之前写过的一个 动态生成table表格)（每一个柱子的高不一样 先不管）
*/
// 用来存放4个li标签的 字符串 原来 ul 不需要 循环 只是 li标签要循环
let liHtml = `<ul>`;
for (let index = 1; index <= 3; index++) {
liHtml += `<li> <span>${index}</span> <div>第${index}季度</div> </li>`;
}
liHtml += `</ul>`;
// liHTML = `<ul></ul>`
// 把4个li标签 写到页面上
document.write(liHtml);
</script>
（3）动态生成柱状图---生成li标签
<script>
/*
重复就是最好帮我理解代码的 解决方法
能不能由用户的的输入来决定 生成几个li标签
*/
let num = +prompt('请输入你想要生成的li标签的个数');
let liHtml = `<ul>`;
for (let index = 1; index <= num; index++) {
liHtml += `<li>${index}</li>`;
}
liHtml += `</ul>`;
document.write(liHtml);
</script>
（4）动态生成柱状图---获取用户输入的高度
<script>
/*
需求分析：（用文字 把看见的需求 描述下来）
1 一打开页面 弹出了4个 输入框
2 用户在每一个输入框 填写数字-控制的是每一个li标签的高度
3 最后一个输入框填写完毕了 页面上出现 4个div
4 4个div的样式部分
1 一行放4个元素
2 每一个元素颜色相同 高度不同
5 操作
1 第4个步骤 我最熟悉了 写布局 css 已经完成了！！
2 先实现 for循环生成4个柱子li(类似之前写过的一个 动态生成table表格)（每一个柱子的高不一样 先不管）
3 动态获取用户输入的高度
4 还需把这些高度按个设置到 对应的li标签中
先实现4功能 写css 3个方式 （内部、外部样式、行内）
*/
// 用来存放4个li标签的 字符串 原来 ul 不需要 循环 只是 li标签要循环
let liHtml = `<ul>`;
// 4个li标签的高度
let liHeight = [100, 150, 200, 250];
// 数组是4个 长度就是4 0-3 4个元素
for (let index = 0; index < 4; index++) {
// liHeight[0] = 100
// liHeight[1] = 150
// liHeight[2] = 200
// liHeight[3] = 250
// let h = liHeight[index];
// liHtml += `<li style="height:50px;"> <span>${index}</span> <div>第${index}季度</div> </li>`;
// liHtml += `<li style="height:${50}px;"> <span>${index}</span> <div>第${index}季度</div> </li>`;
// liHtml += `<li style="height:${h}px;"> <span>${index}</span> <div>第${index}季度</div> </li>`;
liHtml += `<li style="height:${liHeight[index]}px;"> <span>${index}</span> <div>第${index}季度</div> </li>`;
}
liHtml += `</ul>`;
// liHTML = `<ul></ul>`
// 把4个li标签 写到页面上
document.write(liHtml);
（5）动态生成柱状图---完成
<script>
/*
动态获取用户输入的高度 ，然后把高度都设置到一个数组即可
1 弹出4个窗口，让用户输入数据
*/
let liHtml = `<ul>`;
let liHeight = [];
// for循环来弹出4个窗口 获取内容
for (let index = 0; index < 4; index++) {
// 弹窗获取用户的输入的高度
let height = +prompt(`请输入你想要的第${index + 1}个高度数据`);
// 把数据 添加到数组中
liHeight.push(height);
}
for (let index = 0; index < 4; index++) {
liHtml += `
<li style="height:${liHeight[index]}px;">
<span>${liHeight[index]}</span>
<div>第${index + 1}季度</div>
</li>`;
}
liHtml += `</ul>`;
document.write(liHtml);
</script>
5.数组补充
<script>
/*
1 获取数组的最后一个元素 arr[arr.length - 1] 常用的规则！！
2 新增或者修改数组元素
arr[10]='南瓜'
1 如果 10这个位置已经有元素 那么 就是修改
2 如果 10这个位置没有元素 添加就可以了 最终数组的度变成 10+1
3 数组 可以存放任意类型的数据 可以这么做，但是不建议 我们建议 一个数组内的数据类型要统一！！
let arr = ['西瓜', 100, null, true, NaN, undefined, 80];
4 数组快速清空或者删除元素的方式
arr.length = 0
*/
// let arr = ['西瓜', '香蕉', '麻瓜','香瓜','苦瓜','傻瓜'];
// // let arr = ['西瓜', '香蕉', '麻瓜'];
// // 获取数组中最后的一个元素
// // arr.length - 1
// console.log(arr[arr.length - 1]);
// let arr = ['西瓜', '香蕉', '麻瓜'];
// 想要把香蕉修改成葡萄
// arr[1] = '葡萄'; // 修改
// console.log( arr[3] );// 输出什么 undefined
// 添加元素
// arr[3] = '南瓜';
// console.log(arr);
// arr[10] = '南瓜';
// console.log(arr[8]);
// 存放其他类型 数据
// let arr = ['西瓜', 100, null, true, NaN, undefined, 80];
let arr = ["西瓜", 100, null, true, NaN, undefined, 80];
// 把数组 清空掉！！ 不想要里面的元素了！！
// arr = [];
// 保留 3个元素 其他不要了
// arr.length = 3;
arr.length = 0;
console.log(arr);
</script>
