首页 / JAVASCRIPT / Web前端javaScript笔记（三）

Web前端javaScript笔记（三）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Web前端javaScript笔记（三），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含12150字，纯文字阅读大概需要18分钟。

内容图文

 

 

大家好，我是轻风乍起，本人从事前端8年了，总结了很多学习资料，有时间我会普及一些入门和提升建议，思想提升了，路线明确了自然就好了，于是就整理了一些学习笔记，

供大家学习，干货福利内容 在文末↓

 

复习

比较运算符：

==，等于（只判断两侧的数值是否相同） ===全等于（判断数值还判断数据类型）

比较运算符结果一定是布尔值。

 

逻辑运算符：

&& 逻辑与（都真才真，一假则假）

|| 逻辑或（一真则真，都假才假）

! 逻辑非

 

 

短路语法：

隐式转换true : 非0数字（Infinity），非空字符串

隐式转换false: 0, “”,  NaN, undefined, null

 

逻辑与短路语法：(串联) 如果a为真，结果是b;如果a是假，结果是a；

逻辑或短路语法：(并联) 如果a为真，结果是a;如果a是假，结果是b；

 

备用选项：

  1. // 的到用户输入
  2. // 备用选项
  3. var age = parseInt(prompt("请输入年龄")) || 1;
  4. alert("您的年龄是" + age + "岁");

 

 

if(条件表达式) {

    满足条件表达式，执行该语句;

}else {

    不满足条件表达式，执行该语句

}

 

殊途同归： 不管if语句执行哪一个结构体，if语句后面的其他js语句都会执行。
跳楼现象：if语句只会执行一次结构体，立即结束if语句不会反复执行。

  • 条件分支语句
    1. 三元表达式

三元表达式是js中唯一一个需要三个元素参与的表达式。

语法：  条件表达式 ?  值1 : 值2;

计算机会自行计算条件表达式的真假，返回值是布尔值如果结果是true,整个式子结果是值1；

如果表达式结果是false，整个式子结果是值2.

 

 

三元表达式使用的情况：当值是二选一时，使用三元会更简单。

任何三元表达式都可以改为if语句（if语句是最基础的条件表达式）

  1. if(false) {
  2. console.log(1);
  3. }else {
  4. console.log(0);
  5. }

 

 

当工作年限不满1年，工资小于8000，年终奖为工资的1倍，否则是1.2倍；

当工作年限不满2年，工资小于10000，年终奖为工资的1.5倍，否则是1.7倍；

当工作年限为超过2年，工资小于13000，年终奖为工资的2.3倍，否则是3倍；

用户输入年限，工资，输出年终奖

  1. /*
  2. 当工作年限不满1年，工资小于8000，年终奖为工资的1倍，否则是1.2倍；
  3. 当工作年限不满2年，工资小于10000，年终奖为工资的1.5倍，否则是1.7倍；
  4. 当工作年限为超过2年，工资小于13000，年终奖为工资的2.3倍，否则是3倍；
  5. 用户输入年限，工资，输出年终奖
  6. */
  7. // 的到用户年限
  8. var year = parseInt(prompt("请输入年限")) || 0;
  9. // 的到用户工资
  10. var salary = parseInt(prompt("请入工资")) || 2000;
  11. // 声明倍数
  12. var beishu = 0;
  13.  
  14. // 计算倍数
  15. if(year === 0) {
  16. // 当工作年限不满1年，工资小于8000，年终奖为工资的1倍，否则是1.2倍；
  17. beishu = (salary < 8000) ? 1 : 1.2;
  18. }else if(year === 1) {
  19. // 当工作年限不满2年，工资小于10000，年终奖为工资的1.5倍，否则是1.7倍；
  20. if(salary >= 10000) {
  21. beishu = 1.7;
  22. }else {
  23. beishu = 1.5;
  24. }
  25. }else {
  26. // 以上情况都不满足才执行该语句
  27. // 工资小于13000，年终奖为工资的2.3倍，否则是3倍；
  28. beishu = (salary < 13000) ? 2.3 : 3;
  29. }
  30.  
  31. // 输出年终奖
  32. console.log("年终奖是" + beishu * salary);

 

    1. switch语句

