js第三天

for循环

概念

和while循环一样也是循环重复执行代码
当如果明确了循环的次数的时候推荐使用for循环

当不明确循环的次数的时候推荐使用while循环

优点：把声明起始值、循环条件、变化值写到一起，让人一目了然

  1. for(声明记录循环次数的变量;循环条件;变化值){
  2. 循环体
  3. }

注：

第一次执行for的时候， 变化量是不执行的

继续循环的时候, 不再执行初始化过程了; (先 变化量,再 判断条件)1 变化量，2.退出条件，3.循环语句

JS第四天 - 图1

求1-100之间所有的偶数和 小案例

  1. let sum =0; //值
  2.     for (let i = 1 ; i<= 100 ; i++){
  3.          //筛选偶数，只要符合条件就让值与i相加一次
  4.       if( i % 2 === 0 ){
  5.         sum += i
  6.       }
  7.     }
  8.     document.write(sum)

退出循环

概念：循环有个缺点： 循环多少次，已经固定写死了；

js执行流程已经给固定了；
因此有个方法，用来实现：满足一定条件时，中断循环

continue：结束本次循环，继续下次循环

  1. for (let i = 1; i <= 5; i++) {
  2.       if (i === 3) { //如果i等于三，就结束这一次的循环，继续下一次循环
  3.         continue
  4.       }
  5.       document.write(`${i}<br>`)
  6.     }

输出结果：1 2 4 5

break：跳出所在的循环

  1. for (let i = 1; i <= 5; i++) {
  2.       if (i === 3) { //如果i等于三，就退出整个循环
  3.         break
  4.       }
  5.       document.write(`${i}<br>`)
  6.     }

输出结果：1 2

扩展： while循环 ，也可以使用 continue 和 break

for循环嵌套

概念：

  1. 外面循环一次，内部循环完整循环执行一次；
  2. 对于内部循环来说，每一次的外部循环，都会重新创建一次内部循环。

JS第四天 - 图2

数组（Array）

概念

是一种可以按顺序保存数据的数据类型，属于复杂数据类型

使用方法

1.声明语法

JS第四天 - 图3

注：数组是按顺序保存，所以每个数据都有自己的编号
计算机中的编号从0开始，所以数据1的编号为0，数据2编号为以此类推，数组可以存储任意类型的数据

2.取值语法

JS第四天 - 图4

例如：

JS第四天 - 图5

注：通过下标取数据
取出来是什么类型的，就根据这种类型特点来访问

3.术语

  1. let arr = ['马超', '张飞', '赵云', '关羽', '黄忠']
  2.     for (let i = 0; i < arr.length ; i++) {
  3.       document.write(`名字是：${arr[i]}<br>`)
  4.     }

元素

数组中保存的每个数据都叫数组元素

下标

在数组中，数据的编号也叫索引或下标

长度，length

数组的长度，通过他可以检测提取数组的长度

使用方法，变量名.length

注：

arr. length = 100;//有效;可以直接修改数组长度;

技巧:arr. length = 0;//清空数组

遍历数组

遍历:按照某个顺序，依次访问某个集合中的每个元素

用循环把数组中每个元素都访问到,一般会用for循环遍历

数组求和与平均值小案例

  1. let arr = [20, 60, 19, 75, 46],
  2.       sum = 0,
  3.       average = 0;
  4.     // i输出结果是数组元素的下标
  5.     for (let i = 0; i < arr.length; i++) {
  6.       //总分等于0加上数组里面的值arr[i]输出结果是数组里面的值 
  7.       sum += arr[i]
  8.     }
  9. //平均值等于总分除以数组的长度（也就是科目的数量）
  10.     average = sum / arr.length
  11. //打印出来
  12.     document.write(`这个同学的高考总分是：${sum},平均分是${average}`)

