js基础day03笔记

发表于
字数统计: 3.8k | 阅读时长 ≈ 14

《部分案例代码下载》

学习目标（全天模式）

  • 能够写出九九乘法表案例
  • 能够说出break和continue关键字的作用
  • 能够说出while do while 和for循环的区别
  • 能够说出数组的作用
  • 能够通过索引获取或设置数组中的数据
  • 能够通过for循环遍历数组中的数据并打印
  • 能够求出一组数中的最大值
  • 能够说出冒泡排序的实现思路
    。。。。。。

理解上课的知识点……

ヾ(๑╹◡╹)ﾉ”双重for循环的练习
1
2
3
4
5
6
7
8
9
10
11
//1 打印9*9的五角星★正方形
//  1、在页面中输出一个★
//  2、在页面中输出一行9个★
//  3、在页面中输出9行★

//2 打印9*9的直角三角形
---------------------------------------------------------
//3 打印9*9乘法表
//  1、在页面中输出3 * 4 = 12
//  2、打印一个直角三角形
//  3、把三角形换成式子

break和continue

break： 如果循环遇到了break，就立刻结束整个循环，循环结束。执行循环之后的代码

continue： 如果循环遇到了continue，就立刻结束本次循环，继续执行下一次循环（直接到i++的地方）。

例子：

1
2
3
4
5
6
7
8
for(var i = 1; i <= 5; i++) {
    if (i === 3) {
        break;   // 结束整个循环——》执行循环之后的代码
        continue; // 结束本次循环——》执行下一次循环
    }
    console.log(i);
}
console.log('我是循环之后的代码');
ヾ(๑╹◡╹)ﾉ” 思考一下输出结果是什么？
1
2
3
4
5
6
7
8
9
for(var i = 1; i <=10; i++) {
  if(i == 5){
    continue;
  }
  if(i == 7){
    break;
  }
  console.log(i);
}
ヾ(๑╹◡╹)ﾉ” break和continue的练习

只是为了练习break和continue

1
2
3
4
5
6
7
8
9
10
11
12
13
//1. 求1-100之间不能被7整除的整数的和（用continue）
//  ——》跳过能被7整除的数，不加

//2. 求200-300之间所有的奇数的和（用continue）
//  ——》跳过所有的偶数，不加

//3. 求200-300之间第一个能被7整数的数（break）
//  1、打印能被7整除的数
//  ——》遇到第一个能被7整除的数之后，直接结束循环

//4. 求200-300之间前3个能被7整数的数（break）
//  1、打印能被7整除的数
//  ——》打印到第三个（计数）能被7整除的数之后，直接结束循环
————————

循环的小结

  • for循环：用的最多，适用于明确循环次数的情况
  • while循环：适用于不明确循环次数情况
  • do…while循环：适用于无论如何都需要执行一次代码的时候（很少）

数组（Array）

数组：就是有序的值的集合

为什么要学习数组

需求： 现在需要存储一个班同学的名字

  • 如果使用简单数据类型存储，一个变量存一个，需要多个变量

    管理起来非常的麻烦，两个班呢？多个班呢？当数据量大时，变量多的要上天

    1
    2
    3
    4
    5
    var name1 = "名字1"；
    var name2 = "名字2"；
    var name3 = "名字3"；
    var name4 = "名字4"；
    ......

  • 如果使用数组存储，只需要一个变量即可

    一个数组中可以存储大量的数据，变量只需要一个，并且之后管理操作也很方便

    1
    var arr = ['名字1','名字2','名字3','名字4','名字5',......]

创建数组方式

  • 字面量（直接量）

    从字面上，就能直接看出类型的量，浏览器直接认识

    1，true，’abc’，undefined，null——》[]：表示一个数组

    1
    2
    3
    4
    var arr = []; // 创建了一个空数组（没有数据的数组）
    var arr = ['张飞','赵云','关羽','刘备','吕布']; // 创建了存了数据的数组
    var arr = [123];// 创建了一个存了123这个数据的数组
    console.log(arr);

    注意点： 数组中可以存任意类型的数据，但是规范一般存储相同类型的数据

  • 构造函数的方法（了解，一般不用）

    函数还没学，先知道写法即可。并且一般不用。

    1
    2
    3
    4
    5
    var arr = new Array(); // 创建了一个空数组（没有数据的数组）
    var arr = new Array('张飞','赵云','关羽','刘备','吕布'); // 创建了存了数据的数组
    //------------------有一个坑
    var arr = new Array(123);// 创建了一个数组，并且占了123个位置，浪费空间
    console.log(arr);

