首页 👨‍💻计算机,🚓JavaScript

js基础day02总结

操作符(运算符)

用来操作数据的符号,一般用于运算

算术运算符

加、减、乘、除、取模 (+, -, *, /, %)

console.log(5 + 4); // 9
console.log(5 - 4); // 1
console.log(5 * 4); // 20
console.log(5 / 4); // 1.25
console.log(5 % 4); // 1

加号上下文

  1. 如果+号左右只有一个值 解析的结果是正号 可用于隐式转换

    let salary = +prompt('这个月发了多少工资?');
  2. 如果两边都是数值(Number)类型 则是加法运算符

    console.log(5 + 4); // 9
  3. +号的左右如果有一个数据是字符串数据类型的话 那么这个+号会被解析成连接符

    console.log(1 + '2'); // 12

字符串拼接 (重要)

练习: 魔都的房价是50000一平,我的工资是1000,我需要不吃不喝奋斗100年,可以在魔都买一个小厕所

  1. 数字相加, 字符相连

    let price = 50000;
    let salary = 3000;
    let time = 300;
    let house = '经济适用房';
    
    console.log(
      '魔都的房价是' +
      price +
      '一平, 我的工资是' +
      salary +
      ', 我需不吃不喝奋斗' +
      time +
      '年, 可以在魔都买一个' +
      house
    );

口诀: '+ 变量名 +' 去替换需要替换的内容

  1. 模板字符串(ES6)
  • 使用 `` 包裹需要的字符串
  • 使用 ${变量} 去解析变量名

    console.log(`魔都的房价是${price}一平, 我的工资是${salary}, 我需不吃不喝奋斗${time}年, 可以在魔都买一个 ${house}`);

提问:

  1. 加号有几种情况? 分别使用在哪里 ?
  2. 模板字符串的使用步骤 ?

赋值运算符 (=)

  1. 将等号右边的值赋予给左边, 要求左边必须是一个容器
  2. 累加 +=
// 将等号右边的值赋予给左边
let a = 10; 
// 累加 +=
a = a + 10;
// ↑ 可以简写成 ↓
a += 10;
// 要求左边必须是一个容器
console.log(9 = 9) // 不成立

说明: += ,-=, *=, /= 语法也是可以的

提问:

  1. 赋值符号的作用是什么 ? 使用在哪里 ?
  2. 易错点: 一定要和等号区别开, =是赋值号 两个等于号才是数学上的等于

一元运算符

一元运算符: 仅操作一个操作数. 比如: 正负号等

自增自减运算符 (++, --)

变量++, 变量--, ++变量, --变量

相同点:

不管是++或者-- 是在前还是在后,都是在原来的取值上自行增1或减1 类似于 => a += 1

// 共同点: 都是在原有的基础上自行 + 1 类似于 a += 1
let a = 2;
let b = 3;
a++;
++b;
console.log(a); // 3
console.log(b); // 4

不同点:

++变量, --变量

说明: 符号前置 => 先加1 再使用 (快捷记忆: ++在前 先加)

变量++, 变量--

说明: 符号后置 => 先使用 再加1 (快捷记忆: ++在后, 后加)

// 不同点:
// 变量++, ++后置, 先使用 再加1
// ++变量, ++前置, 先加1 再使用
let a = 2;
let b = 3;
console.log(a++); // 2
console.log(a); // 3
console.log(++b); // 4
console.log(b); // 4

提问:

  1. ++前置和++后置有什么相同点和不同点?
  2. 实际工作中,大多数情况下只需要考虑相同点 ?

逻辑运算符

&&(与), ||(或), 非(!)

使用场景: 多个条件同时判断的时候使用

逻辑与

表达式1 && 表达式2

说明:

  1. 可以理解为并且,两个表达式必须同时满足,一个不满足则整个表达式不成立

    // 高薪就业: 技术好 && 表达好
    console.log(true && false);  // false
    console.log(false && true);  // false
    console.log(false && false); // false
    console.log(true && true);   // true
  2. 一般用于多个条件同时判断的时候使用