求最大值最小值案例

  1.     let arr = [3, 20, 60, 19, 75, 46, 99, 1, -50],
  2.       //声明最大值的变量,得到数组元素的方法 数组名[索引号]
  3.       max = arr[0];
  4.     //声明最小值的变量,得到数组元素的方法 数组名[索引号]
  5.     min = arr[0];
  6.     // i输出结果是数组元素的下标
  7.     for (let i = 1; i < arr.length; i++) {
  8.       //  i是序号0123456 只不过正好和数组的索引号对应
  9.       // i可以看做是数组的索引号
  10.       // 如果max小于对比的数组元素，就把更大的值赋值给max
  11.       if (max < arr[i]) {
  12.         max = arr[i]
  13.       }
  14.       // 如果min大于对比的数组元素，就把更小的值赋值给min  
  15.       if (min > arr[i]) {
  16.         min = arr[i]
  17.       }
  18.     }
  19.     document.write(`当前数组的值分别是${arr}<br>`)
  20.     document.write(`当前数组的最大值是${max}<br>`);
  21.     document.write(`当前数组的最小值是${min}<br>`);

操作数组

概念

数组本质是数据集合，操作数据无非加上 增 删 改 查 语法：

可以使用arr.length =0来清空数组

增

数组添加新的数据

arr.push（重要）

概念：将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点)

语法：

JS第四天 - 图6

例如：

  1. let arr = [];
  2. arr.push(123, 213, 321)
  3. arr 输出结果 = 123,213,321

找出大于十并添加到新组案例

  1.  let newArr = [];
  2.     //1. 声明一个新数组用来放新数据
  3.     for (let i = 0; i <= arr.length; i++) {
  4.       // 2.遍历旧数据，用if找出大于10的元素
  5.       if (arr[i] >= 10) {
  6.         // 3.依次追加给新数组
  7.         newArr.push(arr[i])
  8.       }
  9.     }
  10.     document.write(newArr)

arr.unshift（了解）

概念：将一个或多个元素添加到数组的开头，并返回该数组的新长度 (重点)

删

删除数组中数据

arr.pop()

删除最后一个元素，语法：arr.pop()，返回值为删除的元素

arr.shift()

删除第一个元素，语法：arr.shift()，返回值为删除的元素

arr.splice(start, deleteCount)

删除指定元素

  1. arr.splice(起始位置，删除几个元素)

例：arr.splice(1, 1)从第二个元素开始，删掉一个元素

起始位置 start：指定修改的开始位置（从0开始计数）

删除几个元素 deleteCount：表示要移除的数组元素个数，可以选择，如果省略则默认从指定位置删除到最后

数据拼接

JS第四天 - 图7

newDatas：
要新增的数据，比如 1,2,3,4
继续添加逗号分隔

改

重新赋值，数组[下标] = 新值

例：arr[0]='lightpink'

查

查询数组数据，数组[下标]，或者我们称之为访问数组数据

例：console.log(arr[0])

冒泡排序小案例

  1. let arr = [1, 4, 3, 5, 2];
  2.         //1.外层循环控制 趟数 循环4次 arr.length -1
  3.         for (let i = 0; i < arr.length - 1; i++) {
  4.     // 2.里层的循环 控制一趟交换几次 arr.length -i-1
  5.    for (let j = 0; j < arr.length - i - 1; j++) {
  6.                 // 交换两个变量
  7.                 //arr[j]和arr[j + 1])
  8.                 if (arr[j] > arr[j + 1]) {
  9.                     let temp = arr[j]
  10.                     arr[j] = arr[j + 1]
  11.                     arr[j + 1] = temp
  12.                 }
  13.             }
  14.         }
  15.         document.write(arr)

柱状图小案例

  1. let datas = []
  2.     for (let i = 1; i <= 4; i++) {
  3.       datas.push(prompt(`请输入第${i}季度的数据：`))
  4.     }
  5.     console.log(datas);
  6.     for (let j = 0; j < datas.length; j++) {
  7.       let val = datas[j]
  8.       document.write(`<div class="column" style="height:${val}px">
  9.         <span class="num">${val}</span>
  10.   <span class="name">第${j + 1}季度</span>
  11.         </div>`)
  12.     }