2、JavaScript基础之关键特性-条件、循环、函数

一、条件语句

if…else语句

• 最基本的if…else语句， 他的语法为：

if (条件) {
  // 当条件为 true 时执行的语句
} else {
  // 当条件为 false 时执行的语句
}

• 举例：

if (3 > 2) {
  console.log("我真帅");
} else {
  console.log("不可能");
}

• if…else 嵌套。它的语法是：

if(条件 1){
    // 当条件 1 为 true 时执行的代码
    }
else if(条件 2){
    // 当条件 2 为 true 时执行的代码
    }
else{
    // 当条件 1 和 条件 2 都不为 true 时执行的代码
    }

switch case语句

• 语法：

switch(k){
    case 1:
        执行代码块 1 ;
        break;
    case 2:
        执行代码块 2 ;
        break;
    default:
        默认执行（k 值没有在 case 中找到匹配时）;
}

三元运算符

• 语法：

// 条件为true执行结果1，否则执行结果2
条件表达式？结果 1:结果 2

• 举例：

3 > 2 ? console.log("3 比 2 大") : console.log("3 比 2 小");

二、循环语句

for 循环

• 语法结构：

for (初始化; 条件; 增量) {
  循环代码;
}

• 举例：

for (var i = 1; i <= 100; i++) {
  console.log(i);
}

使用 break 跳出循环

• 我们在前面的 switch case 结构中已经见过 break 语句了，当 switch 语句中符合输入表达式的情况满足时，break 语句立即退出 switch 语句并移动到之后的代码。上述的 for 循环例子，我们来加个条件，使其能打印一个能被 7 整除的整数。

for (var i = 1; i <= 100; i++) {
  if (i % 7 == 0) {
    console.log(i);
    break;
  }
}

使用 continue 跳过迭代

• 使用 continue 跳过迭代，不是完全跳出循环，而是跳过当前循环而执行下一个循环。比如我们使用 continue 可以实现打印 1 到 100 所有能被 7 整除的整数，而前面的例子中只能打印出：7。

for (var i = 1; i <= 100; i++) {
  if (i % 7 == 0) {
    console.log(i);
    continue;
  }
}

while 语句 和 do while 语句

• while 循环的语法结构：

while (条件) {
  // 需要执行的代码;
}

• 同样的，我们来写一个打印 1 到 100 之间整数的例子：

var i = 1;
while (i <= 100) {
  console.log(i);
  i++;
}

• do while 循环的语法结构：

do {
  // 需要执行的代码;
} while (条件);

• 举例：

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

• 而这两者的区别是，do while 循环在检测条件之前就会执行，也就是说，即使条件为 false，do while 也会执行一次循环代码。而 while 循环只有在条件为真的时候才执行。 可以这样简单记忆：while 循环，先判断再执行；do while 循环先执行一次再判断。

三、函数

函数声明创建函数

• 语法：

function functionName(parameters) {
  // 执行的代码
}

• 举例：

function f(a, b) {
  console.log(a + b);
} // 创建一个名为 f 的函数，它有两个形参 a，b

f(2, 3); // 调用函数 f，传入实参 2 和 3，最终运行结果为在控制台上打印出 5

函数表达式创建函数

• JavaScript 函数可以通过一个表达式定义。函数表达式可以存储在变量中。语法为：

var functionName = function (parameters) {
  // 执行的代码
};

• 把函数声明创建函数的例子改写为用函数表达式创建函数：

var f = function (a, b) {
  console.log(a + b);
};
f(2, 3);

函数声明和函数表达式的区别

• 函数声明

// 此处的代码执行没有问题，JavaScript 解析器首先会把当前作用域的函数声明提前到整个作用域的最前面。
f(2, 3);

function f(a, b) {
  console.log(a + b);
}

• 函数表达式

// 报错：f is not a function
// 这是因为函数表达式，如同定义其它基本类型的变量一样，只在执行到某一句时也会对其进行解析

f(2, 3);

var f = function (a, b) {
  console.log(a + b);
};

函数的参数

• 形参：function f(a, b){return a + b;} // a, b 是形参，占位用，函数定义时形参无值。
• 实参：当我们调用上面的函数时比如 f(2, 3);其中 2 和 3 就是实参，会传递给 a 和 b，最后函数中执行的语句就变成了：return 2 + 3;。
• 在 JavaScript 中，实参个数和形参个数可以不相等。
• 在 JavaScript 中没有重载

// 三个参数的 f 把两个参数的 f 覆盖，调用的是三个参数的 f，最后执行结果为 NaN，而不是 11。
function f(a, b) {
  return a + b;
}
function f(a, b, c) {
  return a + b + c;
}
var result = f(5, 6);
result; // returns NaN

在 JavaScript 中函数的返回值

• 如果函数中没有 return 语句，那么函数默认的返回值是：undefined。
• 如果函数中有 return 语句，那么跟着 return 后面的值就是函数的返回值。
• 如果函数中有 return 语句，但是 return 后面没有任何值，那么函数的返回值也是：undefined。
• 函数在执行 return 语句后会停止并立即退出，也就是说 return 语句执行之后，剩下的代码都不会再执行了。
• 当函数外部需要使用函数内部的值的时候，我们不能直接给予，需要通过 return 返回。比如：

var f = function (a, b) {
  a + b;
};
console.log(f(2, 3)); // 结果为 undefined

var f = function (a, b) {
  return a + b;
};
console.log(f(2, 3)); // 结果为 5

匿名函数

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

function(){
    // 执行的代码
}

• 举例：

var myButton = document.querySelector("button");

myButton.onclick = function () {
  alert("hello");
};
// 将匿名函数分配为变量的值，也就是我们前面所讲的函数表达式创建函数。一般来说，创建功能，我们使用函数声明来创建函数。使用匿名函数来运行负载的代码以响应事件触发（如点击按钮），使用事件处理程序。

自调用函数

• 匿名函数不能通过直接调用来执行，因此可以通过匿名函数的自调用的方式来执行。比如：

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