JavaScript 03 【基础语法学习】

1 `===` 严格相等运算符

JavaScript 比较和逻辑运算符 | 菜鸟教程https://www.runoob.com/js/js-comparisons.html【squares $a$ && squares $a$ === squares $b$ && squares $a$ === squares $c$ 三个等号什么意思？】

在 JavaScript 中，=== 是严格相等运算符，它的作用是：

先比较两边的值是否相等
再比较两边的数据类型是否相同
只有值和类型都完全相同 时，才返回 true

和它对应的是 ==（松散相等），== 会自动转换数据类型后再比较值，可能出现一些不符合直觉的结果（比如 0 == "" 会返回 true）。

在你提到的代码里：

javascript 复制代码

squares[a] && squares[a] === squares[b] && squares[a] === squares[c]

这通常是在判断井字棋的获胜条件：

先通过 squares[a] 确保这个位置不是空值（null 或 undefined）
再通过 === 严格比较 a、b、c 三个位置的值和类型是否完全相同（比如都是 'X' 或都是 'O'）
只有三个条件都满足时，才表示这三个位置连成一线，判定为获胜

使用 === 而不是 == 是为了避免类型转换导致的误判，让逻辑更严谨。

2 数组的map方法

Array.prototype.map() - JavaScript | MDNhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

在 JavaScript 中，map 是数组的一个高阶函数 ，作用是对数组中的每个元素进行 "自定义操作"，并将操作结果收集成一个新数组（原数组不会被修改）。

结合 React 场景（以及你提供的 "游戏历史记录" 背景），可以从这几个角度理解：

1. 基础语法与作用

语法：数组.map(函数)

数组中的每个元素，会依次传入 "函数" 中执行；
"函数" 的返回值 ，会被收集到一个新数组里；
最终 map 会返回这个 "包含所有返回值" 的新数组。

比如示例 [1, 2, 3].map((x) => x * 2)：

数组 [1,2,3] 的每个元素 x，都会执行 x * 2；
结果依次是 2、4、6，所以新数组是 [2,4,6]。

2. React 中的应用（结合 "游戏历史"）

在 React 里，我们需要把 "数据（比如 history 数组里的游戏步骤）" 转换成 "UI 元素（比如按钮）"。map 就是实现这种 "数据 → UI" 转换的核心工具。

假设 history 是这样的数组（每个元素代表一步游戏的状态）：

javascript 复制代码

const history = [
  [null, null, null],   // 第 0 步：初始状态
  ["X", null, null],    // 第 1 步：X 下在第一个格子
  ["X", null, "O"]      // 第 2 步：O 下在第三个格子
];

我们可以用 map 把 history 里的每一步，转换成一个 "按钮（点击可跳转到对应步骤）"：

javascript 复制代码

const historyButtons = history.map((step, index) => {
  // step：当前遍历到的"某一步游戏状态"（比如 ["X", null, "O"]）
  // index：当前元素在数组中的索引（比如 0、1、2）
  return (
    <button key={index} onClick={() => jumpToStep(index)}>
      跳转到步骤 {index}
    </button>
  );
});

这样 historyButtons 就是一个由按钮组成的数组 ，可以直接在 React 组件中渲染（比如 return <div>{historyButtons}</div>），最终页面会显示 "多个按钮，每个对应一步游戏"。

3. 关键特性：不修改原数组

map 始终会创建新数组 ，不会修改原来的 history 数组。这和 React 中 "状态不可变" 的设计思想是一致的（更新状态时，要生成新数据，而不是改旧数据）。

总结：map 是 JavaScript 数组的核心方法，既能对数组元素做 "批量转换"，又能保证原数组不被修改；在 React 中，它是 "数据 → UI 元素" 转换的核心工具（比如把 "游戏步骤数组" 转成 "按钮列表"）。

JavaScript 03 【基础语法学习】

1 === 严格相等运算符

2 数组的map方法

1. 基础语法与作用

2. React 中的应用（结合 "游戏历史"）

3. 关键特性：不修改原数组

1 `===` 严格相等运算符