JavaScrip基础学习笔记（一）

一、三元表达式

1.1 什么是三元表达式

由三元运算符组成的式子我们称为三元表达式

1.2 语法结构

条件表达式 ？ 表达式1 ： 表达式2

1.3 执行思路

如果表达式为结果真 则返回表达式1的值，如果条件表达式结果为假，则返回表达式2的值

1.4 举个栗子

var num = 10;
var result = num > 5 ? "大于5" : "小于5"; // 表达式是有返回值的
console.log(result);

// 相当于
if (num > 5) {
      result = "大于5"
}else{
       result = "小于5"
}        

1.5 总结

三元表达式就是简化版的if-else

二、数字补0 案例

2.1 需求：如果数字小于10，则在这个数字前面补0，否则不做操作

2.2 思路：字符串拼接

2.3 举个栗子

// 定义一个变量接收用户输入的值
var num = prompt("请输入一个数字");
// 把返回值赋值给一个变量输出
var result = num < 10 ? '0' + num : num;
console.log(result);

三、switch语句

3.1 什么是switch语句

switch语句也是多分支语句也可以实现多选1

3.2 语法结构

switch：转换、开关；case：小栗子或选项的意思；break：退出

switch(表达式){ case 空格 值1: 执行语句1; break; case 空格 值2: 执行语句2; break;... default:执行最后的语句;}

3.3 执行思路

执行思路：利用表达式的值和case后面的选项值相匹配，如果匹配成功，就执行该case里面的语句，如果都匹配失败，那么就执行default里面的语句

3.4. 举个栗子

        var num=1;
        switch (num) {
            case 1:
                console.log("这是1");
                break;
            case 2:
                console.log("这是2");
                break;
            case 3:
                console.log("这是3");
                break;
            default:
                console.log("没有匹配结果");
                break;
        }    

四、循环

4.1 循环的目的：可以重复执行某些代码

4.2 语法结构

for (初始化变量; 条件表达式; 操作表达式) { 循环体 }

解析：

• 初始化变量：就是用var声明的一个普通变量，通常用于作为计数器使用
• 条件表达式：就是用来决定每一次循环是否继续执行，就是终止的条件
• 操作表达式：是每次循环最后执行的代码，通常用于我们计数器变量进行更新（递增或者递减）

4.3 举个栗子

// 打印100行你好
for (let i = 0; i <= 100; i++) {
       console.log("你好！");
} 

4.3.1 计数器

for循环可以重复执行不同的代码，因为我们有计数器变量i的存在，所以i每次循环值都会发生变化

// 输出一个人1~100岁
for (let i = 1; i <= 100; i++) {
       console.log("Tao今年" + i + "岁了！");
}

4.3.2 for 循环进行算术运算练习

        // 需求：
        // 1、求1-100之间所有整数的累加和
        var sum = 0;
        for (let i = 1; i <= 100; i++) {
            sum += i;
        }

        console.log("1-100之间所有整数的累加和是：" + sum);

        // 2、求1-100 之间所有数的平均值
        var sum = 0; // 和
        var avg = 0; // 平均值
        for (let i = 1; i <= 100; i++) {
            sum += i;
        }
        avg = sum / 100;
        console.log("平均值是：" + avg);

        // 3、求1-100 之间所有偶数与奇数的和
        var even = 0; // 偶数
        var odd = 0; // 奇数
        for (let i = 1; i <= 100; i++) {
            if (i % 2 == 0) {
                even += i;
            } else {
                odd += i;
            }
        }

        console.log("1-100 之间所有偶数和是：" + even);
        console.log("1-100 之间所有奇数和是：" + odd);

        // 4、求1-100 之间所有能被3整除的数字的和
        var sum = 0;
        for (let i = 1; i <= 100; i++) {
            if (i % 3 == 0) {
                sum += i;
            }
        }

        console.log("1-100 之间所有能被3整除的数字的和是：" + sum);
        

4.3.3 求学生成绩

 // 需求：用户输入班级人数，然后依次输入每个学生的成绩，最后打印出改班级的总成绩与平均成绩
        var classNum = prompt("请输入班级人数");
        var sum = 0; // 总成绩
        var avg = 0; // 平均成绩
        for (let i = 1; i <= classNum; i++){
            var score = prompt("第" + i + "位学生的成绩是：");

             // 注意：在prompt里面取出来的值都是字符串类型的，所以需要强转为数字型
            sum += parseFloat(score);
        }
        avg = sum / classNum;

        alert("该班级的总成绩是：" + sum+"，"+"平均成绩是："+avg);

