[Data Type Name]

[Data Type Name]

Purpose in Shopping Cart: [这个数据类型用来做什么]

Why This Type: [为什么它是最佳选择]

Code Example:

// 你的真实代码示例

Real-world Usage: [在真实业务中如何工作]

Interactions: [它如何与其他数据类型协作]

本文第 2～3 节即按该模板给出完整参考答案，你可以直接把它当作一份"模范作业"来对照学习。

## 二、七种原始类型逐一拆解

### 2.1 String —— 一切面向用户展示的文本

**购物车中的用途：** 商品名称（`"Mechanical Keyboard K8 Pro"`）、商品描述、SKU、用户名与邮箱、格式化后的价格文案等一切文本内容。

**为什么选它：** 页面要展示给人看的文字本质上都是"字符序列"，String 是唯一承载文本的原始类型。讲义（[2-js-basics/1-data-types/README.md](https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners/blob/5f220217d35499881cfff61a5b4c2dab033ab228/2-js-basics/1-data-types/README.md?utm_source=gitcode_repo_files)）强调字符串是网页开发的基石——用户名、按钮文字、错误消息、页面正文全部是字符串数据。购物车里的商品名可能包含字母、数字、符号甚至混合语言，恰好是字符串的典型形态。

**代码示例：**

```javascript
const productName = "Mechanical Keyboard K8 Pro";   // 商品名（双引号）
const description = 'Cherry MX 红轴 · 87 键 · 三模连接'; // 描述（单引号）
const userEmail = '[e-mail]';

// 用模板字符串（反引号）做动态拼接，讲义推荐用于复杂文案
const cartLine = `${productName} ×2，发往 ${userEmail}`;

// 常用字符串操作
console.log(productName.length);      // 获取长度
console.log(productName.toUpperCase()); // "MECHANICAL KEYBOARD K8 PRO"
console.log(description.includes('红轴')); // true，用于搜索过滤

真实业务场景： 商品搜索会调用 name.toLowerCase().includes(keyword) 做不区分大小写的模糊匹配；下单成功后的邮件标题用模板字符串把商品名、订单号拼装成一句话。注意：任何来自 <input> 的值都是字符串，这一点将直接影响第 5.1 节的类型转换话题。

与其他类型的交互： 字符串是 Number（如价格、数量）最常见的"输出形式"——计算完成后要显示给用户就必须转成字符串；它从 Object/Array（商品对象、分类列表）中提取字段、为它们生成展示文案，是所有结构化数据的"前台代言人"。

2.2 Number —— 购物车的计价核心

购物车中的用途： 单价、数量、小计、税费、运费、折扣金额，以及所有基于它们的一元/二元算术运算。

为什么选它： JavaScript 中整数、小数、负数统一由一个 number 类型表示（讲义中原话：42、3.14、-5 都能被自动识别），无需像部分语言那样区分 int 与 float。讲义同时列出了一整套算术运算符：+ 加法、- 减法、* 乘法、/ 除法、% 取余（见 README 的 Arithmetic Operators 表），这正是购物车计价器需要的全部工具。

代码示例：

const unitPrice = 1299;   // 商品单价
let quantity = 2;         // 购买数量
const taxRate = 0.08;     // 税率 8%

const subtotal = unitPrice * quantity;   // 2598
const tax = subtotal * taxRate;          // 207.84
const total = subtotal + tax;            // 2805.84

// % 取余的妙用：满 3 件免运费时判断是否达到门槛
const FREE_SHIPPING_STEP = 3;
console.log(quantity % FREE_SHIPPING_STEP === 0); // false，还差 1 件

真实业务场景与注意事项： 数量增减按钮、购物车小计实时重算、优惠券满减都直接依赖 Number 运算。但需要注意讲义在"数据可靠性"方面隐含的提醒：浮点精度问题是购物车开发必踩的坑，例如 0.1 + 0.2 !== 0.3。金额计算建议以"分"为单位的整数参与运算（Math.round(price * 100)），只在最后展示时除以 100 并调用 toFixed(2)（注意 toFixed 返回的是字符串）。超大金额的整数场景请转到 2.7 节的 BigInt。

与其他类型的交互： Number 与 String 的边界最容易混淆——'1' + '1' 结果是 '11'（拼接）而不是 2，讲义专门用该问题考察学习者；购物车"数量"输入框读出来是字符串，需要显式 Number() 转换后才能做 * 运算。Number 同时是 Boolean 条件的来源（total >= 99 得到布尔值），并从 Object 的价格字段和 Array 的逐项累加中获得输入。

2.3 Boolean —— 购物车的判断开关

购物车中的用途： 商品是否有货、用户是否登录、优惠是否启用、运费是否免单、结算按钮是否可点击、购物车是否为空等"是/否"状态。

为什么选它： Boolean 只容纳 true 与 false 两个值，是程序逻辑分支的最小单元。讲义（README 的 Booleans 小节）指出：布尔值帮助代码在满足条件时决定"哪些行该执行"，并且通常由运算符赋值产生（如 total >= 99）。购物车恰恰到处是这种二元决策点。

代码示例：

let isLoggedIn = true;        // 是否登录
let inStock = true;           // 商品是否有货
let isCartEmpty = false;

const FREE_SHIPPING_MIN = 99;
const freeShipping = total >= FREE_SHIPPING_MIN; // false，由比较运算产生

// 直接驱动控制流
if (isLoggedIn && inStock && !isCartEmpty) {
  renderCheckoutButton();
} else {
  renderHint('请先登录、补货或加入商品');
}

// 偏好开关
const prefs = { emailNotification: false, oneClickBuy: true };

真实业务场景与"truthy/falsy"陷阱： 讲义给出了一条必须背下的规则：JavaScript 里只有 6 个假值（falsy）：false、0、""、null、undefined、NaN，其余一切都是真值（truthy）。这意味着 if (cart.items.length) 在列表为空（长度为 0）时自动走 false 分支，不用写 === 0；但若优惠码字段是空字符串 ""，判断"是否有优惠码"要小心 "" 也是 falsy。

与其他类型的交互： Boolean 通常由 Number（比较运算）、Array（长度判断）、Null/Undefined（值是否存在）"生产"出来，然后交给 if、&&、|| 驱动 UI 与流程；它的反方向应用是条件表达式（ternary）和 Boolean() 显式转换。

2.4 Null —— 有意的"什么都没有"

购物车中的用途： 显式表达"此值当前不存在但占位待填"的字段，作业点名的最典型场景是缺省优惠码（用户没有输入或没有可用的折扣码）。

为什么选它： null 代表开发者主动、刻意置空的值，与"忘记赋值"不同。对购物车来说，把一个暂未使用的折扣字段初始化为 null，比用 0（会被误读成"打 0 折"）或 ""（会被误读成"有但为空文本"）语义都要清晰。

代码示例：

// 优惠码：用户还没选择 => 有意的空值
let discountCode = null;
let discountRate = 0; // 若打折 = 0 则等价于无折扣，容易与 null 混淆

function applyDiscount(code, rate) {
  if (code === null) {
    console.log('未应用任何优惠码，按原价结算');
    return 0;
  }
  return subtotal * rate;
}

// 运费策略：无免运规则时置 null，代表“策略未设置”
const shippingPolicy = null;

真实业务场景与注意点： 结算接口收到 discountCode: null 时后端能明确判断"没有码"，而不会像 "" 那样触发无意义的空码查询。这里有两个必须牢记的坑：一是 typeof null 返回 "object"（语言历史遗留怪癖），判断空值要写 x === null 而不是 typeof x === 'object'；二是 null == undefined 为 true、null === undefined 为 false，日常推荐一律使用严格相等 === 做区分。

与其他类型的交互： null 与 Undefined 都代表"没有值"，在条件判断中同为 falsy，因此常与 Boolean 协作；当需要把空值转成可展示文案时（如"暂无优惠码"）又会与 String 打交道。

2.5 Undefined —— 未初始化与缺失数据

购物车中的用途： 尚未赋值的变量、对象里不存在的字段、函数未 return 时的返回值，即"数据缺失但没人主动标记"的情形。

为什么选它： undefined 是 JavaScript 的默认缺省值——声明未赋值的变量、访问对象不存在的属性、读取数组越界元素，得到的都是它。讲义在讲解变量时也点明：let myVariable; 之后"变量当前没有任何值（undefined）"。购物车场景里，用户还没填写的收货地址、尚未创建的用户资料、服务端未返回的可选字段，读取时就会遇到 undefined。

代码示例：

let shippingAddress;            // 声明后未赋值 => undefined
console.log(shippingAddress);   // undefined

const user = { name: 'Alice', email: '[e-mail]' };
console.log(user.phone);        // 访问不存在的属性 => undefined

// 后端可选字段缺失
const order = { id: 'A1001', items: [] };
console.log(order.discount);    // undefined，表示“该订单没有折扣字段”

function findProduct(id, products) {
  // 找不到时显式返回 undefined，调用方据此判断
  return products.find(p => p.id === id);
}

真实业务场景： 渲染"结算页地址表单"前，需要先判断 user.address !== undefined，否则直接渲染会得到空白或报错；这也是"可选链"user?.address 诞生的原因。与 null 的取舍原则是：能由系统推导的缺失交给 undefined，需要人为表达"故意留空"的语义则用 null。

与其他类型的交互： undefined 与 null 一样是 falsy 值，可统一用 if (x) ... 兜底；类型检查时 typeof undefined 返回 "undefined"，与 typeof null 形成鲜明对比——这也是 typeof 作为校验工具时 5.2 节会详述的要点。

2.7 前的进阶：2.6 Symbol —— 购物车的唯一身份牌

购物车中的用途： 为购物车行项目、会话、事件订阅等生成绝不冲突的唯一标识符（进阶用法，如多标签页购物车会话标识、组件内部隐藏元数据）。

为什么选它： 无论 Symbol('cart') 被调用多少次，每次返回的都是全新且唯一的符号，Symbol('cart') === Symbol('cart') 恒为 false。购物车可能存在多个"同名但不同实体"的会话或缓存键，字符串主键容易碰撞，Symbol 从机制上杜绝了这种可能；用它作为对象键还能把内部元数据与业务字段天然隔离。

代码示例：

// 为“购物车行”生成稳定唯一的事件令牌
const LINE_UPDATED = Symbol('cart.line.updated');
const CART_EMPTIED = Symbol('cart.emptied');

// 用 Symbol 作为对象隐藏键：外部枚举不到
const internalId = Symbol('rowInternalId');
const line = {
  productId: 'KB-1001',
  quantity: 2,
  [internalId]: '8f3a…1c'   // 仅供内部引用，不进业务序列化
};

// 遍历/序列化时 Symbol 键默认被跳过
console.log(Object.keys(line));            // ['productId', 'quantity']
console.log(JSON.stringify(line));         // {"productId":"KB-1001","quantity":2}

// 全局注册表：跨模块共享同一符号（购物车恢复会话）
const SESSION_TOKEN = Symbol.for('cart.session.v1');
const SAME_TOKEN = Symbol.for('cart.session.v1');
console.log(SESSION_TOKEN === SAME_TOKEN); // true（Symbol.for 相同描述返回同一符号）

真实业务场景与注意点： 适合把 Symbol 用作事件名称常量或隐藏字段名，防止多开发者协作时字符串常量撞名。但它是高级特性——普通购物车的商品主键仍建议用字符串/数值 ID，因为 Symbol 无法被 JSON.stringify 序列化，若直接当数据库主键使用会导致持久化丢失。讲义把它列入 7 个原始类型之一，但定位为进阶用法，本文保持一致。

与其他类型的交互： Symbol 常作为对象（Object）的键，与 Object 组成"私有元数据槽"；Symbol.for 产生的全局符号本质仍可与字符串描述相互解释，用于模块间通信。

2.7 BigInt —— 超越安全整数上限的金融运算

购物车中的用途： 处理超出 Number.MAX_SAFE_INTEGER（2^53 - 1，约 9007 万亿）的量级，例如大型批发订单、跨企业对账单、支付渠道流水号、需要"整数分"无误差计价的场景（进阶用法）。

为什么选它： Number 能安全表示的整数有上限，超过后会静默丢失精度；BigInt 以 n 后缀的整数字面量（如 9007199254740993n）表示任意精度整数，从根本上避免大整数被四舍五入。作业把它与 Symbol 并列为"进阶用法"，适合在理解了 Number 局限后再引入。

代码示例：

// 批发订单：数量 × 单价（以“分”为单位）超出安全整数范围
const bulkQty = 123456789n;
const unitPriceCents = 999n;
const totalCents = bulkQty * unitPriceCents; // 精确无误差

// 或直接处理大额发票号
const invoiceNumber = 9223372036854775807n;  // 已超出 Number 安全范围

// 注意：BigInt 不能与 Number 直接混用算术，需显式转换
// totalCents + 100          // ❌ TypeError
console.log(totalCents + 100n);              // ✅ 大整数与 100n 相加

// 与 Number 协作时必须显式转型（并自行承担精度风险）
const displayTotal = Number(totalCents) / 100;
console.log(typeof totalCents); // "bigint"

真实业务场景与边界： 电商计价更常见的做法是"用整数分 + Number"先解决浮点误差；只有金额或流水量级突破安全整数范围时才升级为 BigInt。需注意 typeof 10n 返回 "bigint"，且 BigInt 与 Number 混算会直接抛 TypeError，故在与字符串拼接展示前要做显式转换；部分旧浏览器与低版本运行环境不支持 BigInt，使用前需确认目标环境。

与其他类型的交互： BigInt 与 Number 同为数值族，但必须"显式搭桥"；最终展示价格时同样要转成 String 拼入模板文案，与用户界面交流。

三、引用类型：把数据真正"装进"购物车

3.1 Object —— 商品、用户与购物车本身的容器

购物车中的用途： 描述一件商品（详情字段）、一份用户资料（联系信息）、以及购物车本身（内容与状态）；它把相关字段"打包"成一个可整体传递的实体。

为什么选它： 对象的本质是"键值对集合"，与真实世界的"一个东西具有多种属性"一一对应。讲义在讲 const 时给出一条关键规则（README）：const 只保护"引用指向"，不保护对象内部——obj.a = 5 允许，obj = {b:5} 才报错。购物车对象用 const 声明后仍可随时增删条目，正是该语义的完美应用。

代码示例：

const cart = {
  id: 'cart-1001',
  owner: { name: 'Alice', email: '[e-mail]' }, // 嵌套对象
  items: [],               // 购物车行（与 Array 协作）
  subtotal: 0,
  taxRate: 0.08,
  status: 'active'         // 'active' | 'checkedOut' | 'abandoned'
};

// 商品详情对象
const product = {
  id: 'KB-1001',
  name: 'Mechanical Keyboard K8 Pro',
  price: 1299,
  categories: ['peripherals', 'keyboards'], // 内部再嵌数组
  inStock: true
};

// const 不锁内容：允许修改属性、追加属性
cart.status = 'checkedOut';
cart.coupon = null; // 动态增加一个暂无优惠码的字段

// 访问与遍历
console.log(cart.owner.email);        // '[e-mail]'
for (const key in product) {
  console.log(key, product[key]);
}

真实业务场景： 后端返回的购物车 JSON 天然是一个多层嵌套 Object；把商品对象传给 UI 组件、把购物车对象存进 localStorage（可 JSON 序列化，前提是键与值都可序列化——这也是前面 Symbol 不直接入库的原因）。深层访问时推荐可选链 user?.address?.city 防范 undefined。

与其他类型的交互： Object 是购物车的"总装车间"：String 提供字段名与展示文案，Number 提供金额字段，Boolean 表达状态，Null/Undefined 表达字段缺省，Array 承载列表型字段，几乎每种类型都在对象内部协作。

3.2 Array —— 商品明细、订单历史与分类的有序列表

购物车中的用途： 购物车行（items）、订单历史、分类列表、热门商品推荐等一切"多件同构事物"。

为什么选它： 数组保存有序、可重复遍历的同类型集合，天然对应"列表"心智模型：加购 = push，改数量 = 定位下标/元素，清空 = length = 0。数组配合 map/filter/reduce/find 等方法是处理购物车数据的标配（这些高阶操作会在后续课程 4-arrays-loops 中系统展开，这里先用最基础的增删改查）。

代码示例：

const productList = [                        // 多个商品对象构成的数组
  { id: 'KB-1001', name: 'Keyboard', price: 1299 },
  { id: 'MS-2001', name: 'Mouse', price: 399 },
  { id: 'MT-3001', name: 'Monitor', price: 8999 }
];

const cartItems = [];
// 加购
cartItems.push({ productId: 'KB-1001', quantity: 1 });
cartItems.push({ productId: 'MS-2001', quantity: 2 });

// 计算小计：reduce 累加（Number × Number）
const subtotal = cartItems.reduce((sum, line) => {
  const p = productList.find(x => x.id === line.productId);
  return sum + (p ? p.price * line.quantity : 0);
}, 0);

// 筛选与清空
const inCartProductIds = cartItems.map(line => line.productId); // 字符串数组
cartItems.length = 0;              // 清空购物车

// 数组方法结果是新数组，原数组保持有序
const affordable = productList.filter(p => p.price < 1000);

真实业务场景： 购物车图标上的角标数字来自 cartItems.length；"历史订单"页遍历 orderHistory 渲染每一单；"再来一单"本质是把某次订单的 items 重新 map 成新购物车行。需要留意：数组也是对象，typeof [] 同样是 "object"，判断数组必须用 Array.isArray()（见 5.2 节）。

与其他类型的交互： Array 元素通常是 Object；数组方法回调中大量使用 Number（价格比较、累加）、Boolean（filter 的谓词）、String（按名称搜索），items.length 又产出数字参与 Boolean 判断——它是数据类型的"集合型熔炉"。

四、综合示例：从加购到结算，看九种类型如何协同

把前面所有类型放进一个真实结算流程，观察它们在同一函数中的联动：

// ===== 数据准备：各种类型各司其职 =====
const catalog = [                        // Array
  { id: 'KB-1001', name: 'Keyboard K8 Pro', price: 1299, inStock: true },
  { id: 'MS-2001', name: 'Wireless Mouse',  price: 399,  inStock: false },
  { id: 'MT-3001', name: '27" Monitor',     price: 8999, inStock: true }
];

let user = {                             // Object：用户资料
  name: 'Alice',
  email: '[e-mail]',
  shippingAddress: undefined             // Undefined：地址尚未填写
};

let discountCode = null;                 // Null：有意的“暂无优惠码”
let items = [];                          // Array：购物车内容
const SESSION = Symbol('cart-session');  // Symbol：会话令牌
const TAX_RATE = 0.08;                   // Number：税率常量
const FREE_SHIP_MIN = 9999;              // Number：满减门槛

// ===== 行为逻辑：String/Number/Boolean 协同 =====
function addToCart(productId, qty) {
  const product = catalog.find(p => p.id === productId); // String 精确匹配
  if (typeof product === 'undefined') return;            // 商品不存在
  if (product.inStock !== true) {                        // Boolean 库存
    console.log(`${product.name} 暂时缺货`);
    return;
  }
  items.push({ id: product.id, name: product.name, price: product.price, quantity: qty });
}

function checkout(user, items, code) {
  if (user.shippingAddress === undefined) { // 地址缺失校验
    return '请先填写收货地址';
  }
  if (items.length === 0) {                 // 空车拦截
    return '购物车是空的';
  }
  const subtotal = items.reduce((sum, it) => sum + it.price * it.quantity, 0);
  const discount = code === null ? 0 : subtotal * 0.1; // Null 分支
  const total = subtotal * (1 + TAX_RATE) - discount;
  const freeShip = total >= FREE_SHIP_MIN;              // Boolean
  return `订单含税合计 ${total.toFixed(2)} 元${freeShip ? '（免运费）' : ''}`;
}

addToCart('KB-1001', 1);
addToCart('MS-2001', 2);
console.log(checkout(user, items, discountCode));
// "请先填写收货地址"

这个例子回答了作业的第四问"数据类型如何交互"：catalog.find 用 String 主键做匹配、reduce 做 Number 累加、inStock/items.length 做 Boolean 决策、shippingAddress 用 Undefined 表达缺省、discountCode 用 Null 表达"有意无码"、价格文案以 String 输出——购物车即一个微型类型生态。

五、Bonus 挑战：类型转换、输入校验与性能取舍

5.1 Type Coercion（隐式类型转换）

JavaScript 会在需要时自动在类型间转换，购物车中最经典的案例就是 + 的双重语义：

// 来自输入框的“数量”总是字符串
const qtyInput = "5";
const unitPrice = 10;

console.log(qtyInput + unitPrice);  // "510"  ← 字符串拼接，经典 Bug
console.log(qtyInput * unitPrice);  // 50     ← * 触发数值转换，侥幸正确
console.log("5" + 10);              // "510"（作业给出的同款示例）
console.log("5" - 2);               // 3      ← - 强制转数值

// 正确姿势：入库前显式转换
const qty = Number(qtyInput);
console.log(qty + unitPrice);       // 15

作业特别提示了 "5" + 10 这类例子。结论是：+ 遇到字符串就做拼接，其他算术运算符则倾向把操作数转成数值，因此"输入框数值 + 业务数值"一律先 Number()。

5.2 Data Validation（用 typeof 等工具校验输入类型）

处理用户输入、API 响应前先校验类型，可避免大量运行时错误。由于 typeof 对 null 和数组的判定有历史怪癖（typeof null === 'object'、typeof [] === 'object'），要组合多种手段：

function validateCartPayload(payload) {
  if (typeof payload !== 'object' || payload === null) {
    throw new Error('payload 必须是对象且非空');
  }
  if (!Array.isArray(payload.items)) {          // 数组必须用 Array.isArray
    throw new Error('items 必须是数组');
  }
  for (const line of payload.items) {
    if (typeof line.productId !== 'string' || line.productId.trim() === '') {
      throw new Error('productId 必须是非空字符串');
    }
    if (!Number.isInteger(line.quantity) || line.quantity <= 0) {
      throw new Error('quantity 必须是正整数');
    }
    if (typeof line.price !== 'number' || Number.isNaN(line.price)) {
      throw new Error('price 必须是合法数字');
    }
  }
  return true;
}

// 完整校验清单：typeof x === 'string' / 'number' / 'boolean'
// + x === null、Array.isArray(x)、Number.isInteger(x)、Number.isNaN(x)