数组长度与下标

需求： 用一个数组，存储3个人：刘备、关羽、张飞

1
var arr = ["刘备","关羽","张飞"];

数组的长度 : 通过arr.length属性，可以获取数据的长度

类似于字符串长度的属性

1
2
var arr = ["刘备","关羽","张飞"];
console.log(arr.length);// 3

数组的下标： 数组中的每一项，都有一个唯一的下标与之对应

也有人把下标叫做索引

数组的下标

ヾ(๑╹◡╹)ﾉ” 数组类似于火车

注意点：

  • 数组下标从0开始
  • 数组下标的最大值：arr.length-1

数组的取值与存值

数组中的数据可以通过下标进行取值与赋值

类似于列车长，可以查看每一节车厢里是谁，也可以给车厢里换人坐。

数组的取值：

1
2
3
4
5
6
7
8
9
10
// 语法: 数组名[下标]
// 1、 如果下标存在, 返回具体的值
// 2、 如果下标不存在, 返回 undefined

var arr = ['刘备', '关羽', '张飞'];
console.log(arr[2]);// 有下标，返回具体的值
console.log(arr[100]);  // 没有这一项, 返回undefined

console.log(arr[arr.length]);  // 没有这一项，返回undefined
console.log(arr[arr.length-1]);  // 返回数组中最后一个值

数组的存值（改值）：

1
2
3
4
5
6
7
8
9
// 语法: 数组名[下标] = "新的值";
// 1、 如果下标存在, 直接用新的值覆盖（改值）
// 2、 如果下标不存在, 会新建一项（存值）
var arr = ['刘备', '关羽', '张飞'];
arr[0] = '诸葛亮';// 把数组中的 下标0 项覆盖掉
arr[1] = '赵云';// 把数组中的 下标1 项覆盖掉
arr[100] = '吕布';  // 可以存值，但是一般不会（浪费空间）

arr[arr.length] = '曹操';// 在数组的最后添加一项（推荐！！）
————————

数组最后添加元素的方法：

为了不开很多空的车厢，一般会在数组的最后添加一项

  • arr[arr.length] = 值：在数组最后添加一项

    随着数组的长度变长，arr.length也在变化，用于比下标多1

  • arr.push(值)：专门用于给数组的最后添加一项（常用）

ヾ(๑╹◡╹)ﾉ” 数组添加元素的练习
1
2
3
//1. 把1-100之间所有的数，放到一个空数组中
//2. 把1-100之间所有的奇数，放到一个空数组中
//3. 把1-100之间能被3整数的数字，放到一个空数组中

数组的遍历

遍及所有项，从数组的第一项，访问到最后一项

low写法：

1
2
3
4
5
var arr = ['刘备', '关羽', '张飞', '赵云'];
console.log(arr[0]);// 重复的代码
console.log(arr[1]);// 重复的代码
console.log(arr[2]);// 重复的代码
console.log(arr[3]);// 重复的代码

遍历的写法：

注意点：从第一项访问到最后一项

  • 第一项：下标是0
  • 最后一项：arr.length-1
1
2
3
4
5
6
7
8
9
10
11
12
13
for(var i = 0; i <= arr.length-1; i++) {// 下标从0~arr.length-1
	console.log(arr[i])；
}
// --------------------------可以优化写法
for(var i = 0; i < arr.length; i++) { // 下标从0~arr.length-1(因为只是小于号，不能取到arr.length)
	console.log(arr[i])；
}
// -----------------------------倒序遍历
// 倒序遍历：从最后一项开始，访问到第一项
//          arr.length-1       0 
for ( var i = arr.length-1 ; i >= 0 ; i-- ) {
    console.log( arr[i] );
}

以下作为思考的作业

