@[toc]

函数表达式

在 JavaScript 中，函数不是“神奇的语言结构”，而是一种特殊的值。

我们在前面章节使用的语法称为 函数声明：

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

另一种创建函数的语法称为 函数表达式。

它允许我们在任何表达式的中间创建一个新函数。

例如：

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

在这里我们可以看到变量 sayHi 得到了一个值，新函数 function() { alert("Hello"); }。

由于函数创建发生在赋值表达式的上下文中（在 = 的右侧），因此这是一个 函数表达式。

请注意，function 关键字后面没有函数名。函数表达式允许省略函数名。

这里我们立即将它赋值给变量，所以上面的两个代码示例的含义是一样的：“创建一个函数并将其放入变量 sayHi 中”。

在更多更高阶的情况下，稍后我们会遇到，可以创建一个函数并立即调用，或者安排稍后执行，而不是存储在任何地方，因此保持匿名。

函数是一个值

重申一次：无论函数是如何创建的，函数都是一个值。上面的两个示例都在 sayHi 变量中存储了一个函数。

我们还可以用 alert 打印这个变量的值：

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

alert( sayHi ); // 显示函数代码

注意，最后一行代码并不会运行函数，因为 sayHi 后没有括号。在某些编程语言中，只要提到函数的名称都会导致函数的调用执行，但 JavaScript 可不是这样。

在 JavaScript 中，函数是一个值，所以我们可以把它当成值对待。上面代码显示了一段字符串值，即函数的源码。

的确，在某种意义上说一个函数是一个特殊值，我们可以像 sayHi() 这样调用它。

但它依然是一个值，所以我们可以像使用其他类型的值一样使用它。

我们可以复制函数到其他变量：

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

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

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

解释一下上段代码发生的细节：

1. (1) 行声明创建了函数，并把它放入到变量 sayHi。
2. (2) 行将 sayHi 复制到了变量 func。请注意：sayHi 后面没有括号。如果有括号，func = sayHi() 会把 sayHi() 的调用结果写进func，而不是 sayHi 函数 本身。
3. 现在函数可以通过 sayHi() 和 func() 两种方式进行调用。

我们也可以在第一行中使用函数表达式来声明 sayHi：

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

let func = sayHi;
// ...

这两种声明的函数是一样的。

ℹ️为什么这里末尾会有个分号？

你可能想知道，为什么函数表达式结尾有一个分号 ;，而函数声明没有：

function sayHi() {
// ...
}

let sayHi = function() {
// ...
};

答案很简单：这里函数表达式是在赋值语句 let sayHi = ...; 中以 function(…) {…} 的形式创建的。建议在语句末尾加上分号 ;，它不是函数语法的一部分。

分号用于更简单的赋值，例如 let sayHi = 5;，它也用于函数赋值。

回调函数

让我们多举几个例子，看看如何将函数作为值来传递以及如何使用函数表达式。

我们写一个包含三个参数的函数 ask(question, yes, no)：

• question

  关于问题的文本

• yes

  当回答为 “Yes” 时，要运行的脚本

• no

  当回答为 “No” 时，要运行的脚本

函数需要提出 question（问题），并根据用户的回答，调用 yes() 或 no()：

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

function showOk() {
  alert( "You agreed." );
}

function showCancel() {
  alert( "You canceled the execution." );
}

// 用法：函数 showOk 和 showCancel 被作为参数传入到 ask
ask("Do you agree?", showOk, showCancel);

在实际开发中，这样的函数是非常有用的。实际开发与上述示例最大的区别是，实际开发中的函数会通过更加复杂的方式与用户进行交互，而不是通过简单的 confirm。在浏览器中，这样的函数通常会绘制一个漂亮的提问窗口。但这是另外一件事了。

ask 的两个参数值 showOk 和 showCancel 可以被称为 回调函数 或简称 回调。

主要思想是我们传递一个函数，并期望在稍后必要时将其“回调”。在我们的例子中，showOk 是回答 “yes” 的回调，showCancel 是回答 “no” 的回调。

我们可以用函数表达式对同样的函数进行大幅简写：

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "Do you agree?",
  function() { alert("You agreed."); },
  function() { alert("You canceled the execution."); }
);

这里直接在 ask(...) 调用内进行函数声明。这两个函数没有名字，所以叫 匿名函数。这样的函数在 ask 外无法访问（因为没有对它们分配变量），不过这正是我们想要的。

这样的代码在我们的脚本中非常常见，这正符合 JavaScript 语言的思想。

ℹ️一个函数是表示一个“行为”的值

字符串或数字等常规值代表 数据。

函数可以被视为一个 行为（action）。

我们可以在变量之间传递它们，并在需要时运行。