逻辑或

表达式1 || 表达式2

说明:

  1. 表达式1和表达式2有一个为满足,则整个结果就为true

    // 有对象: 有颜 || 有矿 
    console.log(true || false); // true
    console.log(false || true); // true
    console.log(true || true); // true
    console.log(false || false); // false
  2. 一般用于多个条件同时判断的时候使用

逻辑非

!表达式

console.log(!true); // false
console.log(!false); // true

提问:

  1. 逻辑运算符的使用场景 ?
  2. 逻辑与和逻辑或的执行特点 ?

比较运算符

比较运算符:  > , < , >= , <= , == , === , != , !==

大于小于

// 比较运算符的结果都是布尔值
console.log(2 > 1);
console.log(1 > 2);

// >= <=  这个理解为大于或者等于  小于或者等于
console.log( 5 >= 5 );
console.log( 5 <= 5 );

等于

// == 等于  只要内容相等即可
console.log(3 == 3);
console.log(3 == '3');

// === 全等  全等不仅仅是内容相等 同时需要比较类型 优先比较类型
console.log(3 === '3');
// != 比较内容即可 !== 不仅比较内容还比较类型
console.log(3 !== '3');

说明:

  1. 两个等号只判断内容相等, 不判断类型

    1. 三个等号不仅仅判断内容, 还判断类型, 优先判断类型
    2. 为了严谨性出发,建议都使用全等 (三个等号) 做等值判断 ===

提问:

  1. 比较运算符的使用场景
  2. 两个== 和三个 ===的区别? 优先使用哪个等号 ? 原因是什么?

特殊说明 (补充)

  1. 如果是数字和"其他值"的比较 则其他值会自动转换成数字去比较

    console.log(5 > '4'); // true
    // '哈哈' 转换成Number的结果是NaN
    console.log(5 > '哈哈'); // false
    console.log(5 < '哈哈'); // false
  2. 涉及到NAN等于都是false (NaN)

     console.log(NaN == NaN); // false
  3. 如果是"字符串"和"字符串"比较 则会比较每一个字符的ASCII码,同时是按位进行比较

    console.log('a' > 'b'); // false
    console.log('a' < 'b'); // true
    console.log('azzzz' < 'b'); // true
    console.log('9' > '1000000'); // true
    console.log(9 > '1000000'); // false
  4. 如果是布尔值参与比较 布尔值会转换成数字0和1

    console.log(true > false); // 1 > 0 => true
    console.log(false > true); // 0 > 1 => false

表达式和语句

可以产生一个值的式子就是表达式 在现阶段可以理解为有运算符的地方就是表达式

let a;
a = 1; 
a++;
console.log(1 + 2 + 3);

语句可以理解为一个行为 语句中可以包含表达式

alert(1 + 2 + 3); // 弹出一个框的行为
console.log(1 + 2 + 3) // 往控制台输出

流程控制语句的分类

  • 顺序语句 自上而下一步一步执行 之前学习的所有都是顺序语句

  • 分支语句 根据条件有选择的执行

  • 循环语句 循环执行对应的语句

提问:

  1. 什么是表达式 ?
  2. 什么是语句 ?
  3. 语句的分类 ?

if分支语句

单条分支

需求:得到用户输入的年纪,年纪满18岁 显示成年

// 单条分支语法
// if(条件){
//    条件为真则执行大括号里面的代码
// }

let age = +prompt('请输入你的年龄?');
if (age >= 18) {
  console.log('成年');
}

两条分支

需求: 在之前基础上未满18岁, 则显示未成年

// 两条分支
// if (条件) {
//   当条件为true的时候执行的代码块;
// } else {
//   条件为false执行的代码块;
// }

let age = +prompt('请输入你的年龄?');

if (age >= 18) {
  console.log('成年');
} else {
  console.log('你还未成年,好好读书!!');
}

多条分支

