代码调试介绍 数组 循环结构

数组 循环结构"/>

代码调试介绍 数组 循环结构

01-代码调试介绍

• 本小节主要介绍
• 1.程序出错的原因
• 2.代码调试好处
• 之前我们的调试方式主要通过打印变量的值来查看代码是否出现问题，这是js中最简单基本的调试
  • alert();
  • console.log();
• 断点调试：断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下
• 1.断点调试是一种非常经典的调试方法，在其他编程语言中也经常使用这种调试方法，只不过不同的语言使用的工具不同而已
  • 前端开发中的js代码主要使用谷歌浏览器的开发者工具进行断点调试
• 2.代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试，知识点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远都学不会。
• 3.今天学的代码调试非常的简单，只要求同学们记住代码调试的这几个按钮的作用即可，后面还会学到很多的代码调试技巧。
• 使用步骤
• 1.浏览器中按F12进入开发者控制台
• 2.选择sources找到要调试的文件

```typescript<script>//1.程序报错：浏览器停止工作，后面的代码都不会执行//程序报错在js中主要有两个原因//1.1  语法错误//let let = 10;//报错：变量命名不符合规则//consol.log('111');//报错：关键字单词拼写错误//1.2  数据类型错误//console.log ( abc );//abc既不是变量，也不是直接量（符合数据类型的数据）//2.程序bug：程序能够正常运行，但是产生的结果达不到预期的要求//产生原因：代码不熟悉，粗心大意，逻辑不严谨//需求：弹出一个确认框//prompt();//写成了弹出一个输入框//3.代码调试：  打断点//F12 - source -  可以选择某一句话前面打上断点/*好处：（1）可以逐行的检查代码执行的顺序（2）可以随时查看一个变量的值，有利于分析代码（鼠标放到变量上自动显示）*/let num = 10;num++;num++;if(num++ >= num++){console.log ( "你猜我执不执行？" );}console.log ( num );</script>

03-数组(语法学习)

数组作用：一个变量存储多个数据

1.1-数组介绍

• 1.数组：多个数据的组合，在一起但是又拥有数据的独立性
• 2.声明一个数组：let 数组名 = [元素1，元素2，元素3…………]
  • 数组名其实就是变量名，只是习惯上称之为数组名
  • 元素其实就是数组中保存的数据，只是习惯上称之为元素
  • 元素是独立的（数据独立性），但是多个元素又在一起（数据组合）
• 3.获取数组中某一个数据:数组名[下标]
• 4.获取数组中元素的数量:数组名.length
• 5.总结：数组主要由三要素构成
  • 元素：数组中的数据
  • 下标：元素在数组中的位置(从0开始按照顺序递增)
  • 长度：数组中元素的数量

   //吉泽老师有五位关门大弟子，一次考试将这五位弟子的分数存储起来(25,98,100,89,88)//使用多个变量弊端：（1）代码冗余 （2）不便于维护// let s1 = 25;// let s2 = 98;// let s3 = 100;// let s4 = 89;// let s5 = 99;//数组：数据的组合，一个变量可以存储多个数据//1.声明数组  语法： let 数组名 = [元素1，元素2，元素3]let array = [25,98,100,89,99,5];console.log ( array );////2.下标：记录元素的位置   注意：数据中元素的下标是从0开始//可以获取数组中的元素  语法：  数字名[下标]console.log ( array[ 0 ] );let a = array[0];//将数组中的第一个元素存储到变量a中console.log ( a );//3.长度：数组中元素的数量//语法：数组名.lengthconsole.log ( array.length );//6

1.2-数组取值与赋值

• 1.取值：数组名[下标]
  • 取第一个元素:
    数组名[0]
    • 下标从0开始
  • 取最后一个元素:
    数组名[数组名.length - 1]
    • 最后一个元素下标（最大下标） = 长度 - 1
  • 如果下标超过数组最大下标，得到的是undefined
• 2.赋值：数组名[下标] = 值
  • 如果下标有对应的值，会把原来的值覆盖
  • 如果下标不存在，会给数组新增元素

<script>/*** 数组取值：  `数组变量名[下标]`*      * 1.数组的下标是从0开始的*      * 2.数组的最大下标 = 长度 - 1*      * 3.如果数组的的下标超过最大下标时，则得到undefined** 数组赋值：`数组变量名[下标] = 值;`* 1.：如果下标有对应的值，会把原来的值覆盖* 2.如果下标不存在，会给数组新增一个元素，并且数组的长度发生变化*///下标的作用：数组的取值与赋值//数组的下标是从0开始的let arr = [20,65,78,90];//1.数组的取值: 数组名[下标]//a.如果没有超过最大下标：获取该下标对应元素的值console.log ( arr[ 2 ] );//78 第三个元素的值console.log ( arr[ 0 ] );//20 第0个元素//b.如果取值下标超出最大下标则会得到undefinedconsole.log ( arr[ 4 ] );//undefined//2.数组的赋值   语法：数组名[下标] = 值//a.如果没有超过最大下标：则将旧值给覆盖arr[0] = 100;//将100这个值赋给数组的第1一个元素console.log ( arr );//b.如果超过最大下标：则将往数组后面添加元素（用法不多）arr[5] = 88;console.log ( arr );console.log ( arr[ 4 ] );//数组赋值用的最多的是往数组后面只添加一个元素</script>

1.3-数组长度

• 1.获取数组的长度:数组名.length
• 2.修改数组的长度会改变数组的元素数量:数组名.length = 值
• 3.删除数组的最后一个元素:数组名.length–

<script>/*获取数组的长度：数组中数据（元素）的个数获取：数组名.length赋值：  数组名.length = 值* 改变数组的长度会改变数组的元素数量*///1.往数组后面添加一个元素let arr = [10,20,30,40];arr[arr.length] = 50;	//arr.length = 最大下标 + 1console.log ( arr );	//[10,20,30,40,50]//2.删除数组最后的一个元素arr.length--;			//长度-1，相当于把最后一个元素删除了console.log ( arr );	//[10,20,30,40]//3.设置数组的长度会修改数组的元素arr.length = 2;console.log ( arr );	//相当于只保留前面两个元素，后面元素全部被删除了
</script>

1.4-数组另一种声明方式

• 1.简洁方式:let 数组名 = [元素1，元素2，元素3，……]
  • 最常用
• 2.标准方式：let 数组名 = new Array(元素1，元素2，元素3……)
• 3.两种方式唯一区别：创建时如果数组的元素只有一个时含义不同
  • 简洁方式：[10]; 代表数组长度为1，元素是10
  • 标准方式：new Array(10); 代表数组长度为10，没有元素

/*** js中复杂的数据类型在初始化的编译器要做的事情远多于基本数据类型* 所以为了方便开发者，ECMAJavascript为负责数据类型提供了简洁的创建方式** 数组的创建方式有两种:*      * 简洁方式：[]*      * 标准方式： new Array()*      * 它们最大的区别就是创建时如果数组的元素只有一个时含义不同*          * 简洁方式：[10]; 代表数组长度为1，元素是10*          * 标准方式：new Array(10)； 代表数组长度为10，没有元素*/
//1.创建一个空数组//1.1简洁方式：最常用
let nums = [];
//1.2 标准方式
let array = new Array();//2.创建有多个元素的数组
//2.1 简洁方式
let nums1 = [10,20,30,40,50];			//创建一个长度为5的数组，元素分别为10，20，30，40，50
//2.2 标准方式
let array1 = new Array(10,20,30,40,50);	//创建了一个长度为5的数组，元素分别为10,20,30,40,50
//2.3 这两种方式只是创建的区别，取值和获取长度都是一致
console.log ( nums1[ 2 ], array1[ 3 ]);
console.log ( array1.length, nums1.length );//3.创建只有一个元素的数组
//3.1简洁方式
let nums2 = [10];			//创建一个长度为1的数组，元素是10
let array2 = new Array(10);	//创建一个长度为10的数组，没有元素。这是一个空数组
console.log ( nums2 );
console.log ( array2 );

04-循环结构

循环结构作用：代码重复执行

1.1-for循环结构

• 1.for循环语法

  for( 语句1;语句2;语句3 ){
  循环体：需要反复执行的代码;
  }

• 2.执行步骤：

  • 1.执行语句1（定义一个循环变量）
    • 2.执行语句2，判断语句2条件是否成立（条件表达式）
      • 2.1 如果条件成立，则执行循环体代码
        • 执行语句3（循环变量自增），重复步骤2
      • 2.2 如果不成立，结束循环，执行大括号后面的代码

• 3.for循环好处及注意点

  • 好处：循环变量的声明与循环变量自增在一个小括号中，可以更好的避免死循环
  • 注意点：原则上语句1，语句2，语句3可以是任意代码，但是不建议乱写，因为会导致死循环
  • 语句1：通常是定义循环变量
  • 语句2：条件表达式
  • 语句3：通常都是循环变量自增/自减（视需求而定）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script>/* 1. for循环语法for(代码1;代码2;代码3){循环体代码};执行步骤1.执行代码1（声明循环变量）2.判断代码2 （循环条件）2.1 成立，执行循环体代码。执行完毕之后会执行代码3（循环变量自增），重复步骤22.2 不成立，结束循环，执行大括号后面的代码*///需求：打印三次 大前端爱你们么么哒for(let i = 1;i <= 3;i++){console.log('大前端爱你们么么哒');        };/* for循环注意点 ： 原则上代码1，代码2，代码3可以写任意代码,但是一般不会乱写代码1 ： 声明循环变量代码2 ： 循环条件代码3 ： 循环变量自增*/</script>
</body>
</html>

1.2-for循环练习(箩筐思想求和)

箩筐思想求和

a.声明空箩筐b.遍历萝卜堆数c.将萝卜放入箩筐中

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><script>//4.求累加和/ 平均值 = 累加和/数量/* 箩筐思想 ： 三步法1.声明空箩筐2.遍历萝卜堆数3.将萝卜放入箩筐*///1.声明空箩筐let sum = 0;// 2.遍历萝卜堆数for(let i = 1;i<=100;i++){// 3.将萝卜放入箩筐sum += i;};console.log(sum);//老师演示：打印1-10之间所有整数的和/*学生练习：a.打印1-100之间所有整数的和b.打印1-100之间所有偶数的和c.用户输入学生的人数，然后依次输入每一个学生的成绩，输入完毕后计算平均成绩*/</script>
</body></html>

1.3-for循环练习(擂台思想求最大/小值)

擂台思想求最大/小值

a.声明擂主b.遍历挑战者c.依次与擂主PK，交换位置

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><script>//5.求最大值与最小值//老师演示：请用户输入5个数, 将最大的那个数打印出来/* 擂台思想 ： 三步法1.声明空擂主 : （第一次挑战者无条件坐擂主）2.遍历挑战者3.依次和擂主PK*///1.声明空擂主let max = -Infinity; //第一个挑战者一定要比默认擂主大，保证无条件坐擂主//2.遍历挑战者// for(let i = 1;i<=5;i++){//     let num = prompt('请输入第' + i + '个挑战者');//     //3.依次和擂主PK//     if(num > max){//         max = num;//     };// };// console.log(max);/*学生练习：请用户输入5个数, 将最小的那个数打印出来*///1.声明空擂主 : （第一次挑战者无条件坐擂主）let min = Infinity;//2.遍历挑战者for (let i = 1; i <= 5; i++) {let num = prompt('请输入第' + i + '个挑战者');//3.依次和擂主PKif (num < min) {min = num;};};console.log(min);</script>
</body></html>

1.4-break与continue关键字

• 1.break：结束整个语句
  • break既可以用于循环结构也可以用于switch分支结构
• 2.continue：结束本次循环体，进入下一次循环判断
  • continue只能用于循环结构语句

<script>/*** break：结束整个语句* break既可以用于循环结构也可以用于switch分支结构* continue：结束本次循环体，进入下一次循环判断* continue只能用于循环结构语句*///示例：吃包子：我买了十个包子，包子每次只能吃一个，需要循环吃十个//break：假如吃到第五个我吃饱了，后面的包子就都不用吃了//continue:假如吃到第五个吃出来小强，那我第五个不吃了，但是我没吃饱，后面还是要继续吃let sum = 0;for(let i = 1;i<=10;i++){//continue// if(i == 5) {//     console.log ( "吃到小强了，这个包子我不吃了" );//      continue;//结束本次循环体（后面的代码不会执行），循环没有结束，还是会依次执行语句3和语句2// };//breakif(i==5){console.log ( "我吃饱了，后面的包子都不想吃了" );break;//结束整个循环语句}console.log ( "我吃的是第" + i + "个包子" );}</script>

1.5-循环次数不固定02：穷举

穷举：从1遍历到无穷大，找出符合条件的数

<script>
//需求：有一群人，如果3个人站一排多出1个人，如果4个人站一排多出2个人，如果5个人站一排多出3个人//请问这群人有多少人for(let i = 1;i < Infinity;i++){//从1循环到无穷大，也是一种死循环if(i % 3 == 1 && i % 4 ==2 && i % 5 == 3){console.log ( "人数为" + i );break;//找到答案，结束循环}}</script>

1.6-数组遍历

• 1.数组的遍历：获取数组中每一个元素的值，称之为遍历该数组
  • 如果想要获取数组中每一个元素的值，则需要通过循环语法来获取
• 2.一般使用for循环来遍历数组，只不过数组的遍历是一种固定格式的for循环
• 3.固定循环语句格式:for(let i = 0; i < arr.length; i++) {// 数组遍历的固定结构}
  • 思考：为什么循环变量let i = 0 而不是1呢？

<script>/*** * 1.数组的遍历：获取数组中每一个元素的值，称之为遍历该数组*          * 如果想要获取数组中每一个元素的值，则需要通过循环语法来获取*    2.一般使用for循环来遍历数组，只不过数组的遍历是一种固定格式的for循环*    3.固定循环语句格式:*    `for(let i = 0; i < arr.length; i++) {*    // 数组遍历的固定结构*    }`*/let arr = [10,20,30,40,50];for(let i = 0;i<arr.length;i++){let element = arr[i];			//获取数组的每一个元素console.log ( element );}
</script>