开头语句，允许程序去计算一个表示式的值，然后让这个值去匹配case标签。匹配成功执行该case标签的执行体

语法：

switch(表达式) {

      case 值1：

           执行体1;

           break;

     case 值2：

           执行体;

           break;

     ……

      default:

          以上情况都不满足执行的语句;

          break;//default语句中的break可有可无；

}

  1. // 用户输入一个星座，弹出对应的星座
  2. var xingzuo = prompt("请输入你的星座");
  3. switch(xingzuo) {
  4. case "白羊座":
  5. alert("第一星座");
  6. alert("白羊座");
  7. break;
  8. case "巨蟹座":
  9. alert("巨蟹座");
  10. break;
  11. case "水瓶座":
  12. alert("水平座");
  13. break;
  14. default: //default类似else ,以上情况都不满足执行的语句
  15. alert("没有你输入的星座");
  16. alert("换一下");
  17. // default语句中可以书写break或者省略，都会结束switch语句
  18. // break;
  19. }
  20. alert("结束");

 

break作用：在switch语句中,表示满足case匹配情况时 ，不再往下执行其他的case ，跳出switch语句。

 

 

 

 

有时可以利用break语句：

用户输入月份，我们弹出对应的天数

比如2月，弹出28天

1,3,5,7,8,10,12 弹出31天

其他30天

  1. var month = parseInt(prompt("请输入月份"));
  2.  
  3. // 利用break书写switch语句
  4. switch(month) {
  5. // 2月，弹出28天
  6. case 2:
  7. console.log("该月有28天");
  8. break;
  9. case 1:
  10. case 3:
  11. case 5:
  12. case 7:
  13. case 8:
  14. case 10:
  15. case 12:
  16. console.log("该月有31天");
  17. break;
  18. default:
  19. console.log("该月有30天");
  20. }

 

31天case语句能不能书写成

case 1 || 3 || 5 || 7 || 8 || 10 || 12：

计算机遇见表达式都是先计算。结果是case 1:

 

switch语句特殊写法，可以在switch后面的小括号中书写true，在case中书写表达式结果是true匹配switch执行后面的语句。

  1. // 用户输入分数，弹出对应的等级
  2. // 的到用户分数
  3. var score = parseInt(prompt("请输入分数"));
  4. // 弹出对应的等级
  5. switch(true) {
  6. case score < 60:
  7. console.log("不及格");
  8. break;
  9. case score <= 70:
  10. console.log("继续努力");
  11. break;
  12. case score <= 80:
  13. console.log("良好");
  14. break;
  15. default:
  16. console.log("非常不错");
  17. }
  18. console.log("多敲代码");

 

条件分支语句：

if语句最基础使用最广泛的条件分支语句

三元表达式：当值是二选一时使用

switch： 有多种可能值时使用

 

  • 循环语句

循环语句：重复执行一段代码，执行遇见某个指令（条件为假），结束循环语句

for循环，do while， while， for in语句

2.1 for循环语句

for循环是前测试循环语句：先判断条件是否满足，当满足条件时，才执行循环语句。直到条件为假结束循环语句。

for语句比较灵活。

for（循环变量初始值; 条件表达式 ; 步长）{

      循环语句;

}

 

 

原理：for循环判断条件表达式，当条件表达式为真时执行循环语句，直到条件为假时跳出循环。结束循环后再执行for循环后面的语句。

第一次执行：

先执行且只执行一次语句1，然后进行条件的判断语句2，如果满足循环条件，向内执行循环语句3，然后执行语句4变量的改变；如果不满足条件，结束for循环，执行for循环后面的其他js语句；

第二次执行：如果能执行语句4，继续执行语句2，判断判断条件表达式是否满足，如果满足循环条件，向内执行循环语句3，然后执行语句4变量的改变；如果不满足条件，结束for循环，执行for循环后面的其他js语句；