// 需求:得到考试的分数 
// 90 - 100 => 买玛莎拉蒂  80 - 90 => 买宝马  70 - 80 => 买大众 60 - 70 => 五菱荣光  60以下 => 摩拜单车 

// 语法说明
// if (条件1) {
//   当条件1为true的时候执行的代码块;
// } else if (条件2) {
//   当条件2为true执行的代码块(上面的条件为false);
// } else if (条件3) {
//   当条件3为true执行的代码块(上面的条件为false);
// } else {
//   上述条件都不满足执行的代码块;
// }

let score = +prompt('请输入你的考试分数?');

if (score >= 90 && score <= 100) {
  console.log('玛莎拉蒂');
} else if (score >= 80 && score < 90) {
  console.log('宝马');
} else if (score >= 70 && score < 80) {
  console.log('大众');
} else if (score >= 60 && score < 70) {
  console.log('五菱荣光');
} else if (score < 60) {
  console.log('摩拜单车');
} else {
  console.log('大嘴巴子');
}

// 上述代码可以简化成  代码是自上而下执行的,如果执行到咯第二个分支, 意味着第一个分支的条件一定是不满足的
if (score >= 90) {
  console.log("玛莎拉蒂");
} else if (score >= 80) {
  console.log("宝马");
} else if (score >= 70) {
  console.log("大众");
} else if (score >= 60) {
  console.log("五菱荣光");
} else if (score < 60) {
  console.log("摩拜单车");
} else {
  console.log("大嘴巴子");
}

练习

前提: 从用户那边获取两个数据, 一个表示年龄,一个表示存款
如果是20岁这个阶段:
    存款小于10000的 打印莫欺少年穷
  否则打印年少有为
如果是20 - 40这个阶段的
    存款小于10W的 莫欺中年穷
  否则打印中年有为
如果是40 - 80这个阶段的
    存款小于 20W的, 莫欺老年穷
    否则打印 大器晚成
不属于这个年龄的
    打印钱财乃身外之物

提问: age > 20 && age <= 40 能不能替换成 20 < age <= 40

提问:

  1. if分支语句有几种, 具体的语法使用?
  2. 多条分支当中, 后面的分支语句执行意味着前面分支的结果一定是 ?
  3. 分支语句是否可以嵌套 ?

三元运算符

条件 ? 表达式1 : 表达式2

  1. 如果条件为true, 会执行语句1
  2. 如果条件为false,会执行语句2
let age = +prompt('请输入您的年龄?');

// if (age >= 18) {
//   console.log('成年了');
// } else {
//   console.log('未成年');
// }

// 上述写法可以改写成
age >= 18 ? console.log('成年了') : console.log('未成年');

// 进一步改写
console.log(age >= 18 ? '成年了' : '未成年');

说明: 三元运算可以返回一个结果

练习

  1. 思考1: 得到用户输入的值, 求两个数的最大值

    let num1 = +prompt('请输入第一个数?');
    let num2 = +prompt('请输入第二个数?');
    
    if (num1 > num2) {
      console.log(num1);
    } else {
      console.log(num2);
    }
    
    // 上述分支使用三元改写
    console.log(num1 > num2 ? num1 : num2);
  2. 思考2: 得到用户输入的三个值, 求三个数的最大值

    let num1 = +prompt('请输入第一个数?');
    let num2 = +prompt('请输入第二个数?');
    let num3 = +prompt('请输入第三个数?');
    
    let max = num1 > num2 ? num1 : num2;
    max = max > num3 ? max : num3;
    console.log(max);
  3. 思考3: (扩展) 如果用户输入的数值只要有一个不是有效的数字的时候, 提示用户输入的数字不合法

难点: 如何判断变量里面装的不是一个有效的数字

思路: 从用户那边得到的取值转换成Number的结果是NaN, 则表示不是一个有效的数字

 // 坑: 错误写法 => 这种写法结果都是false, 原因是NaN和任何数值都不等
 if (Number(变量) === NaN) {} 

