
> 要玩 TypeScript，所以看看 JavaScript 先。

---

## 一、《Web API Cookbook》勾起我对JavaScript的兴趣

我看了《Web API Cookbook》开头的几个代码例子，感觉 **这JS代码也太紧凑了**。

语法糖有点多，常常看得人 **"行行惊心"**。

例如，判断每行格子是否全被填满，代码长这样：

```javascript
const full = [];
for (let y = 0; y < ROWS; y++) {
  if (grid[y].every(v => v)) full.push(y);
}
```

再例如，数据处理的代码长这样：

```javascript
const result = data
  .filter(item => item.active)
  .map(item => ({ ...item, checked: true }))
  .reduce((acc, cur) => acc + cur.price, 0);
```

箭头函数、内置高阶函数、链式调用……

---

## 二、慢慢习惯"表达式化"表达

作为架构师，你对下面的东西非常熟悉：

- 函数、参数、返回值
- 循环、条件、累加器
- 管道、分层、输入输出

JavaScript 的语法糖并没有改变这些本质，它只是做了两件事：

1. **把函数写得更短**：`function(v) { return v; }` 变成了 `v => v`。
2. **把常见循环封装成方法**：`for` 循环变成了 `filter / map / reduce / every` 等数组方法。

| 你看到的写法 | 它的本质 |
|-------------|---------|
| `v => v` | 一个接收参数并返回值的函数 |
| `arr.every(f)` | 循环检查"是否全部满足" |
| `arr.some(f)` | 循环检查"是否至少一个满足" |
| `arr.filter(f)` | 循环把满足条件的元素挑出来 |
| `arr.map(f)` | 循环把每个元素变换后放进新数组 |
| `arr.reduce(f, init)` | 循环用一个累加器汇总成一个值 |
| `arr.find(f)` | 循环找第一个满足条件的元素 |
| `arr.forEach(f)` | 循环对每个元素执行副作用 |
| `...obj` | 把对象的键值对摊平展开 |

记住这张表，后面所有的心法都是它的延伸。

---

## 三、玩好 JavaScript/TypeScript 的四个心智模型？

### 模型一：箭头函数就是"一次性 Lambda"

箭头函数是函数的一种简写。看见 `=>`，就在脑子里替换成 `function ... return`：

```javascript
// 你看到的
v => v

// 等价于
function(v) { return v; }


// 你看到的
item => item.active

// 等价于
function(item) { return item.active; }


// 你看到的
(acc, cur) => acc + cur.price

// 等价于
function(acc, cur) { return acc + cur.price; }
```

🌺🌺🌺🌺
只有一个注意点：**返回对象要加圆括号**，否则 `{}` 会被当成函数体。
🌺🌺🌺🌺

```javascript
// 想返回对象，必须这样写🌺🌺🌺
item   =>   (  { ...item, checked: true }  )

// 如果写成 item => { ... }，就变成函数体了，不会返回对象 🌺🌺🌺

```

另外，箭头函数没有自己的 `this`，它捕获的是定义时外层作用域的 `this`。先记住这一条，遇到坑时要用。

### 模型二：数组方法就是"带洞的循环模板"

`filter / map / reduce / every / some / find` 本质上都是**循环 + 一个由你填写的判断/变换函数**。它们的共同形态是：

```javascript
arr.某种循环(f)
```

其中 `f` 通常就是一个箭头函数。

#### 最常用的三个

| 方法 | 回答的问题 | 输入 → 输出 |
|------|-----------|------------|
| `filter(f)` | 哪些元素满足条件？ | 数组 → 更短的数组 |
| `map(f)` | 每个元素变成什么？ | 数组 → 等长的新数组 |
| `reduce(f, init)` | 折叠汇总成一个什么值？ | 数组 → 单个值 |

看一个完整的流水线：

```javascript
const total = data
  .filter(item => item.active)           // 先筛选出活跃项
  .map(item => item.price)               // 再提取价格
  .reduce((sum, price) => sum + price, 0) // 最后求和
```

#### 其他几个也一次认全（全都是 GOF 模板方法设计模式）

| 方法 | 回答的问题 | 等价循环骨架 |
|------|-----------|-------------|
| `arr.every(f)` | 是否全部满足？ | `for ... if(!f(v)) return false; return true` |
| `arr.some(f)` | 是否至少一个满足？ | `for ... if(f(v)) return true; return false` |
| `arr.find(f)` | 第一个满足条件的？ | `for ... if(f(v)) return v` |
| `arr.forEach(f)` | 对每个元素做件事 | `for ... f(v)` |

文章开头的 `grid[y].every(v => v)`，翻译过来就是：

```javascript
let allTrue = true;
for (const v of grid[y]) {
  if (!v) { allTrue = false; break; }
}
```

其实就是"这一行是不是全为真"。

### 模型三：链式调用就是"数据流管道"

`a.filter().map().reduce()` 和你画架构图时的 `组件A → 组件B → 组件C` 没有区别：上一步的输出是下一步的输入。

阅读时不要试图一眼看穿整条链，而是**分段读**：

```javascript
data
  .filter(item => item.active)           // 阶段一：筛选
  .map(item => ({ ...item, checked: true })) // 阶段二：变换并添加字段
  .reduce((acc, cur) => acc + cur.price, 0); // 阶段三：汇总
```

从左到右，像读流水线一样读。

### 模型四：展开运算符 `...` 就是"拆开"

```javascript
const old = { name: 'Tom', age: 17 };
const updated = { ...old, age: 18 };  // 复制 old，再覆盖 age
```

```javascript
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];  // 摊开 arr1 的元素，再追加
```

心法：**`...` 遇到对象就摊开键值对，遇到数组就摊开元素**。它和数组方法结合，经常出现在 `map` 里返回新对象：

```javascript
data.map(item => ({ ...item, checked: true }))
```

意思是：复制 `item` 的所有字段，再加一个 `checked: true`。

---

## 四、TypeScript 会舒服很多

JavaScript 的语法糖确实多，但它有一个巨大的优点：**容错率高**。你用 10 行 for 循环写出来的代码，和那些用 3 行链式调用写出来的代码，运行效果常常是一样的。

如果你有架构背景，TypeScript 会让你舒服很多。类型让参数和返回值变得明确，不再被隐式转换坑到：

```typescript
interface User {
  name: string;
  age: number;
}

const adults = users.filter((u: User) => u.age >= 18);
```


我看了《Web API Cookbook》开头的几个代码例子，感觉 这JS代码也太紧凑了。

远观JS | 02 语法糖和数组API

JavaScript 的语法糖（箭头函数、展开运算符）、内置高阶方法（filter/map/reduce/every…）、以及链式调用风格。

编程语言

前端

学习JavaScript和TypeScript的语法糖与核心概念，包括箭头函数、数组方法、链式调用和展开运算符。掌握这些技巧能提升代码简洁性，TypeScript的类型系统更让开发更安全高效。适合有架构背景的开发者快速上手现代前端开发。

数据处理

代码解释

TypeScript

数据流

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

远观JS | 02 语法糖和数组API-腾讯云开发者社区-腾讯云

远观JS | 02 语法糖和数组API

远观JS | 02 语法糖和数组API

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