函数表达式 vs 函数声明

让我们来总结一下函数声明和函数表达式之间的主要区别。

首先是语法：如何通过代码对它们进行区分。

• 函数声明：在主代码流中声明为单独的语句的函数。

  // 函数声明
  function sum(a, b) {
    return a + b;
  }
  

• 函数表达式：在一个表达式中或另一个语法结构中创建的函数。下面这个函数是在赋值表达式 = 右侧创建的：

  // 函数表达式
  let sum = function(a, b) {
    return a + b;
  };
  

更细微的差别是，JavaScript 引擎会在 什么时候 创建函数。

函数表达式是在代码执行到达时被创建，并且仅从那一刻起可用。

一旦代码执行到赋值表达式 let sum = function… 的右侧，此时就会开始创建该函数，并且可以从现在开始使用（分配，调用等）。

函数声明则不同。

在函数声明被定义之前，它就可以被调用。

例如，一个全局函数声明对整个脚本来说都是可见的，无论它被写在这个脚本的哪个位置。

这是内部算法的原故。当 JavaScript 准备 运行脚本时，首先会在脚本中寻找全局函数声明，并创建这些函数。我们可以将其视为“初始化阶段”。

在处理完所有函数声明后，代码才被执行。所以运行时能够使用这些函数。

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

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

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

函数声明 sayHi 是在 JavaScript 准备运行脚本时被创建的，在这个脚本的任何位置都可见。

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

sayHi("John"); // error!

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

函数表达式在代码执行到它时才会被创建。只会发生在 (*) 行。为时已晚。

函数声明的另外一个特殊的功能是它们的块级作用域。

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

例如，想象一下我们需要依赖于在代码运行过程中获得的变量 age 声明一个函数 welcome()。并且我们计划在之后的某个时间使用它。

如果我们使用函数声明，则以下代码无法像预期那样工作：

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

// 有条件地声明一个函数
if (age < 18) {

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

} else {

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

}

// ……稍后使用
welcome(); // Error: welcome is not defined

这是因为函数声明只在它所在的代码块中可见。