……

当条件为真时，重复执行语句2，语句3，语句4.直到条件为假时，执行后面的其他js语句。（只要想执行循环语句3必须先判断2是满足条件）

 

可以直接根据for原理的到结果。

  1. for(var i = 3; i < 13; i +=3 ) {
  2. console.log(i);
  3. }
  4. console.log("结束");
  5. /*
  6. 第一次执行：i=3,i<13真，才执行循环语句，输出3
  7. 第二次执行：i=6,i<13真，执行循环语句，输出6
  8. 第三次执行：i=9,i<13真，执行循环语句，输出9
  9. 第四次执行：i=12,i<13真，执行循环语句，输出12
  10. 第五次执行：i=15,i<13假，当循环条件为假，才结束for循环
  11. for循环结束才执行后面的其他js语句
  12. 输出“结束”
  13. */

 

for循环中的变量称为循环变量，可以是任意的名字，一般我们习惯书写i,j,k

循环变量是全局变量。可以在任何地方书写，可以书写在for循环外面或者里面。

  1. // 2循环变量是全局变量，循环语句有可能一次都不执行
  2. var i = 3;
  3. for(console.log(++ i); i < 1 ; i ++) {
  4. console.log(i);
  5. }
  6. /*
  7. 第一次执行：i= 3,语句1只会执行一次输出4，i<1假，结束for循环
  8. */

 

 

语句2可以书写为任何条件表达式，只要可以判断真假就可以。

 

  1. // 语句2可以书写成任意形式
  2. for(var i = 4; i != 10; i += 3) {
  3. console.log(i);
  4. }
  5. /*
  6. 第一次执行：i=4, i!=10真，执行循环语句输出4
  7. 第二次执行：i=7, i!=10真，执行循环语句输出7
  8. 第三次执行：i=10, i!=10假，立即结束循环
  9. */

 

循环语句可能会一直循环，这种是死循环。

  1. // 当循环条件为真，循环语句会一直执行
  2. for(var i = 1; i >= 0 ; i ++) {
  3. console.log(i);
  4. }

 

 

  1. for(var i = 3; i < 10 ; i += 3) {
  2. console.log(i);
  3. }
  4. console.log(i);
  5. /*
  6. 第一次执行：i=3,i<10真进入循环语句输出3
  7. 第二次执行：i=6,i<10真进入循环语句输出6
  8. 第三次执行：i=9,i<10真进入循环语句输出9
  9. 第四次执行：i=12,i<10假，立即结束循环语句
  10. 执行后面的其他js语句
  11. console.log(i)12
  12. */

 

for循环里面的循环语句也可以书写为if语句，if结构体想执行必须同时满足for循环条件和if语句的条件。

  1. for(var i = 4; i < 25 ; i +=4) {
  2. // 当i<25,同时i能被5整除才输出i
  3. if(i % 5 == 0) {
  4. console.log(i);
  5. }
  6. }
  7. console.log(i);
  8. /*
  9. 第一次执行：i=4,i<25真，进入循环语句if判断i%5==0假结束if语句3；
  10. 第二次执行：i=8,i<25真，进入循环语句if判断i%5==0假结束if语句3；
  11. 第三次执行：i=12,i<25真，进入循环语句if判断i%5==0假结束if语句3；
  12. 第四次执行：i=16,i<25真，进入循环语句if判断i%5==0假结束if语句3；
  13. 第五次执行：i=20,i<25真，进入循环语句if判断i%5==0真执行if语句输出20；
  14. 第六次执行：i=24,i<25真，进入循环语句if判断i%5==0假结束if语句
  15. 第七次执行：i=28,i<25假，结束for循环语句
  16. 执行后面的其他js语句输出i=28
  17. */

 