ヾ(๑╹◡╹)ﾉ”数组遍历的练习1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var arr = [298, 1, 3, 4, 6, 2, 23, 88,77,44];
//1 求一组数中的所有数的和跟平均值

//2 求一组数中的最大值
// 	1、先假定第一个数是最大的，用变量max存储
//  2、拿之后的每一项与max比较，如果发现更大的，此时更新最大值（把max换成这个更大的值）
//  3、比较到最后max就是最大值

//3 求一组数中的最小值和最小值所在的位置
//  位置先假定为下标为0，用变量minIndex存储
//  当更新最小值时，同时把minIndex更新即可

//4 求一组数中的最大值和最小值以及所在位置
//  上面两个合在一起写即可
————————
ヾ(๑╹◡╹)ﾉ”数组遍历的练习2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var arr = ["a", "bb","ccc","dddd"];
//1.让一个数组倒序保存另一个数组中的每一项
//  1、先把第一个数组倒序遍历
//  2、把倒序遍历的值存在数组中 newArr.push(arr[i])

//2 将字符串数组用|或其他符号分割
//  1、遍历数组
//  2、把每一项拼接字符串
//  3、在拼串的时候，中间加一个|

//3 有一个字符串数组，求字符串数组中每项的长度，并把长度的数值存储到新的数组中
//  1、打印出字符串数组中，每一项的长度: var str = arr[i];console.log(str.length);
//  2、把打印的结果放到新数组中去：newArr.push(str.length);

var arr = [1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7, 0, 8, 0, 9];
//4 将数组中值为0的项去掉，将不为0的值存入一个新的数组
//   1、打印出数组中有除了0以外的数字（打印非0的数字）
//   2、把非0的数字存到新数组中

冒泡排序

冒泡排序法属于算法的范畴，同学们一开始想不到很正常，不要纠结怎么想出来的，因为这都是前人长久的思考不断优化得来的。

关键点在于听懂思路。

排序：让一组没有顺序的数字，经过排列，排成一组有顺序的数字

[3,2,4,1,5,7,9,8,6]——》[1,2,3,4,5,6,7,8,9] ——》从小到大排序（升序）

冒泡：指的是排序的方式，小的在前面，大的在后面

思路：两两比较，让较大的放到后面，一趟下来可以求出一个最大值。

Bubble-sort-example-300px

冒泡排序法的铺垫

冒泡排序：两两比较，让大的数排到后面去！！

  • 交换两个数的值

    1
    2
    3
    4
    5
    6
    7
    var num1 = 11;
    var num2 = 22;
    var temp = num1;
        num1 = num2;
        num2 = temp;
    console.log(num1);
    console.log(num2);

  • 让数组中的最大值，跑到最后

    1. 遍历数组

    2. 让 arr[i] 和 arr[i+1] 比较

      让当前元素与后一个比较

    3. 如果 arr[i] > arr[i+1]，表示前面的比后面的大，此时交换位置（往后沉）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // 2、 让数组中的一个最大值，跑到最后
    //     1、遍历数组
    //     2、让 arr[i] 和 arr[i+1] 比较
    //     3、如果 arr[i] > arr[i+1], 表示前面的比后面的大，此时交换位置
    var arr = [7, 6, 5, 4, 3, 2, 1];

    for (var i = 0; i < arr.length - 1; i++) {
        // 让 arr[i] 和 arr[i+1] 比较
        if (arr[i] > arr[i + 1]) {
            // 交换位置
            var temp = arr[i];
            arr[i] = arr[i + 1];
            arr[i + 1] = temp;
        }
    }
    console.log(arr);
冒泡排序初级版本

找最大值的代码多执行几遍（0~arr.length-1）即可

双重for循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var arr = [7, 6, 5, 4, 3, 2, 1];
// 外层for控制趟数, 7个数, 只需要比6趟即可
for (var j = 0; j < arr.length - 1; j++) {
    // 一趟下来, 比出一个最大值, 7个数, 两两比较, 比6次即可
    for (var i = 0; i < arr.length - 1; i++) {
        // 让 arr[i] 和 arr[i+1] 比较
        if (arr[i] > arr[i + 1]) {
            // 交换位置
            var temp = arr[i];
            arr[i] = arr[i + 1];
            arr[i + 1] = temp;
        }
    }
}
console.log(arr);
————————
冒泡排序的中级版本

