【蓝桥杯JavaScript基础入门】二、JavaScript关键特性

条件语句

if...else...

javascript 复制代码

if (condition) {
    // true
} else {
    // false
}

嵌套if...else...

javascript 复制代码

if (condition1) {
    // condition1 is true
    if (condition2) {
        // condition2 is true
    }
} else if (condition3) {
    // condition3 is true
} else {
    // condition1 and condition3 are false
}

switch case

javascript 复制代码

switch (value) {
    case value1:
        // code1
        break;
    case value2:;
        // code2
        break;
    default:
        // 默认值
        break;
}

三元运算符

javascript 复制代码

条件表达式 ? // true : // false;

循环语句

for循环

javascript 复制代码

for (var i = start; i < end; i++) {
}

其中 i++ 表示每次循环后 i 自增一，也可以是其它增量。

while语句

javascript 复制代码

while (condition) {
}

先检测条件，条件语句为真继续执行循环中的语句。

do...while语句

javascript 复制代码

do {
    // 代码
} while (condition);

先执行语句，再判断条件语句，条件为真则进行下一次循环。

continue

在循环语句中使用，忽略后续语句直接进入下一循环。

break

在循环语句中使用，结束循环。

函数

浏览器内置函数

浏览器有许多已经封装好的内置函数，可以直接调用（严格来说，内置浏览器函数并不是函数，是方法）。

创建函数

声明

javascript 复制代码

function functionName(parameters) {
    // 函数代码
}

表达式

函数可以通过一个表达式定义，存储在变量中。

javascript 复制代码

var functionName = function (parameters) {
    // 函数代码
};

声明定义 vs 表达式定义

声明定义：JavaScript 解析器首先会把当前作用域的函数声明提前到整个作用域的最前面。

表达式定义：同定义其它基本类型的变量一样，只在执行到某一句时也会对其进行解析。

参数

形参

函数定义时使用，无值。

实参

函数调用时使用，有值。

形参个数和实参个数可以不相等。

JS 中函数没有重载。

返回值

无 return 语句

默认返回值是 undefined.

有 return 语句

其后有值：返回该值；其后无值：返回 undefined.

return 语句后所有代码都不会执行。

匿名函数

匿名函数就是没有命名的函数，一般用在绑定事件的时候。

javascript 复制代码

function() {
    // 语句
}

匿名函数是表达式创建函数。

一般使用函数声明来创建功能函数；使用匿名函数来运行负载的代码来响应事件触发（点击按钮）。

自调用函数

匿名函数不能通过直接调用来执行，通过自调用的方式来执行。如：

javascript 复制代码

(function () {
  alert("hello");
})();

挑战：制作直角三角形

新建 triangle.html 文件，输入如下代码：

javascript 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>打印直角三角形</title>
        <script>
            function printStars(n) {
                // 验证输入是否为正整数
                n = parseInt(n);
                if (isNaN(n) || n <= 0) {
                    document.write("请输入一个正整数！");
                    return;
                }
                
                var p = "";
                for (var i = 1; i <= n; i++) {
                    p += "*";
                    document.write(p + "<br>");
                }
            }
        </script>
    </head>
    <body>
        <script>
            var n = prompt("请输入一个正整数");
            printStars(n);
        </script>
    </body>
</html>

右击选择Open with Live Server:

点击 triangle.html:

弹出提示词：

输入一个正整数，我输入的6，结果如下：