js基础day02笔记

发表于
字数统计: 3.9k | 阅读时长 ≈ 15

《部分案例代码下载》

学习目标（全天模式）

  • 能够把其它转换成Number类型/String类型
  • 能够使用if语句实现求两个数最大值
  • 能够写出数字补0案例
  • 能够使用switch完成查询水果案例
  • 能够说出switch和if else if的区别
  • 能够使用循环语句重复执行一段代码
  • 能够使用断点调试代码
    。。。。。。

理解上课的知识点……

比较运算符（关系运算符）

<、 <= 、> 、>=、==、!=、=== 、!==

比较运算符的结果是布尔类型（true/false）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// > 、>= 、< 、<=  比较大小、结果（返回的）为布尔值（简单的过一遍）
var a = 5;
var b = 6;
console.log(a > b);//大于
console.log(a < b);//小于
console.log(a >= b);//大于等于 =》 大于或者等于  都是true
console.log(a <= b);//小于等于

// ==（等于）、 !=（不等于）（需要说明）
// 比较的只是内容，不比较类型
console.log( 12 == 12 );// 是否相等 true
console.log( 12 == '12' );// 是否相等 true
console.log( 12 != '12' );// 是否不相等 false
console.log( 12 != 23 );// 是否不等于 true

// ===（全等于）、!==（不全等）（需要区别）
// 比较：内容 + 类型
console.log( 12 === 12);// true 内容和类型都相等
console.log( 12 === '12');// false 内容相等，但是类型不等
console.log( 12 !== '12');// true 内容相等，类型不等，不全等

总结：

  • = 赋值 把一个值赋值给变量
  • == 相等 只比较内容 （只要内容相等就是true）。12 == '12' => true
  • === 全等 比较内容和类型（必须内容和类型都相等才是true）。12 === '12' => false

运算符优先级（了解）

运算符之间存在优先级关系（先算哪个呢？）

  • ()的优先级最高

  • 一元运算符 （++、--、!）

  • 算术运算符 （先 *、/、%, 后 +、- ）

  • 比较运算符(先 >、<、 >= 、<=， 后== 、=== 、!= 、!==)

  • 逻辑运算符（先 && 后 || ）

1
2
3
4
// 记忆方法：
1、() 优先级最高 。&& || 优先级最低
2、一元也高，
3、中间是算术和比较。先算出来再比较

不用死记，在开发过程中要先算的直接使用()增加优先级即可！！

ヾ(๑╹◡╹)ﾉ”猜猜看
1
2
var result = ((4 >= 6) || ("天" != "地")) && !(((12 * 2) == 144) && true);
console.log(result);

表达式的介绍（了解）

表达式：就是可以由数字、运算符、变量等组成的有结果的式子

比如：1 + 1 、a++、++num、a、b、’abc’、123……，一般可以直接打印出结果的就是一个表达式

表达式的特点：表达式最终都会有一个结果，返回给我们。

类型转换

为什么要进行类型转换

在实际的开发过程中，有时候需要进行不同数据类型之间的转换

1
2
3
// 比如输入年龄，计算明年的年龄，演示使用输入框获取数据，此时获取的数据是字符串，如果直接相加是拼接
 var age = prompt();// 此时age是一个字符串
 console.log( age + 1 );// + 两边中有一个是字符串，所以是字符串的拼接，但是真正需要实现的是加法运算

转换成数字类型

转换成number类型

  • Number（值）

    1
    2
    var str = '300';// str 是字符串 字符串打印是黑色
    console.log( Number(str) );// 数字类型打印是蓝色

  • parseInt（值）

    把数据转换成数字类型（只能是整数）

    1
    2
    3
    4
    5
    var str = '300';
    console.log( parseInt(str) );// 300
    // -----------------------------------只能转换出整数部分，从小数点开始不转换
    var str = '3.1415926';
    console.log( parseInt(str) );// 3

  • parseFloat（值）

    把数据转换成数字类型（可以是浮点数）

    1
    2
    3
    4
    5
    var str = '300';
    console.log( parseFloat(str) );// 300
    // -----------------------------------可以转换成小数
    var str = '3.1415926';
    console.log( parseFloatt(str) );// 3.1415926

    特殊用法： parseInt（）和parseFloat（）可以获取字符串开头的数字

    1
    2
    3
    4
    // 之后可能会需要计算样式属性值，此时可以通过以上方法提取开头的数字
    var str = '100px';
    console.log(parseInt(str));
    console.log(parseFloat(str));

  • 进行运算

    • 算术运算符中除了+之外，其他元素运算符只有运算的功能，都会转化成数字类型

      所以只需要进行不改变值的计算即可

      1
      2
      3
      4
      var str = '600';
      console.log(str - 0);
      console.log(str * 1);
      console.log(str / 1);

    • 正号（用的最多）

      1
      2
      var str = '600';
      console.log( +str);