解决: JS内置的专门检测NaN的语法: isNaN(变量)

if (isNaN(num1) || isNaN(num2) || isNaN(num3)) {
  console.log('您输入的不是一个有效的数字');
} else {
  let max = num1 > num2 ? num1 : num2;
  max = max > num3 ? max : num3;
  console.log(max);
} 

提问:

  1. 三元运算的作用是什么? 有什么使用场景
  2. 三元运算可以完全替代if else分支么 ?
  3. 三元运算和if else的分支区别在哪里 ?
  4. 如何检测一个取值是否是NaN ?

switch case 语句

分支语句的一种

// 需求:接受用户输入的值(1-7) 根据对应的数字返回星期几  1 - 星期一 2 - 星期二.... 如果用户输入的不是1- 7 告诉用户 好好输入

// 类似于上述这种定值判断, 可以使用更针对性的switch case语句
// key: 需要判断的变量
// value: 用来匹配的取值
switch (key) {
   case value1:
     // 满足这个case执行的代码块
     break;
   case value2:
     // 满足这个case执行的代码块
     break;
   default:
     // 上述所有的 case都么有匹配上执行的代码
     break;
}

注意:

  1. switch case语句一般用于定值判断,不适合于区间判断
  2. switch case比较的值全等 ===
  3. switch case一般需要配合break关键字使用 没有break会造成case穿透

提问:

  1. switch case语句的使用场景
  2. 如果 switch case 里面没有break会如何 ?

分支语句使用总结

// if else
// 单条分支语句
// 两条分支语句
// 多条分支语句
// 使用的最多的分支语句  任何情况下都可以通用

// 三元运算符
// 可以简单理解为两条分支的简写形式,一些简单的两条分支可以使用三元运算符代替
// 相较正常的两条分支语句来说多了一个返回值

// switch case语句
// 当出现了定值判断的时候可以使用

调试断点

断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值和代码的运行过程

调试步骤:

浏览器中按F12 --> sources --> 左侧找到需要调试的文件`双击` --> 在程序的某一行设置断点 (在行号的位置点击一下即可) ---> 刷新一下 程序就会重新执行 在断点的位置停住

调试中的相关操作:

  1. F10: 程序单步执行,让程序一行一行的执行,这个时候,观察变量的值的变化。
  2. F8:跳到下一个断点处,如果后面没有断点了,则程序执行结束。
let a = 1;
document.write("随");
a = 2;
document.write("便");
a = 3;
document.write("打");
a = 4;
document.write("印");
a = 5;
document.write("个");
a = 6;
document.write("什");
a = 7;
document.write("么");

let age = +prompt('请输入你的年龄');
if (age >= 18) {
  console.log('成年咯');
} else {
  console.log('未成年');
}

苦口婆心一下:代码调试的能力非常重要,只有学会了代码调试,才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试,知识点花点功夫肯定学的会,但是代码调试这个东西,自己不学着用,永远都学不会。

while 语句

// 语法
while(条件){
  // 条件为真时会不断执行这个代码 直到while的条件为假
}

// 死循环 => 只要条件为true 则一直执行对应的代码块 直到条件为假 跳出循环
while (true) {
  alert('有本事就关掉我呀!!');
}

// 需求: 打印100次 我错咯, 主要错在不该呼吸
let count = 1;
while (count <= 100) {
  console.log('我错了,对不起.我就不该呼吸!!');
  count++;
}

Tip: 所以while循环里面的条件的值是会发生变化的 如果没有变化 则容易形成死循环 (后期可以使用break关键字跳出)

提问:

  1. 口述一下while循环的执行逻辑

while语句练习

  • 打印1-100以内 7的倍数
  • 打印1-100以内 所有偶数
  • 打印1-100的和
  • 打印1-100以内所有偶数的和

小结: 循环中很常见四个要素:

  1. 循环变量初始值
  2. 循环的条件
  3. 循环体
  4. 循环变量自增自减运算

for 循环语句

