JavaScript学习总结(二)

文章目录[x]
  1. 1:条件判断语句
  2. 1.1:if...else语句
  3. 1.2:switch语句
  4. 2:循环语句
  5. 2.1:for语句
  6. 2.2:do...while语句
  7. 2.3:while语句
  8. 2.4:for...in 语句

条件判断语句

if...else语句

当if里的逻辑条件为真,执行一个语句。当这个条件为假,使用可选择的 else 从句来执行这个语句。例如:

if(condition){  //条件判断
    statement_1;  //条件为真执行
}else{
    statement_2; //其他情况
}

condition可以是任何返回结果备计算为true或false的表达式,通常0,false,undefined,null,Nan,""均为假。

你也可以组合语句通过使用 else if 来测试连续多种条件判断

if (condition_1) {
  statement_1;
}else if (condition_2) {
  statement_2;
}else if (condition_n) {
  statement_n;
}else {
  statement_last;
}

switch语句

switch语句一个程序求一个表达式的值并且尝试去匹配表达式的值到一个case标签,如果匹配成功,程序执行相关的语句

switch (expression) {
   case label_1:
      statements_1;
      [break;]
   case label_2:
      statements_2;
      [break;]
   ...
   default:
      statements_def;
      [break;]
}

可选的 break 语句与每个 case 语句相关联, 保证在匹配的语句被执行后程序可以跳出 switch 并且继续执行 switch 后面的语句。如果break被忽略,则程序将继续执行switch语句中的下一条语句。

循环语句

for语句

一个for循环语句会一直重复执行,直到指定循环条件为假。语句格式如下:

for ([initialExpression]; [condition]; [incrementExpression]){
  statement_1;
  statement_2;
  ...
  }

例如使用for循环语句遍历图片地址更换主题背景:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0%;
            margin: 0%;
        }
        body{
            background: url('img/QingMingHuangShan.jpg');
        }
        .baidu{
            border: 1px solid seashell;
            margin: 100px auto;
            height: 113px;
            width: 1005px;
        }
        .baidu li {
            list-style: none;
            float: left;
        }
        .baidu li img{
            width: 200px;
            padding-left: 1px;
        }

    </style>
</head>
<body>
    <ul class="baidu">
        <li><img src="img/BrightonJetty.jpg"></li>
        <li><img src="img/CastleDay.jpg"></li>
        <li><img src="img/MalhamStars.jpg"></li>
        <li><img src="img/PinkMoon.jpg"></li>
        <li><img src="img/QingMingHuangShan.jpg"></li>
    </ul>
    <script>
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        for(var i = 0;i < imgs.length; i++){
            imgs[i].onclick = function(){
                document.body.style.backgroundImage = 'url(' + this.src +')';
            }
        }
    </script>
</body>
</html>

do...while语句

do...while 语句一直重复直到指定的条件求值得到假值(false)。 一个 do...while 语句结构:

do{
  statement
}while (condition);

statement 在检查条件之前会执行一次。要执行多条语句(语句块),要使用块语句({ ... })包括起来。 如果 condition 为真(true),statement 将再次执行。 在每个执行的结尾会进行条件的检查。当 condition 为假(false),执行会停止并且把控制权交回给 do...while 后面的语句。

在下面的例子中, 这个 do循环将至少重复一次,并且一直重复直到 i不再小于 5为止。

var i = 0;
do {
  i += 1;
  console.log(i);
} while (i < 5);

while语句

一个 while 语句只要指定的条件求值为真(true)就会一直执行它的语句块。

while (condition){
  statement;
  }

如果这个条件变为假,循环里的 statement 将会停止执行并把控制权交回给 while 语句后面的代码。

在下面例子中,只要 n 小于 3,下面的 while 循环就会一直执行:

var n = 0;
var x = 0;
while (n < 3) {
  n++;
  x += n;
}

for...in 语句

for...in 语句循环一个指定的变量来循环一个对象所有可枚举的属性。JavaScript 会为每一个不同的属性执行指定的语句。

for (variable in object) {
  statements;
}

下面的函数通过它的参数得到一个对象和这个对象的名字。然后循环这个对象的所有属性并且返回一个列出属性名和该属性值的字符串。

function dump_props(obj, obj_name) {
  var result = "";
  for (var i in obj) {
    result += obj_name + "." + i + " = " + obj[i] + "<br>";
  }
  result += "<hr>";
  return result;
}
点赞

发表评论

昵称和uid可以选填一个,填邮箱必填(留言回复后将会发邮件给你)
tips:输入uid可以快速获得你的昵称和头像

Title - Artist
0:00