转换成字符串类型

转换成字符串，手动加””即可，但是项目中需要通过js来控制

  • String（值）

    1
    2
    var num = 100;
    console.log(String(num));// 字符串的100

  • 值.toString（）

    1
    2
    var num = 100;
    console.log( num.toString() );// 字符串的100

  • 拼接字符串

    1
    2
    3
    var num = 100;
    console.log( num + 'abc' );// 字符串 100abc
    console.log( num + '' );// 字符串的 100
————————

转换成布尔类型（boolean）

所有的值都可以转换成布尔类型

  • Boolean（值）

    1
    2
    console.log( Boolean(123) );
    console.log( Boolean('123') );

转化布尔类型的规则：只有 0、 ""、 undefined、null、false、 NaN、这6个值会转换成false，其他都是true。

ヾ(๑╹◡╹)ﾉ” 容易错的几个
1
2
3
4
console.log(Boolean(false));
console.log(Boolean("false"));
console.log(Boolean(0));
console.log(Boolean("0"));

  • !! 非非

    取反一次可以转化成布尔值，但是结果不对，所以需要取反两次保证值一样。

    1
    2
    3
    console.log( Boolean(3));
    console.log( !3 );
    console.log( !!3 );

NaN（了解）

NaN：NaN：not a number

在js中，如果把无法用数字表示的值转换为数字类型，此时浏览器不会报错，会用NaN表示。

如果代码中出现了NaN，表示代码中有问题，将不能转换为数字的数据转化为数字了！

1
2
var str = 'abc';
console.log( +str );// NaN

注意点：

  • NaN的类型是number类型，表示一个非数字

  • NaN不等于任何值，包括它自己（六亲不认）

流程控制

程序的三种基本结构

顺序结构

从上往下执行的代码就是顺序结构

程序默认就是由上往下一行一行的顺序执行的

1
2
3
4
5
6
console.log( '哈哈1' );
console.log( '哈哈2' );
console.log( '哈哈3' );
console.log( '哈哈4' );
console.log( '哈哈5' );
console.log( '哈哈6' );

顺序结构

分支结构

分支结构：也叫选择结构，根据不同的情况，执行对应代码

比如路过一家烤鸭店~

分支结构

循环结构

循环结构：重复做一件事情

比如男男女女的事情~

循环结构

分支结构

if语句

  • 单独的if语句

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 语法
    if (条件) {
        // 只有当满足条件时（true），才执行代码
        代码；
    }
    //--------------------------------------------------
    // 如果成年了，就吃鸡了
    var age = 10;
    if (age >= 18) {
        console.log('今晚吃鸡，大吉大利')
    }

  • if…else语句

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // 语法
    if (条件) {
        // 当满足条件1时，执行的代码1
        代码1；
    } else {
        // 当不满足条件1时，执行的代码2（否则）
        代码2；
    }
    //---------------------------------------------------
    // 如果是成年人去吃鸡，否则喜洋洋
    var age = 10;
    if (age >= 18) {
        console.log('快去吃鸡');
    }else {
        console.log('回家喜洋洋');
    }

  • if…else if…else语句

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    // 语法
    if (条件1) {
        // 当条件1为 true（满足条件1） 时执行的代码1
        代码1;
    }
    else if (条件2){
        // 当条件2 为true (满足条件2) 时执行的代码2
        代码2;
    }
    ....
    else {
        // 当条件1和 条件2 都不为true （上面所有条件都不满足）时执行的代码3
        代码3；
    }
    //--------------------------------------------------
    // 如果是0~18岁，回家喜洋洋
    // 如果是18~80岁，吃鸡
    // 如果是80以上，广场舞等你
    var age = 10;
    if(age < 18) {
        console.log("回家喜洋洋");
    }
    else if( age >= 18){
        console.log("吃鸡");
    }
    else {
        console.log("广场舞等你");
    }
————————
ヾ(๑╹◡╹)ﾉ” if语句小练习：
1
2
3
4
5
6
7
8
9
10
//1、判断一个数是偶数还是奇数

// 2、求两个数中的最大值

