JS基础 总结 --- 三
for循环嵌套
循环嵌套的执行逻辑
在for循环内嵌套一个for循环，可以形成像10 * 10表格这样的结构。
let str = '<table border="1" rules="all" width="700" height="500">';
for(let j=1; j<=10;j++){
str += '<tr>';
for(let i=1;i<=10;i++){
str += '<td></td>'
}
str += '</tr>';
}
str += '</table>';
document.write(str)
它的执行逻辑：
变量j执行一次，内部变量i就会执行一周，完整的从1-10执行十次，输出十个<td></td>然后再重复一遍j，周而复始，从而实现10*10的表格
tips ！！
可以在控制台内查看循环，或者其他逻辑代码的运行顺序，只需要在代码页中添加debugger代码
此方法可协助在写代码的时候清楚的看到代码具体运行的逻辑。
嵌套循环---九九乘法表
let str = '<table border="1" rules="all" width="700" height="500">'
for(let row=1; row<10 ;row++){
str += '<tr>';
for(let col=1; col<=row;col++){
str +=`<td>${col}*${row}=${col*row}</td>`
}
str += '</tr>';
}
str +='</table>'
document.write(str)
子循环的变量col<=row就可以输出如图这样的梯形效果。
逻辑运算符---逻辑断路
逻辑短路
- 什么是逻辑短路呢？
- 本质上是JS设计者设计的逻辑
&&``||的一种规则。
let a = 10;
let ret = false && ++a;
console.log(a);
- 定义一个变量
a并赋值为10，再定义一个变量ret并赋值如上式子，然后打印变量a，会发现，变量a依旧是10，++a并没有被计算到，没有执行。 - 这是因为在逻辑与执行中，因为第一个是
false，所以触发了断路，后面直接不执行了。 - 所以在逻辑非中，第一个是不成立的，后面直接忽略。
口诀：找假
在逻辑或中找真就行了，前面是真的话，后面就不用看了。逻辑类似。
let b = 10;
let ret1 = true || ++b;
console.log(b);
经典的断路现象。
口诀：找真
tips!
赋值的时候才有短路运算，否则不用考虑短路~!!!
逻辑运算符的值
比较运算符的结果是布尔值（true、false）
那么逻辑运算符的结果是什么呢？
Number跟string在逻辑运算符中的结果为布尔值，其中除了
0``null``undefined``NaN``空[""]这几种外，都是true
let ret = 10 || 20; // Boolean(10) true
console.log(ret); // 10
let ret1 = 10 && 20; // Boolean(10) true &&
console.log(ret1); // 20
console.log('猫' || '狗'); // 猫
console.log('猫' && '狗'); // 狗
案例如上~
数组
数组的定义
数组是一组数据有序的集合
let arr = [1, 1,1,1,1,1,1,16,6,1,9,9,49,4,]
[]中括号内的数据即为数组。
数组三要素：
- 元素：数组中的每一个数据就是一个元素，元素可以是任何类型。
- 下标：下标就是元素的序号，编号从0开始。
- 长度：数组中的元素的个数就是长度 用 数组.length表达。
数组头尾元素的添加与删除
首先定义一个数组
0 1 2
let arr = [10, 20, 30];
通过下标来添加元素
arr[3]=40;
arr[10]=60;
可以添加，可以覆盖原有的元素。中括号内的数字即代表在数组中的位置，从0开始。
- 添加：
- 数组.push（数据）代表按顺序追加元素进数组内
- 数组.unshith（数据）代表在数组的头部添加元素
arr.push(40)
arr.unshift(5)
- 删除：
- 数组.pop（数据） 代表删除尾部的元素
- 数组.shift（数据） 代表删除头部的元素
arr1.pop();
arr1.shift();
数组中间元素的删除与添加
首先定义一个数组
let arr = [10, 20, 30, 40, 50,60, 70,80,90,100,110];
数组名.splice（起始下标，删除个数，新元素，新元素，...） 从起始下标开始，删除指定个数的元素，还可以在被删除的位置插入新的元素。
arr.splice(1,2);
arr.splice(1);
arr.splice(1,2,'a','b','c','d');
arr.splice(1,0,'a','b','c','d');
console.log(arr);
总结：
-
尾部： .push(e1,e2) .pop()
-
头部： .unshift(e1) .shift()
-
中间： .splice(start,num,e1,e2...)
数组的遍历
遍历的意思：由于某个需求，需在对数组中的每个元素都要访问一次。 首先，定义一个数组。
let arr = ['zhangsan', 'lisi', 'wagnwu', 'zhaoliu', 'qianqi', 20, 30,50,100,200,30,40];
使用for循环的控制变量来模拟数组的下标
for(let i=0;i < arr.length ;i++){
// console.log(i);
// 将循环控制变量作为数组的下标
console.log(arr[i]);
}
用 arr.length来表示数组的长度，此数值是从1开始的，而数值计算值是从0开始的，所以表示i<arr.length即可！
数组元素求和
首先，定义一个数组
let arr = [98, 87, 92, 80, 91, 100];
for(let i=0; i< arr.length; i++){
sum += arr[i];
}
console.log(sum);
即可通过for循环完成数组的求和
数组元素的筛选
需求~将数组中大于10的元素筛选出来，保存到一个新的数组中。 首先，定义一个数组：
let arr = [5, 12, 8, 11, 9, 15, 20];
let nArr = [];
for(let i=0; i< arr.length;i++){
if(arr[i] > 10){
nArr.push(arr[i])
}
}
console.log(nArr);
如上，即可达成筛选的目的。
查找元素的下标
需求~想要查找一个数据在这个数组当中的位置的时候，可以使用此方法。 首先，定义一个数组：
let arr = ['zhangsan', 'lisi', 'wangwu', 'zhaoliu', 'qianqi','wangwu']
// 查找 wangwu 的下标
let target = 'wangwu'
for(let i=0;i<arr.length;i++){
if(arr[i] == target){
console.log(`与${target}相同的元素的下标是${i}`);
}
}
如上，即可达成查找某个下标的目的。
！！数组的崩塌
需求~将数组中的0元素删除掉。 首先，定义一个数组：
let arr = [5, 12,0, 8, 11,0, 0, 0, 9, 0, 15, 20,];
for(let i=arr.length-1;i>=0;i--){
if(arr[i] == 0){
arr.splice(i,1)
}
}
console.log(arr);
一般的方法会引起数组的崩塌，即为在顺序删除一个元素的时候，后面的元素会自动进一位，导致漏查一个元素。可以使用上述方法，返顺序查删除。也可以用正顺序，在for代码块内添加i--即可，在每次都多查一遍。
循环结构----while循环
while循环语法及逻辑
首先来看for循环的语法
for（变量初始化；表达式；变量修改）｛
//循环体
｝
再来看看while循环语法
while（表达式）｛
循环体
｝
while循环的执行逻辑：
- 先判断表达式是否成立，如果不成立就直接跳过while结构，继续后面的代码执行。
- 如果成立就执行循环体，循环体执行结束后再来判断表达式是否成立。
- 依此规律循环往复的执行，直到表达不成立（或提前退出）
tips！
while循环就是for循环的一个变形！
let i=1;
while(i<=10){
console.log(i);
i++;
}
break与continue
break与continue是用于在循环内，控制循环的。
break直接结束循环
for(let i=1;i<10;i++){
//....
if(i% 3==0){
break;
console.log('hello');
}
//..
console.log(i);
}
....后续代码
....后续代码
....后续代码
continue结束本次循环里continue后面的代码，继续下一次循环
for(let i=1;i<10;i++){
//....
if(i% 3==0){
continue;
console.log('hello');
}
//..
console.log(i);
}
....后续代码
....后续代码
....后续代码
小结：
break 直接跳出循环结构
continue 跳出本次村换，继续下一次循环。
break与continue必须放在循环里
while与for循环的区别
- for循环是根据次数循环，循环次数已知。
- while循环是根据条件进行循环，循环次数未知。
案例：需求~接收用户输入的n个数，如果想结束输入，输入一个大于10000的数。 使用while解决循环次数未知的代码套路，
while(true){
// .........
// .........
// .........
if(退出条件){
break;
}
// .........
// .........
}
while(true){
let data = prompt('请输入数，如果想退出输入大于10000')
console.log(data);
if(data>10000){
break;
}
}
上述案例可实现需求效果~
综合案例分享
简单模拟ATM交互界面
let msg = `欢迎使用本系统：
1. 存
2. 取
3. 查
0. 退`;
// 定义一个变量用于存储金额
let money = 0;
while (true) {
let op = +prompt(msg);
if (op == 0) {
break;
}
switch (op) {
case 1:
// 弹出窗口让用户输入所存金额
let cun = +prompt("请输入所存的金额");
money += cun;
break;
case 2:
let qu = +prompt("请输入所取的金额");
if (qu > money) {
alert("取出金额大于实际拥有额度，请重新输入，谢谢！");
break;
} else {
money -= qu;
}
break;
case 3:
alert(money);
}
}
在 case2 中可实现避免负值。
统计数组中大于10的元素有几个
let arr = [4, 11, 9, 18, 20, 6, 14, 5];
let a = 0;
for (let i = 0; i < arr.length; i++) {
if (arr[i] > 10) {
a++;
}
}
console.log(a);
有一个数组只有两个元素，如果第1个元素比第2个元素大，交换两个元素的位置。
let a = +prompt('请输入第一个数')
let b = +prompt('请输入第二个数')
let arr1 = [a, b];
if (arr1[0] > arr1[1]) {
let a = arr1[0];
arr1[0] = arr1[1];
arr1[1] = a;
}
console.log(arr1);
页面输出如下形状
*
**
***
****
for (let i = 0; i < 5; i++) {
for (let a = 0; a < i; a++) {
document.write(`*`);
}
document.write("<br/>");
}
document.write("<br/>");
边学习边总结-------------加油，你我共勉。
