JavaScript流程控制语句

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript流程控制语句，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5514字，纯文字阅读大概需要8分钟。

内容图文

标题流程控制语句

一、回顾

1、数据类型：六大数据类型

• 五大基本数据类型
  • number 数值
    • 1 3.14 NaN infinity 八进制，十六进制
    • 注意：小数不要作为判断条件，以0开头并且没有超过8的数默认是八进制
  • string 字符串
    • 引号引起来 “” ‘’
    • 注意：length：获取字符串的长度 charAt(下标)：获取对应下标位置的字符
  • boolean
    • true，false
    • 判断结果，判断条件
  • null与undefined
    • null：空对象，访问一个不存在对象返回的值
    • undefined：未定义，变量声明，但是没有赋值
    • 注意：… of null /… of undefined,100%标签获取的不对
• 复杂类型
  • object
    • { ”name“:“web”,“age”:18} : 键值对存储
    • obj.name
  • array:存储数据的容器，可以存储任意多个，可以存储任意类型
    • [1,[],“1”,true]
    • length:获取数组元素的个数， arr[下标]：获取数组对应下标的元素
  • function：存储一段代码，在需要的时候调用
    • 声明函数：function 函数名(){ 存储的代码 }
    • 调用函数：函数名()
  • typeof 检测数据类型
  • typeof(要检测的数值)
  • typeof 要检测的数值
  • number—number
    string-string
    boolean-boolean
    null-object
    undefined-undefined
  • object-object array-object function-function

2、数据类型之间转换

强制转换–通过方法，一定要转换某种数据类型，隐式转换：运算过程中，自己的转换

• 转换为number
  • Number(要转换的内容)：boolean，null，string（纯数值或者空字符）
  • parseInt(要转换的内容)：取整，舍弃掉小数部分
  • parseFloat(要转换的内容)：保留小数
• 转换为string
  • String（要转换的内容）:全局，所有的类型都可以用
  • toString（要转换的内容）：对象的方法，null和undefined没有
  • {}–》"[object Object]" [1,2]—>“1,2”
• 转boolean
  • 假：0 false null undefined “” NaN

3、运算符

• 算术运算符

  • ++ ++在前，先自己，后运算， ++在后，先运算，再自加
    var a = 10;
    var b = a++; //b=a=10 a=11
    console.log(a++,++b);//11 11

• 赋值运算符

  • = += -= *= /= %=

  • +=：累加

    var x = 10;
    x += 10; //x = x+10

• 比较运算符

  • ”> >= < <= == != === !==“

    字符串和字符串比较的时候是一位一位比较，并且比较的是编码 ”0“-48 ”A”-65 “a”-97
    和数值进行运算的时候，都会隐式转换，尽可能转换为数值

    == ： 比较的过程中，会进行隐式转换
    ===：不会进行隐式转换，必须所有的类型，值都必须一样才是相等

• 逻辑运算符

  • && || ！

• 三目运算符

  • 条件 ？条件成立时执行：条件不成立时执行

二、流程控制语句

1、流程控制的组成

• 顺序结构
• 分支语句(选择结构)： if if-else switch
• 循环语句： for while do-while for-in

2、分支语句

• if(条件){ 条件成立时执行的代码 }

  //if(条件){ 条件成立时执行的代码 }
  //如果今天是周六，睡懒觉
  var day = 3;
  if(day==6){
  console.log(“睡懒觉”);
  }

  //如果 工资有10k，买房，找对象
  var gz = 12000;
  if(gz >= 10000){
  console.log(“买房”);
  console.log(“找对象”);
  }

  注意：if后面的大括号可以省略，如果省略，只能控制紧跟在if后面的一行语句
  var gz = 9999;
  if(gz >= 10000)
  console.log(“买房”);
  console.log(“找对象”);

• if-else

  if(条件){ 条件成立时执行的代码 }else{ 条件不成立时执行的代码 }

  var money = 100;

  //如果有100买房，没有就睡觉
  if(money >= 100){
  //条件成立时执行的代码
  console.log(“买房”);
  }else{
  //条件不成立时执行的代码
  console.log(“睡觉在梦里买房”);
  }