// 3、素质教育，把百分制分数转换成ABCDE   
//      A: 90-100
//      B: 80-89
//      C: 70-79
//      D: 60-69 
//      E: 0-59

三元运算符

用于处理简单的判断

1
2
3
4
// 用法
// var 最终结果 = 判断条件 ? 表达式1 ： 表达式2;
// 如果条件满足（true）， 最终结果就是表达式1的结果， 
// 如果条件不满足（false），最终结果就是表达式2的结果
ヾ(๑╹◡╹)ﾉ” 小练习

可以先使用if…else完成，再改写成三元表达式

1
2
3
// 1、求两个数的最小值
// 2、求三个数的最小值
// 3、数字补0案例：用户输入一个数字，如果数字小于10，则在前面补0（比如：01/02/03...得到的是字符串类型的数据），如果数字大于10，则不需要补（比如：20/30/40...）

switch语句

switch..case可以用来判断具体值的情况

语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 
如果表达式的结果等于值1, 执行语句1,
如果表达式的结果等于值2, 执行语句2
....
如果都不满足, 执行default默认语句
注意：break会结束整个switch, 跳出整个switch, 接着往下执行
*/
switch (表达式) {
  case 值1:
    语句1;
    break;
  case 值2:
    语句2;
    break;
  …
  default:
    默认语句;
    break;
}

需求：

1
// 请输入一个数字 0-6 之间,  0表示周日, 1表示周1, 2表示周2 ....在输入框中输入，在控制台中打印结果

注意点：

  • switch语句进行的是全等比较，值和类型都相同才满足条件（10和’10’不同）
  • 如果break省略了，代码会继续执行下一个case。
————————
ヾ(๑╹◡╹)ﾉ” switch测试题
1
2
3
4
5
6
7
8
9
10
11
var num = "10";
switch (num) {
    case 10:
        console.log("10");
    case 20:
        console.log("20");
    case 30:
        console.log("30");
    default:
        console.log("啦啦啦");
}
ヾ(๑╹◡╹)ﾉ” switch小练习
1
// 查询水果案例：用户在输入框中输入一个水果，如果有该水果就弹出价格，如果没有该水果就弹出"没有此水果"

查询水果案例

使用场景

  • if…else适合：范围性的判断（条件是一个范围）
  • switch适合：具体值的判断（条件为是否是一个具体的值）
  • 三元运算符：可以改写简单的if…else语句
ヾ(๑╹◡╹)ﾉ” 作业
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//练习1：土豪的儿子, 输入ABCDE
	//如果考了A：  买玛莎拉蒂
	//如果考了B：  买宝马
	//如果考了C：  买三轮
	//如果考了D：  买摩拜自行车
	//如果考了E：  断绝父子关系
	//如果是其他值，提示代码有bug

//练习2： 买手机，输入自己的工资
   //如果超过30000:  买苹果手机
   //如果10000-30000： 买vivo手机
   //如果5000-10000 ： 买魅族手机
   //如果低于5000   ： 买个锤子

//练习3： 输入自己的银行卡金额
	//如果超过10000  : 高富帅
    //如果不超过      ：穷矮丑

循环语句

在javascript中，循环语句有三种while、do..while、for循环。

需求： 需要打印1~5怎么做？

  • 很简单，写5个console.log即可

    1
    2
    3
    4
    5
    console.log(1);
    console.log(2);
    console.log(3);
    console.log(4);
    console.log(5);

  • 那么打印1~100还能这么写吗？

针对于需要重复执行的代码，此时就需要使用循环语句完成

while循环

先问可不可以，同意了再执行代码……

语法：

1
2
3
4
5
6
7
8
9
10
while(循环条件){
  循环体；// 重复执行的代码
}

/* 
1、先判断条件，如果成立（true），执行循环体
2、再判断条件，如果成立（true），执行循环体
......
当条件不成立（false）时，此时跳出循环（执行循环之后的代码）
*/
ヾ(๑╹◡╹)ﾉ” 通过while循环，打印 1~5 ，再打印 1~100，再求和？
1
2
3
4
5
6
var i = 1;// 初始化语句
while (i <= 5) {
    console.log(i);// 循环体：重复执行的代码
    i++;// 自增
}
console.log('我是循环体之后的代码');

注意点：

  • 循环一定要能结束（否则就是死循环）——》在循环体中，需要让条件中的变量能变化！！！
————————
ヾ(๑╹◡╹)ﾉ” while的练习
1
2
3
4
//1. 计算1~100之间所有偶数的和
//  1、先打印1~100
//  2、打印1~100所有的偶数
//  3、累加
1
//2. 循环表白案例：弹出一个确认框confirm，问是否爱我，如果选择不，就一直问，直到是为止