下面是另一个例子：

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

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

} else {

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

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


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

我们怎么才能让 welcome 在 if 外可见呢？

正确的做法是使用函数表达式，并将 welcome 赋值给在 if 外声明的变量，并具有正确的可见性。

下面的代码可以如愿运行：

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(); // 现在可以了

ℹ️什么时候选择函数声明与函数表达式？

根据经验，当我们需要声明一个函数时，首先考虑函数声明语法。它能够为组织代码提供更多的灵活性。因为我们可以在声明这些函数之前调用这些函数。

这对代码可读性也更好，因为在代码中查找 function f(…) {…} 比 let f = function(…) {…} 更容易。函数声明更“醒目”。

……但是，如果由于某种原因而导致函数声明不适合我们（我们刚刚看过上面的例子），那么应该使用函数表达式。

总结

• 函数是值。它们可以在代码的任何地方被分配，复制或声明。
• 如果函数在主代码流中被声明为单独的语句，则称为“函数声明”。
• 如果该函数是作为表达式的一部分创建的，则称其“函数表达式”。
• 在执行代码块之前，内部算法会先处理函数声明。所以函数声明在其被声明的代码块内的任何位置都是可见的。
• 函数表达式在执行流程到达时创建。

在大多数情况下，当我们需要声明一个函数时，最好使用函数声明，因为函数在被声明之前也是可见的。这使我们在代码组织方面更具灵活性，通常也会使得代码可读性更高。

所以，仅当函数声明不适合对应的任务时，才应使用函数表达式。在本章中，我们已经看到了几个例子，以后还会看到更多的例子。

箭头函数，基础知识

创建函数还有另外一种非常简单的语法，并且这种方法通常比函数表达式更好。

它被称为“箭头函数”，因为它看起来像这样：

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

这里创建了一个函数 func，它接受参数 arg1..argN，然后使用参数对右侧的 expression 求值并返回其结果。

换句话说，它是下面这段代码的更短的版本：

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

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

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

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

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

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

可以看到 (a, b) => a + b 表示一个函数接受两个名为 a 和 b 的参数。在执行时，它将对表达式 a + b 求值，并返回计算结果。

• 如果我们只有一个参数，还可以省略掉参数外的圆括号，使代码更短。

  例如：

  let double = n => n * 2;
  // 差不多等同于：let double = function(n) { return n * 2 }
  
  alert( double(3) ); // 6
  

• 如果没有参数，括号则是空的（但括号必须保留）：

  let sayHi = () => alert("Hello!");
  
  sayHi();
  

箭头函数可以像函数表达式一样使用。

例如，动态创建一个函数：

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

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

welcome();

一开始，箭头函数可能看起来并不熟悉，也不容易读懂，但一旦我们看习惯了之后，这种情况很快就会改变。

箭头函数对于简单的单行行为（action）来说非常方便，尤其是当我们懒得打太多字的时候。

多行的箭头函数

到目前为止，我们看到的箭头函数非常简单。它们从 => 的左侧获取参数，计算并返回右侧表达式的计算结果。

有时我们需要更复杂一点的函数，比如带有多行的表达式或语句。在这种情况下，我们可以使用花括号将它们括起来。主要区别在于，用花括号括起来之后，需要包含 return 才能返回值（就像常规函数一样）。

就像这样：

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

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

ℹ️更多内容

在这里，我们赞扬了箭头函数的简洁性。但还不止这些！

箭头函数还有其他有趣的特性。

为了更深入地学习它们，我们首先需要了解一些 JavaScript 其他方面的知识，因此我们将在后面的 【深入理解箭头函数】 一章中再继续研究箭头函数。

现在，我们已经可以用箭头函数进行单行行为和回调了。

总结

箭头函数对于简单的操作很方便，特别是对于单行的函数。它具体有两种形式：

1. 不带花括号：(...args) => expression —— 右侧是一个表达式：函数计算表达式并返回其结果。如果只有一个参数，则可以省略括号，例如 n => n*2。
2. 带花括号：(...args) => { body } —— 花括号允许我们在函数中编写多个语句，但是我们需要显式地 return 来返回一些内容。

✅任务

用箭头函数重写

用箭头函数重写下面的函数表达式：

function ask(question, yes, no) {
  if (confirm(question)) yes();
  else no();
}

ask(
  "Do you agree?",
  function() { alert("You agreed."); },
  function() { alert("You canceled the execution."); }
);

解决方案

function ask(question, yes, no) {
if (confirm(question)) yes();
else no();
}

ask(
"Do you agree?",
() => alert("You agreed."),
() => alert("You canceled the execution.")
);

是不是看起来精简多了

JavaScript 特性

本章简要回顾我们到现在为止学到的 JavaScript 特性，并特别注意了一些细节。

代码结构

语句用分号分隔：

alert('Hello'); alert('World');

通常，换行符也被视为分隔符，因此下面的例子也能正常运行：

alert('Hello')
alert('World')

这就是所谓的「自动分号插入」。但有时它不起作用，例如：

alert("There will be an error after this message")

[1, 2].forEach(alert)

大多数代码风格指南都认为我们应该在每个语句后面都加上分号。

在代码块 {...} 后以及有代码块的语法结构（例如循环）后不需要加分号：

function f() {
  // 函数声明后不需要加分号
}

for(;;) {
  // 循环语句后不需要加分号
}

……但即使我们在某处添加了「额外的」分号，这也不是错误。分号会被忽略的。

更多内容：【代码结构】。

严格模式

为了完全启用现代 JavaScript 的所有特性，我们应该在脚本顶部写上 "use strict" 指令。

'use strict';

...

该指令必须位于 JavaScript 脚本的顶部或函数体的开头。

如果没有 "use strict"，所有东西仍可以正常工作，但是某些特性的表现方式与旧式「兼容」方式相同。我们通常更喜欢现代的方式。

语言的一些现代特征（比如我们将来要学习的类）会隐式地启用严格模式。

更多内容：【现代模式，“use strict”】。

变量

可以使用以下方式声明变量：

• let
• const（不变的，不能被改变）
• var（旧式的，稍后会看到）

一个变量名可以由以下组成：

• 字母和数字，但是第一个字符不能是数字。
• 字符 $ 和 _ 是允许的，用法同字母。
• 非拉丁字母和象形文字也是允许的，但通常不会使用。

变量是动态类型的，它们可以存储任何值：

let x = 5;
x = "John";

有 8 种数据类型：

• number — 可以是浮点数，也可以是整数，
• bigint — 用于任意长度的整数，
• string — 字符串类型，
• boolean — 逻辑值：true/false，
• null — 具有单个值 null 的类型，表示“空”或“不存在”，
• undefined — 具有单个值 undefined 的类型，表示“未分配（未定义）”，
• object 和 symbol — 对于复杂的数据结构和唯一标识符，我们目前还没学习这个类型。

typeof 运算符返回值的类型，但有两个例外：

typeof null == "object" // JavaScript 编程语言的设计错误
typeof function(){} == "function" // 函数被特殊对待

更多内容：【变量】和 【数据类型】。

交互

我们使用浏览器作为工作环境，所以基本的 UI 功能将是：

• prompt(question[, default\])

  提出一个问题，并返回访问者输入的内容，如果他按下「取消」则返回 null。

• confirm(question)

  提出一个问题，并建议用户在“确定”和“取消”之间进行选择。选择结果以 true/false 形式返回。

• alert(message)

  输出一个 消息。

这些函数都会产生 模态框，它们会暂停代码执行并阻止访问者与页面的其他部分进行交互，直到用户做出回答为止。

举个例子：

let userName = prompt("Your name?", "Alice");
let isTeaWanted = confirm("Do you want some tea?");

alert( "Visitor: " + userName ); // Alice
alert( "Tea wanted: " + isTeaWanted ); // true

更多内容：【交互：alert、prompt 和 confirm】。

运算符

JavaScript 支持以下运算符：

• 算数运算符

  常规的：+ - * /（加减乘除），取余运算符 % 和幂运算符 **。二进制加号 + 可以连接字符串。如果任何一个操作数是一个字符串，那么另一个操作数也将被转换为字符串：alert( '1' + 2 ); // '12'，字符串 alert( 1 + '2' ); // '12'，字符串

• 赋值

  简单的赋值：a = b 和合并了其他操作的赋值：a * = 2。

• 按位运算符

  按位运算符在最低位级上操作 32 位的整数：详见 文档。

• 三元运算符

  唯一具有三个参数的操作：cond ? resultA : resultB。如果 cond 为真，则返回 resultA，否则返回 resultB。

• 逻辑运算符

  逻辑与 && 和或 || 执行短路运算，然后返回运算停止处的值（true/false 不是必须的）。逻辑非 ! 将操作数转换为布尔值并返回其相反的值。

• 空值合并运算符

  ?? 运算符从一列变量中，选取值为已定义的值（defined value）的变量。a ?? b 的结果是 a，除非 a 为 null/undefined，这时结果是 b。

• 比较运算符

  对不同类型的值进行相等检查时，运算符 == 会将不同类型的值转换为数字（除了 null 和 undefined，它们彼此相等而没有其他情况），所以下面的例子是相等的：alert( 0 == false ); // true alert( 0 == '' ); // true其他比较也将转换为数字。严格相等运算符 === 不会进行转换：不同的类型总是指不同的值。值 null 和 undefined 是特殊的：它们只在 == 下相等，且不相等于其他任何值。大于/小于比较，在比较字符串时，会按照字符顺序逐个字符地进行比较。其他类型则被转换为数字。

• 其他运算符

  还有很少一部分其他运算符，如逗号运算符。

更多内容：【基础运算符，数学】，【值的比较]】，【逻辑运算符】，【空值合并运算符 ‘??’】。