在循环语句当中, 我们可以提取出较为通用的的循环四要素出来

// 语法    
for(循环变量初始值; 循环的条件; 循环变量自增自减运算){
  循环体;
}

Tip: for循环最大的特点是将循环最常见的四个要素集成到语法中了.

for循环语句练习

  • 打印1-100之间所有数
  • 求1-100之间所有数的和
  • 求1-100之间所有数的平均值
  • 求1-100之间所有偶数的和

while 使用场景说明

while 更适合使用在循环的次数不确定时候使用

使用场景练习:

  1. 询问“我爱你,嫁给我吧?”,如果输入为“嫁” 跳出循环打印 “我们形影不离”,否则一直询问
while (true) {
  let result = prompt('我爱你,嫁给我吧?');
  if (result === '嫁') {
    alert('我们形影不离');
    // 跳出循环
    break;
  }
}
  1. 让用户输入用户名和密码,只有当用户名=admin并且用户密码=123456的时候才提示登录成功(跳出循环),否则一直让用户输入
while (true) {
  let username = prompt('请输入用户名?');
  let password = +prompt('请输入密码?');

  if (username === 'admin' && password === 123456) {
    alert('登录成功');
    // 跳出循环
    break;
  }
}    

技巧: 先搭建循环架子 while(true) { 遇到 满足的情况 直接break跳出即可 }

while (true) {
  if (条件) {
    break;
  }
}
// break: 可以用来跳出循环

提问:

  1. while更适合使用在哪里?
  2. for循环更适合使用在哪里?

do while 循环(了解即可)

do while 循环最大的不同的就是while循环是先判断在循环 而do while是先 do 一次 在开始循环 也就是说不管能不能循环 先do一次

// 语法
do{
    // 循环语句
}while(条件)

循环的小结

// 循环语句: 根据条件去循环对应的代码块,可以达到重复去做一件事情
// while循环
// while(条件) {
//   循环体
// }

// 语法:
// do{ 循环体 } while (条件)
// do while 循环是在循环之前先执行一次循环体

// for循环: 当如果明确了循环的次数的时候推荐使用for循环
// 因为四要素集成到了for循环的语法里面 (使用的最多)

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

循环进阶练习

  1. 在网页上打印出一个五行五列的心形

思路说明

有明确的次数, 推荐使用for循环
使用document.write() 打印
五行五列: 双层for循环

提问:

    1. 外层for循环控制的是什么?

      1. 内存for循环控制的是什么?
      2. 使用断点观察双层for循环的执行过程!
    1. 在网页上打印出一个五行递增列的心形 (第一行一列,第二行两列,第三行三列,...)

      五行递增列规律: 当前是多少行, 对应里面就有多少列 => 当前的列数由行数决定 
    2. 在网页上打印99乘法表

      搭建一个9行递增列的效果出来
      使用一个固定是数字表示对应的选项
      将对应的数值替换成行和列

    break和continue

    break 跳出整个循环 => 彻底跳出, 代表循环整体结束

    for (let i = 1; i <= 10; i++) {
      console.log(`张三开始吃第${i}个包子`);
      // 遇到第五个的时候跳出
      if (i === 5) {
        break;
      }
      console.log(`张三吃完第${i}个包子`);
    }

    continue 跳出当前循环 继续下一次的循环 => 跳出当前这一轮的循环,继续下一轮的循环

    for (let i = 1; i <= 10; i++) {
      console.log(`张三开始吃第${i}个包子`);
      // 遇到第五个的时候跳出
      if (i === 5) {
        // 直接跳到 i++
        continue;
      }
      console.log(`张三吃完第${i}个包子`);
    }

    使用场景

    1. break: 一般用于结果已经得到咯, 后续的循环不需要的时候可以使用
    2. continue: 一般用于排除或者跳过某一个选项的时候, 可以使用continue

    练习

    1. 找到1-100之间第一个能被7整除的数
    2. 打印1-10之间所有的数,除了5这个数



    文章评论

    目录