循环表白案例

1
//3. 循环登录案例：弹出一个输入框prompt，只有当用户输入admin的时候才能登录成功，如果不正确，就一直弹框

循环登录案例

do..while循环

do..while循环和while循环非常像，二者经常可以相互替代，但是do..while的特点是不管条件成不成立，都会执行一次。

区别在于：先执行一遍，再问可不可以，同意了在执行一遍……

语法：

1
2
3
4
5
6
7
8
9
10
11
do{
  循环体；// 重复执行的代码
}while(循环条件);

/* 
1、先执行一遍循环体
2、再判断条件，如果成立（true），执行循环体
3、再判断条件，如果成立（true），执行循环体
......
当条件不成立（false）时，此时跳出循环（执行循环之后的代码）
*/
ヾ(๑╹◡╹)ﾉ” 通过do…while循环，打印 1~5 ，再打印 1~100

先使用while语句写出来，再通过do…while改写一下

1
2
3
4
5
var i = 1;// 初始化语句
do{
  console.log(i);// 循环体
  i++;//自增
}while(i <= 5);

注意点：

  • 区别

    • while语句：先判断，如果成立，再执行循环体……

      如果条件开始就不成立，一次都不会执行

    • do…while语句：先执行循环体，再判断，如果成立，再执行循环体……

      如果条件开始就不成立，也会执行一次

  • while用的场景较多，do…while很少会用到，但是需要知道区别。

ヾ(๑╹◡╹)ﾉ” do…while的练习
1
2
3
4
//1. 计算1~100之间所有偶数的和
//  1、先打印1~100
//  2、打印1~100所有的偶数
//  3、累加

课后自己试着把之前的while连写改写成do…while看看可不可以

for循环（重点）

写while循环的经常会忘记自增，for循环其实是while循环演化过来的，语法更加的简洁明了，使用非常的广泛。

语法：

1
2
3
4
5
6
7
8
9
10
for(初始化语句;判断条件;自增或自减){
  循环体
}
/*
1、先执行初始化语句
2、再判断条件，如果成立（true）执行循环体，再自增或自减
3、再判断条件，如果成立（true），执行循环体，再自增或自减
......
当条件不成立时（false），跳出循环
*/

顺序：

  • 语句

    1. 初始化语句
    2. 判断条件
    3. 自增或者自减
    4. 循环体

  • 序号表示顺序：

    • 1243
    • 243
    • 243
    • …..
  • 初始化语句只执行一次，之后就是243一直循环
ヾ(๑╹◡╹)ﾉ” 先使用while语句完成打印 1~5 ，再改写成for循环，再打印 1~100
1
2
3
4
var i = 0;
for(var i = 1; i <= 5; i++){
  console.log(i);
}
————————

断点调试

对于以上for循环的执行顺序，可以通过断点调试查看代码执行的顺序

先简单了解，之后会不断拓展用法

ヾ(๑╹◡╹)ﾉ” 使用for循环计算1~100所有数的和
1
2
3
4
5
var sum = 0;
for(var i = 1;i <= 100;i++) {
	sum += i;
}
console.log(sum);

接下来通过断点调试查看以上代码的执行顺序

操作：

  • 设置断点

    1. 打开控制台，查看sources窗口，点开对应的文件

    2. 在对应的行号上点一下（高亮表示一个断点），此时刷新页面，浏览器会自动在断点这一行停止执行。

      打上断点好比告诉浏览器代码执行到这一行，停下来容我看看

  • 如何查看

    • watch窗口：在右侧+中写变量名，可以监视变量值的变化

      watch中会实时展示该变量当前的值是多少

    • 往下执行一步（第二个按钮）：可以让代码往下执行一步

    • 执行到下一个断点（第一个按钮）：可以让代码瞬间执行到下一个断点的位置停下

  • 调试完断点之后记得再点击一下删除掉，否则重新刷新又会在断点处停下。

ヾ(๑╹◡╹)ﾉ” for循环练习1
1
2
3
//1 求1-100之间所有数的和、平均值(和除以个数即可)
//2 求1-100之间所有数的乘积
//3 计算1-100之间能3整除的数的和
ヾ(๑╹◡╹)ﾉ” for循环练习2
1
2
//1 计算1-100之间不能被7整除的数的和
//2 同时求1-100之间所有偶数的和，奇数的和
—————————