for循环嵌套for循环，一层一层去执行，每一层for循环变量不同。

  1. for(var i = 1 ; i < 4; i ++) {
  2. for(var j = 1; j < 4 ; j ++) {
  3. console.log(i,j);
  4. }
  5. }
  6. console.log(i,j);
  7. /*
  8. 第一次：i=1,i<4真，进入循环语句j=1,j<4真，(1,1),j++
  9.    j=2,j<4真，(1,2),j++
  10.    j=3,j<4真，(1,3),j++
  11.    j=4,j<4假结束j循环
  12. 第*次：i=2,i<4真，进入循环语句，j=1,j<4真（2,1）j++
  13.    j=2,j<4真，(2,2),j++
  14.    j=3,j<4真，(2,3),j++
  15.    j=4,j<4假结束j循环
  16.  
  17. 第*次：i=3,i<4真，进入循环语句，j=1,j<4真（3,1）j++
  18.    j=2,j<4真，(3,2),j++
  19.    j=3,j<4真，(3,3),j++
  20.    j=4,j<4假结束j循环
  21.  
  22. 第*次：i=4,i<4假，结束i循环。执行后面的其他js语句
  23. 输出（i=4,j=4）
  24. */

 

2.2 穷举思想

概念：我们经常想得到一组数据，有一些特定的要求，计算机没法自己帮我们输出这些数据。我们人为的需要编写一段程序，让计算机去帮我们实现程序。将所有的可能情况，一一的列举出来，然后我们人为限定判断条件，把符合条件的数据就给它输出，不满足的就跳过，继续验证下一个数据是否满足条件，直到把所有可能情况都验证一个遍。这个方法就叫做全举法，也叫穷举法。

外层：一一列举，for循环。

内层：进行判断，if语句。

案例1：在控制台输出一个数的所有约数。

约数概念：a %b ==0，那么a叫做b的倍数，b叫做a的约数或者因数。

一个数的约数，最小是1，最大是它本身。

 

  1. // 用户输入一个正数，输出这个数所有的约数
  2. // 比如用户输入12   约数1,2,3,4,6,12
  3. // 的到用户输入
  4. var num = parseInt(prompt("请输入数字"));
  5. // 输出约数
  6. // 约数范围区间1-数字本身，将这些可能性一一列举
  7. for(var i = 1; i <= num; i ++) {
  8. // 只输出约数
  9. // 整除
  10. if(num % i == 0) {
  11. // 这个i才是约数，输出
  12. console.log(i);
  13. }
  14. }

2.3 累加器和累乘器

累加器：有时我们在计算时不想知道直接的过程，只想要最终的数值，有一个满足条件的结果就自加1.

注意：

1 累加器变量，必须书写在for外面（以防变量被每次重置为0），初始值设置0.

2 当有满足条件的数值，累加器自加1

3 最终的结果也必须书写在for循环外面。

  1. // 用户输入数字，输出约数的总个数
  2. // 的到用户的输入
  3. var num = parseInt(prompt("请输入数字"));
  4. // 输出总个数
  5. // 累加器必须书写在for外面初始值0
  6. var sum = 0;
  7. // 一一列举所有的可能性
  8. for(var i = 1; i <= num ; i ++) {
  9. if(num % i == 0) {
  10. // i是num的约数，累加器自加1
  11. sum ++;
  12. }
  13. }
  14. //累加器最终结果在for结束输出
  15. console.log(sum);

 

累乘器：我们不想要中间的过程，想需要得到最终的乘积

1 累乘器变量，必须书写在for外面（以防变量被每次重置为1），初始值设置1.

2 当有满足条件的数值，累加器自乘

3 最终的结果也必须书写在for循环外面。

 

阶乘：比如4! = 4*3*2*1

  1. // 用户输入数字，输出该数阶乘
  2. // 的到用户的输入
  3. var num = parseInt(prompt("请输入数字"));
  4. // 输出阶乘
  5. // 累乘器必须书写在for循环外面，初始值是1
  6. var cheng = 1;
  7. // 阶乘1-num
  8. for(var i = 1 ; i <= num ; i ++) {
  9. // 阶乘
  10. cheng *= i;
  11. }
  12. // 结果在最终输出
  13. console.log(cheng);

 