循环

• 我们涵盖了 3 种类型的循环：

  // 1
  while (condition) {
    ...
  }
  
  // 2
  do {
    ...
  } while (condition);
  
  // 3
  for(let i = 0; i < 10; i++) {
    ...
  }
  

• 在 for(let...) 循环内部声明的变量，只在该循环内可见。但我们也可以省略 let 并重用已有的变量。

• 指令 break/continue 允许退出整个循环/当前迭代。使用标签来打破嵌套循环。

更多内容：【循环：while 和 for】。

稍后我们将学习更多类型的循环来处理对象。

“switch” 结构

“switch” 结构可以替代多个 if 检查。它内部使用 ===（严格相等）进行比较。

例如：

let age = prompt('Your age?', 18);

switch (age) {
  case 18:
    alert("Won't work"); // prompt 的结果是一个字符串，而不是数字
    break;

  case "18":
    alert("This works!");
    break;

  default:
    alert("Any value not equal to one above");
}

详情请见：【“switch” 语句】。

函数

我们介绍了三种在 JavaScript 中创建函数的方式：

1. 函数声明：主代码流中的函数

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

2. 函数表达式：表达式上下文中的函数

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

3. 箭头函数：

   // 表达式在右侧
   let sum = (a, b) => a + b;
   
   // 或带 {...} 的多行语法，此处需要 return：
   let sum = (a, b) => {
     // ...
     return a + b;
   }
   
   // 没有参数
   let sayHi = () => alert("Hello");
   
   // 有一个参数
   let double = n => n * 2;
   

• 函数可能具有局部变量：在函数内部声明的变量，或在其参数列表中。这类变量只在函数内部可见。
• 参数可以有默认值：function sum(a = 1, b = 2) {...}。
• 函数总是返回一些东西。如果没有 return 语句，那么返回的结果是 undefined。

详细内容：请见 【函数】，【箭头函数，基础知识】。

更多内容

这些是 JavaScript 特性的简要概述。截至目前，我们仅仅学习了基础知识。随着教程的深入，你会发现 JavaScript 的更多特性和高级特性。

👉练习打卡