Kodokon kodokon.com

箭头函数、作用域与模板字面量

掌握箭头语法、块级作用域和闭包，然后用模板字面量构建动态字符串。

8 分钟 · 3 题

在 Kodokon 中打开本课

箭头函数在现代代码中无处不在：map 和 filter 的回调、事件监听器、Promise。它们的优势：语法紧凑，当函数体是单个表达式时还带有隐式返回。一旦你打开花括号，return 就又变成必需的了。

JAVASCRIPT
const double = (n) => n * 2;

const isAdult = (user) => user.age >= 18;

const buildUser = (name) => ({ name, active: true });

const sum = (a, b) => {
  const total = a + b;
  return total;
};

console.log(double(21)); // 42
console.log(buildUser("Ana").active); // true
表达式使用隐式返回，带花括号则使用显式返回。

作用域决定了一个变量在哪里可见。使用 let 和 const 时，在块（if、for、花括号）内声明的变量只在该块内存在。另一个至关重要的机制：函数会保持对其被创建时所在作用域中变量的访问权，即便那个作用域已经结束。这就是闭包，正是它让计数器、缓存和状态管理器得以运作。

JAVASCRIPT
function createCounter() {
  let count = 0;
  return () => {
    count += 1;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
返回的函数保持了对 count 的访问权：这就是闭包。

模板字面量以反引号为界，是拼接字符串的更佳替代方案。你用 ${...} 注入一个表达式，而换行会原样保留，非常适合构建消息或 HTML 片段。

JAVASCRIPT
const user = { firstName: "Nadia", cartCount: 3 };

const message = `Hello ${user.firstName}, you
have ${user.cartCount} items in your cart.`;

console.log(message);
无需任何拼接即可实现插值和多行字符串。

知识检测

确认你已牢记本课的重点内容。

  1. 哪种语法能正确地用带隐式返回的箭头函数返回一个对象？
    • (name) => { name: name }
    • (name) => ({ name })
    • (name) => return { name }
  2. 在 if 块内用 let 声明的变量，在该块之后还能访问吗？
    • 能，就像用 var 一样
    • 不能，它的作用域仅限于该块
    • 只有在它被初始化过时才能
  3. 哪个字符用来界定模板字面量？
    • 单引号
    • 双引号
    • 反引号