案例：用户输入一个数字，判断这个数是不是质数

质数：除了1和他本身两个约数之外没有其他约数。比如3

合数：除了1和他本身两个约数之外还有其他约数。比如4

1既不是质数也不是合数。

  1. // 的到用户输入
  2. var num = parseInt(prompt("请输入数字"));
  3. // 找约数总个数
  4. // 累加器,变量必须书写在for循环外初始值0
  5. var sum = 0;
  6. // num约数的所有可能性一一列举for循环
  7. for(var i = 1 ; i <= num; i ++) {
  8. // 找约数
  9. if(num % i === 0) {
  10. // i是num的约数
  11. // 总个数
  12. sum ++;
  13. }
  14. }
  15. // 最终sum值在for循环外面输出
  16. // console.log(sum);
  17. // 判断是不是质数
  18. // sum如果是2那么num是质数
  19. if(sum === 2) {
  20. console.log(num + "是质数");
  21. }else {
  22. console.log(num + "不是质数");
  23. }

 

2.4 do while

do while后测试循环语句，先执行循环语句，再进行出口判断，如果条件为真，再次执行循环语句……

如果条件为假，结束循环语句，执行后面的其他js语句

 

注意：循环变量必须书写在外面，防止被清空。

语法：do {

     循环语句;

}while(条件表达式)

  1. // 循环变量必须书写do while语句的外面
  2. var i = 3;
  3. do {
  4. console.log(i);
  5. i += 3;
  6. }while(i < 10);

 

do while循环语句至少会执行一次。

  1. // do while循环语句至少会执行一次
  2. // 循环变量必须书写在外面
  3. var i = 3;
  4. do {
  5. console.log(i ++);
  6. i += 2;
  7. }while(i > 8)
  8.  
  9. console.log(i);
  10. /*
  11. i=3,执行循环语句输出i++,输出3，i自加(i = 6);进行出口判断i > 8假结束循环。
  12. 执行循环后面的其他js语句
  13. 输出i= 6;
  14. */

2.5 while

while语句：前测试循环语句，先判断条件，当条件为真，才执行循环语句

注意：循环变量必须书写在外面，防止被清空。

 

while(条件表达式) {

循环语句；

}

  1. // 循环变量必须书写在语句的外面
  2. var i = 3;
  3. while(i < 10) {
  4. console.log(i);
  5. i += 3;
  6. }
  7. /*
  8. i=3,i<10真，进入循环语句，输出3，i=6
  9. i=6,i<10真，再次进入循环语句，输出6，i=9
  10. i=9,i<10真，再次进入循环语句，输出9，i=12
  11. i=12,i<10假，结束循环
  12. */

 

所有while都可以使用for书写。

  1. // 改为for语句
  2. for(var i = 3; i < 10 ; i += 3) {
  3. console.log(i);
  4. }
  5. /*
  6. i=3,i<10真，进入循环语句输出3
  7. i=6,i<10真，进入循环语句输出6
  8. i=9,i<10真，进入循环语句输出9
  9. i=12,i<10假，结束循环
  10. */

 

while输出语句位置非常重要

  1. // 输出语句位置非常重要
  2. // 循环变量必须书写在语句的外面
  3. var i = 3;
  4. while(i < 10) {
  5. i += 3;
  6. console.log(i);
  7. }
  8. /*
  9. i=3,i<10真，进入循环语句i=6,输出6
  10. i=6,i<10真，进入循环语句i=9,输出9
  11. i=9,i<10真，进入循环语句i=12,输出12
  12. i=12,i<10假，结束循环语句
  13. */

想要学习前端的小伙伴，可以加qq群：728700491 分享你前端资料

内容总结

以上是互联网集市为您收集整理的Web前端javaScript笔记（三）全部内容，希望文章能够帮你解决Web前端javaScript笔记（三）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/739899.html

来源：【匿名】