4.4 双重for循环

4.4.1 理解：可以把里面的循环看做是外层循环的语句

4.4.2 语法结构

for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {

        for (内层的初始化变量; 内层的条件表达式; 内层的操作表达式) {

               // 执行语句;             

         }

           

  }

4.4.3 执行过程：外层循环一次，里面的循环执行全部

4.4.4 举个栗子

4.4.4.1 打印五行五列的星星

　　　　　var star = "";
        for (let i = 1; i <=5 ; i++) { // 外层循环打印五行

            for (let j = 1; j <= 5; j++) { // 内层循环一行打印五个星星
                star += "★" ;
            }

            // 如果一行打印完5个星星就要换行哦
            star += "\n";
        }

        console.log(star); 

4.4.4.2 打印倒三角形的星星

　　　　　var star = "";
        for (let i = 1; i <= 10; i++) {
            // 因为j不再是固定的，而是随着行数变化的，j=2的时候就打印9颗星星，2,3,4...9
            for (let j = i; j <= 10; j++) {
                star += "★";
            }
            star += "\n";
        }

        console.log(star);

4.4.4.3 打印九九乘法表

　　　　 var str = "";
        for (let i = 1; i <=9; i++) {
            for (let j = 1; j <= i; j++) {

                str += j + "*" + i + "=" + (i*j) + "\t";
            }

            str += "\n"
        }

        console.log(str);

5、数组

5.1 什么是数组

数组（Array）就是一组数据的集合，存储在单个变量下的优雅方法（即不用创建多个变量名）

5.2 创建数组的方法

方法一：利用new关键字创建数组

var arr = new Array();

方法二：利用数组字面量创建数组（常用）

var arr = []; // 创建了一个空的数组
var arr1 = [1,2,'tao',true]; // 数组里面可以存储不同的数据类型

5.3 注意

• 数组里面的数据一定要用逗号分割

• 存放在数组里面的数据，称为数组元素

5.4  访问数组元素

5.4.1 数组的索引（下标）

用来访问数组元素的序号（数组下标从0开始）

5.4.2 格式：数组名[索引号]

5.4.3 举个栗子

var arr2 = [1,2.2,'tao',true];
console.log(arr2[2]); // 输出结果：tao

5.5 遍历数组

5.5.1 概念

就是把数组的元素从头到尾访问一次

5.5.2 通过循环遍历数组元素

因为数组索引是从0开始的，所以i必须从0开始，小于数组元素里面的长度

var arr = ['tao', "tom", "fairy", "gin"];

for (let i = 0; i < arr.length; i++) {
     console.log(arr[i]);
}

5.6 举个栗子

5.6.1 数组求和以及平均值

　　　　 // 需求：计算数组元素的和以及平均值
        var sum = 0;
        var avg = 0;
        var arr = [2,4,6,8];

        for (let i = 0; i < arr.length; i++) {
            sum += arr[i];
        }

        avg = sum / arr.length;

        console.log("数组中元素和是："+sum);
        console.log("数组中元素平均值是："+avg);

5.6.2 求数组中的最大值

5.6.1 分析需求

1. 声明一个最大值变量max
2. 默认最大值是数组中的第一个元素
3. 遍历数组，把里面的每个元素和max相比较
4. 如果这个元素大于max就把这个元素存储到max里面，否则就继续下一轮比较
5. 输入最大值max

        var arr = [2,4,6,8,9,1,0];
        var max = arr[0];
        // 因为最大值已经默认是数组中的第一个元素了，所以就不需要和第一个元素比较了，所以从1开始
        for (let i = 1; i < arr.length; i++) {
           if (arr[i] > max) {
                max = arr[i];
           }

        }

        console.log("该数组里面的最大值是："+max);
    

5.6.3 数组转换为分割字符串

        //需求：将var arr = ['tao', "tom", "fairy", "gin"]转换为字符串
        //输出tao,tom,fairy,gin
        var arr = ['tao', "tom", "fairy", "gin"];
        var str = ""; // 用来存储分割完的字符串
        for (let i = 0; i < arr.length; i++) {
            str += arr[i]+",";
        }

        console.log(str);