重新回顾JS的笔记系列(五）

1. switch 语句

switch 语句可以替代多个 if 判断。

switch 语句为多分支选择的情况提供了一个更具描述性的方式。

语法结构：

switch 语句有至少一个 case 代码块和一个可选的 default 代码块。

switch(x) {
  case 'value1':  // if (x === 'value1')
    ...
    [break]

  case 'value2':  // if (x === 'value2')
    ...
    [break]

  default:
    ...
    [break]
}

开始switch 之后，根据x的值会进入不同的case，然后继续向下运行。

例子：

let a = 2 + 2;

switch (a) {
  case 3:
    alert( 'Too small' );
    break;
  case 4:
    alert( 'Exactly!' );
    break;
  case 5:
    alert( 'Too big' );
    break;
  default:
    alert( "I don't know such values" );
}

注意1：如果没有 break，程序将不经过任何检查就会继续执行下一个 case。

例子：

无 break 的例子：

let a = 2 + 2;

switch (a) {
  case 3:
    alert( 'Too small' );
  case 4:
    alert( 'Exactly!' );
  case 5:
    alert( 'Too big' );
  default:
    alert( "I don't know such values" );
}

此处，因为没有break，那么从case: 4开始，程序会一直进行，直到switch结束。

结果会输出：

Exactly!Too bigI don't know such values

注意2：switch 和 case 都允许任意表达式。

换句话来说就是，在它们的条件部分可以进行计算之后再进行判定。

比如：

let a = "1";
let b = 0;

switch (+a) {
  case b + 1:
    alert("this runs, because +a is 1, exactly equals b+1");
    break;

  default:
    alert("this doesn't run");
}

这里 +a 返回 1，这个值跟 case 中 b + 1 相比较，然后执行对应的代码。

注意3：switch里的判定条件是严格相等,注意此处必须输入值和case的数据类型一样且相等才可以触发case。

例子：

let arg = prompt("Enter a value?")
switch (arg) {
  case '0':
  case '1':
    alert( 'One or zero' );  //此处使用的是"case"分组
    break;

  case '2':
    alert( 'Two' );
    break;

  case 3:
    alert( 'Never executes!' );
    break;
  default:
    alert( 'An unknown value' )
}

2.函数

函数声明

格式：

function showMessage() {
  alert( 'Hello everyone!' );
}

/*
function 函数名（参数1，参数2，参数3）{
   函数的内容
}
*/

//调用函数
showMessage();

局部变量

简而言之就是在函数内部的变量，只能在函数内部使用，外部无法调用这个变量。

例子：

例如：

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // 局部变量

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- 错误！变量是函数的局部变量

外部变量

简而言之就是函数外部的变量，函数也可以调用外部的变量。

let userName = 'John';

function showMessage() {
  let message = 'Hello, ' + userName;
  alert(message);
}

showMessage(); // Hello, John

注意：在函数内部修改了外部变量之后，变量还是会更改

let userName = 'John';

function showMessage() {
  userName = "Bob"; // (1) 改变外部变量

  let message = 'Hello, ' + userName;
  alert(message);
}

alert( userName ); // John 在函数调用之前

showMessage();

alert( userName ); // Bob，值被函数修改了

函数参数

通过参数，可以直接将任意的参数传递给函数

例子：

function showMessage(from, text) {

  from = '*' + from + '*'; // 让 "from" 看起来更优雅

  alert( from + ': ' + text );
}

let from = "Ann";

showMessage(from, "Hello"); // *Ann*: Hello

// "from" 值相同，函数修改了一个局部的副本。
alert( from ); // Ann

默认值

如果一个函数被调用，但有参数（argument）未被提供，那么相应的值就会变成 undefined。

例子：

function showMessage(from, text = "no text given") {
  alert( from + ": " + text );
}

showMessage("Ann"); // Ann: no text given

如果此处text没有被设定，此处输出值将会是： Ann: undefined

类似的操作如下：

function showMessage(text) {
  // 如果 text 为 undefined 或者为假值，那么将其赋值为 'empty'
  text = text || 'empty';
  ...
}

rerurn返回值

 1. return 后面可以跟表达式例如“a+b”
    2. rerurn 后面可以跟空值时，会输出undefined
    3. return后面默认有一个分号，所以在return 和 返回值之间不要另起一行，否则return后面默认空值

3.函数表达式

在JS当中有两种声明函数的方法。

第一种：

function sayHi() {
  alert( "Hello" );
}

第二种就是函数表达式:

let sayHi = function() {
  alert( "Hello" );
}; //注意此处是有分号的

两者都是将函数作为一个值存储到一个变量当中，所以当你使用alert来打印这个sayHi的时候，它出现的不是Hello而是sayHi函数内部的语句。

函数在JS当中是被当做一个值的，意思就是他可以被复制给其他的变量

例子：

function sayHi() {   // (1) 创建
  alert( "Hello" );
}

let func = sayHi;    // (2) 复制

func(); // Hello     // (3) 运行复制的值（正常运行）！
sayHi(); // Hello    //     这里也能运行（为什么不行呢）

注意，sayHi 后面没有括号。如果有括号，func = sayHi() 会把 sayHi() 的调用结果写进func，而不是 sayHi 函数本身。

4. 函数表达式与函数声明的差别

写法上的差异（具体参考上方的整理）
函数表达式是在代码执行到达时被创建，并且仅从那一刻起可用。
在函数声明被定义之前，它就可以被调用。

例子：

例如下面的代码会正常工作：

sayHi("John"); // Hello, John

function sayHi(name) {
  alert( `Hello, ${name}` );
}

……如果它是一个函数表达式，它就不会工作：

sayHi("John"); // error!

let sayHi = function(name) {  // (*) no magic any more
  alert( `Hello, ${name}` );
};

严格模式下，当一个函数声明在一个代码块内时，它在该代码块内的任何位置都是可见的。但在代码块外不可见。

例子：

下面是另一个例子：

let age = 16; // 拿 16 作为例子

if (age < 18) {
  welcome();               // \   (运行)
                           //  |
  function welcome() {     //  |
    alert("Hello!");       //  |  函数声明在声明它的代码块内任意位置都可用
  }                        //  |
                           //  |
  welcome();               // /   (运行)

} else {

  function welcome() {
    alert("Greetings!");
  }
}

// 在这里，我们在花括号外部调用函数，我们看不到它们内部的函数声明。


welcome(); // Error: welcome is not defined

为了解决上一个问题可以采用函数表达式

例子：

let age = prompt("What is your age?", 18);

let welcome;

if (age < 18) {

  welcome = function() {
    alert("Hello!");
  };

} else {

  welcome = function() {
    alert("Greetings!");
  };

}

welcome(); // 现在可以了

也可以采用三目运算符来完成：

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  function() { alert("Hello!"); } :
  function() { alert("Greetings!"); };

welcome(); // 现在可以了

5. 箭头函数

形式（单行）：

let func = (arg1, arg2, ..., argN) => expression;

例子：

让我们来看一个具体的例子：

let sum = (a, b) => a + b;

/* 这个箭头函数是下面这个函数的更短的版本：

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

这里同样可以使用三目运算符

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  () => alert('Hello!') :
  () => alert("Greetings!");

welcome();

形式（多行）：

let func = (arg1, arg2, ..., argN) => {expression};

例子：

let sum = (a, b) => {  // 花括号表示开始一个多行函数
  let result = a + b;
  return result; // 如果我们使用了花括号，那么我们需要一个显式的 “return”
};

alert( sum(1, 2) ); // 3

Last modified on 2023-03-06