「笔记」JavaScript/TypeScript

目录

写在前面

因为有一些好点子，想快速实现一个轻量化的 Web 应用，遂询问 ChatGPT 大人为我推荐技术栈。

因为有一定 JS 基础，决定学一下 TS 全栈开发。

于是再顺手记点东西。

JS 复兴

其实当时就没认真学（

主要参考：JavaScript _ MDN

var 和 let

省流版：使用 let 和 const，不要使用 var。

特性 var let
作用域 函数作用域 块级作用域
变量提升 提升且初始化为 undefined 提升但存在暂时性死区（TDZ）
重复声明 ✅ 允许 ❌ 不允许
全局声明 会成为全局对象（如 window）的属性 不会成为全局对象的属性
在循环中的应用 循环结束后变量仍存在，可能导致问题 每次迭代都有独立的变量绑定，更符合直觉

在 for 循环中使用 var 和 let 会有显著不同的结果，尤其是在涉及异步操作（如 setTimeout）时。

  • 使用 var：循环变量 i 是函数级（或全局）作用域。所有异步回调函数共享同一个变量 i，当回调执行时，循环已结束，i 的值为最终值。
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 输出三次 3
}
  • 使用 let：每次迭代都会创建一个新的块级作用域和新的变量绑定。每个异步回调捕获的都是当次迭代的 i 值。
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 输出 0, 1, 2
}

这是 let 块级作用域带来的巨大优势，能解决许多循环中的经典问题。

==、===、!=、!==

核心区别在于比较时是否进行类型转换。

运算符 名称 是否进行类型转换 比较规则
== 相等运算符 是 如果类型不同，会先转换为相同类型，再比较值。
=== 严格相等运算符 否 只有类型相同，且值也相同时，才返回 true。
!= 不相等运算符 是 是 == 的取反。先按 == 的规则比较，然后返回相反结果。
!== 严格不相等运算符 否 是 === 的取反。先按 === 的规则比较，然后返回相反结果。

对于对象（包括数组和函数），这两种运算符比较的都是它们在内存中的引用地址。

为了代码的健壮性和可读性，请养成使用 === 和 !== 的习惯，能有效规避许多因类型转换而产生的隐蔽错误。

一张经典的真值表（来自：Oh my dear JavaScript）：

image.png

以及小游戏：【做了个在线JavaScript真值表消消乐 - bilibili】：https://www.bilibili.com/video/BV1om4y1N7Ka/

模板字面量

用反引号（`）分隔的字面量，允许多行字符串、带嵌入表达式的字符串插值和一种叫带标签的模板的特殊结构。

带标签的模板是模板字面量的一种更高级的形式，它允许你使用函数解析模板字面量：

  • 标签函数的第一个参数包含一个字符串数组，其余的参数与表达式相关。
  • 标签函数接收到的第一个参数是一个字符串数组。对于任何模板字面量，其长度等于替换次数（${…} 出现次数）加一，因此总是非空的。
  • 对于任何特定的带标签的模板字面量表达式，无论对字面量求值多少次，都将始终使用完全相同的字面量数组调用标签函数。
const person = "Mike";
const age = 28;

function myTag(strings, personExp, ageExp) {
  const str0 = strings[0]; // "That "
  const str1 = strings[1]; // " is a "
  const str2 = strings[2]; // "."

  const ageStr = ageExp > 99 ? "centenarian" : "youngster";

  // 我们甚至可以返回使用模板字面量构建的字符串
  return `${str0}${personExp}${str1}${ageStr}${str2}`;
}

const output = myTag`That ${person} is a ${age}.`;

console.log(output);
// That Mike is a youngster.

文档对象模型（DOM）

https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model

参考

posted @ 2025-11-08 17:03  Luckyblock  阅读(15)  评论(0)    收藏  举报