优化点：每一趟比较之后，都可以比上一趟少比较一次

1
2
3
4
5
6
7
8
9
10
11
12
var arr = [7, 6, 5, 4, 3, 2, 1];
for (var j = 0; j < arr.length - 1; j++) {
    // 每趟下来, 比上一趟少一次，累计每一趟可以少比较j次
    for (var i = 0; i < arr.length - 1 - j; i++) {
        if (arr[i] > arr[i + 1]) {
            var temp = arr[i];
            arr[i] = arr[i + 1];
            arr[i + 1] = temp;
        }
    }
}
console.log(arr);

假设成立法：

对于某一些问题来说，可以先假设结果为多少，然后找打脸的情况

1
2
3
4
5
6
7
// 1. 需求: 判断这个数组是否全是偶数
//   思路：先假设数组中全是偶数true，如果发现打脸的（有奇数），那么假设错误为false，就不全是偶数
var arr = [2, 4, 6, 8, 10, 1 ];

// 2. 需求: 判断这个数组, 是否已经从小到大排好的
//   思路：先假设已经排好了true，如果一趟比较下来进行了交换（打脸了，还没比好），此时知道还没比好
var arr = [2, 4, 6, 8, 10];
冒泡排序法的高级版本

优化点：以下特殊情况

  • 如果数组本身排好序的，那么不需要排很多次
  • 如果数组第一趟下来就排好了，后面的不需要排了

假设成立法：假设这一趟已经排好了（那么一趟下来不会交换），设置变量flag=true，当交换的时候设置flag=false。

  • 如果真的排好了，一趟下来flag还是true，此时结束循环break
  • 如果还没排好，一趟下来flag会改成false，此时不执行break
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var arr = [7, 6, 5, 4, 3, 2, 1];
for (var j = 0; j < arr.length - 1; j++) {
    var flag = true;// 假设这一趟已经排好的，true
    for (var i = 0; i < arr.length - 1 - j; i++) {
        if (arr[i] > arr[i + 1]) {
            var temp = arr[i];
            arr[i] = arr[i + 1];
            arr[i + 1] = temp;
            flag = false; // 只要交换位置，表示这一趟还没排好，下一次继续
        }
    }
    if(flag) {
        break;// 如果flag在这一趟下来没有改变，还是true，说明已经排好，此时结束循环
    }
}
console.log(arr);

函数基础知识

为什么要学习函数

在写代码的时候，有一些常用的代码需要书写多次，如果直接复制粘贴的话，会造成大量的冗余代码。

此时可以利用函数，将一段重复的代码进行封装（放到一块）

1
2
3
4
5
6
7
8
9
10
11
12
13
// 第一天, 讲一遍故事
console.log('从前有座山');
console.log('山里有座庙');
console.log('庙里有个老和尚');
console.log('老和尚给小和尚讲故事');

// 第二天, 讲一遍故事
console.log('从前有座山');
console.log('山里有座庙');
console.log('庙里有个老和尚');
console.log('老和尚给小和尚讲故事');
......
重复的代码（冗余）

函数的好处：函数可以一次声明，多次调用！！

————————

函数的声明与调用

函数的声明语法：

1
2
3
function 函数名(){
	函数体（需要重复的代码）
}

函数调用的语法：

1
函数名();

例子

1
2
3
4
5
6
7
8
9
// 声明一个讲故事的函数
function tellStory() {
    console.log('从前有座山');
    console.log('山里有座庙');
    console.log('庙里有个老和尚');
    console.log('老和尚再给小尼姑讲故事');
}
// 调用讲故事的函数
tellStory()；

特点：

  • 函数可以把一段重复的代码进行封装

  • 函数一次声明，可以多次调用

    类似于录音机录了一次之后，可以播放很多次

  • 函数只声明，函数体是不会执行的

    类似于录音机有音乐，不会自己播放

ヾ(๑╹◡╹)ﾉ” 函数声明与调用练习
1
2
3
// 1. 封装一个打招呼的函数
// 2. 封装一个函数，计算两个数的和
// 3. 封装一个函数，计算1-100之间所有数的和