• if-else if

  if(条件){ 条件成立时执行的代码}else if(条件){ 条件成立时执行的代码}else if…

  var s = 78;
  if(s >= 90){
  console.log(“优秀，一个鸡蛋”);
  }else if(s >= 80){
  console.log(“良好，一篇出师表”);
  }else if(s >= 70){
  console.log(“一般，一篇离骚”);
  }else if(s >= 60){
  console.log(“及格，三个页面”);
  }else{
  console.log(“不及格,抄十遍出师表”);
  }

• switch
  switch(){
  case 情况1 ： 匹配到情况1以后执行的代码；break；
  case 情况2 ： 匹配到情况2以后执行的代码；break；
  case 情况3 ： 匹配到情况3以后执行的代码；break；
  case 情况4 ： 匹配到情况4以后执行的代码；break；
  default：没有匹配到以后执行的代码
  }
  break：防止穿透，如果不加break，只要匹配到一项，后面的就不会再判断，直接执行
  如果简单的 数值 字符串比较，使用switch

var s = “";
switch(s){ //s==
case “+” : console.log(100+10);break;
case “-” : console.log(100-10);break;
case "” : console.log(100*10);break;
case “/” : console.log(100/10);break;
default : console.log(“不够聪明，算不了”);
}

3、获取元素

• 通过id名

  • document.getElementById(“id名”)

• 通过标签名

  • 获取文档中对于名字的标签：
    document.getElementsByTagName(“标签名”)

  //document.getElementsByTagName(“标签名”)：在
  var lis = document.getElementsByTagName(“li”);
  console.log(lis);//HTMLCollection(10) [li#li, li, li, li, li, li, li, li, li, li, li: li#li] 类似数组
  console.log(lis.length);//10

  //集合不能直接使用，必须通过下标，获取到具体的元素后使用
  console.log(lis[0]);

  lis[0].onclick = function(){
  alert(“弹弹弹弹,弹走鱼尾纹”);
  }

获取对应父元素中的标签：父元素.getElementsByTagName(“标签名”)

//3.获取父元素中的li
var oUl = document.getElementById("list");
var lis1 = oUl.getElementsByTagName("li");
console.log(lis1);

• 通过类名获取

  • 获取文档中对于类名的标签：
    document.getElementsByClassName(“类名”)

  • 获取对应父元素中的标签：
    父元素.getElementsByClassName(“类名”)

    //4.通过类名获取元素,className IE8不兼容，
    console.log(document.getElementsByClassName(“box”)); //3
    console.log(oUl.getElementsByClassName(“box”)); //3

• 区别：

  tagName动态获取，之前没有后面添加以后，依然可以使用
  id静态获取，获取的时候没有就是没有
  var oUl = document.getElementById(“list”);

  var oLi = document.getElementById(“h”);
  console.log(oLi);//null

  var lis = document.getElementsByTagName(“li”);
  console.log(lis);//[]

  //在父元素中添加一个li
  oUl.innerHTML = “

• 哈哈哈哈，马上就可以休息了
• ”;

  console.log(oLi); //null
  console.log(lis); //HTMLCollection [li#h, h: li#h]

4、循环结构

• for循环：让一段代码执行特定的次数

• 语法

  表达式：声明，判断，赋值 运算

  for(表达式一；表达式二；表达式三){ 循环体 }

  for(初始化循环变量；循环条件；更新循环变量){ 循环体}

      1.初始化循环变量 var i = 0;
      2.判断循环条件  i<5 
          条件成立，执行3
          条件不成立：结束循环
      3.执行循环体
      4.更新循环变量  i++ 1
      5.执行2
  
      一定要有结束条件,否则会变成死循环
  

for(var i = 0;i < 5;i++){
console.log(i);//0
}

内容总结

以上是互联网集市为您收集整理的JavaScript流程控制语句全部内容，希望文章能够帮你解决JavaScript流程控制语句所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

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

内容手机端