Web-Dev-For-Beginners 实战练习：用 JavaScript 七种原始数据类型与对象/数组构建电商购物车

Web-Dev-For-Beginners 实战练习用 JavaScript 七种原始数据类型与对象/数组构建电商购物车【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners导读本篇文章围绕 Web-Dev-For-Beginners 中 JavaScript Basics: Data Types 一课的课后实战练习德语版原文系统讲解如何在一个现代 E-Commerce 购物车系统中逐一落地 JavaScript 的 7 种原始数据类型String、Number、Boolean、Null、Undefined、Symbol、BigInt与引用类型Object、Array。读完本文你将掌握每种类型在购物车场景中的职责、选型理由、可运行的代码范式、类型之间的交互方式并借助仓库内银行项目7-bank-project的源码印证金融金额计算、类型校验与格式化等真实工程实践。一、任务总览把数据类型放进购物车练习要求你设想自己在构建一个现代电商购物车系统对每一种数据类型完成四步分析识别Identify该数据类型的本质与用途论证Explain为什么它是购物车某项功能的最优选择示例Provide给出真实场景的 JavaScript 代码交互Describe说明它如何与购物车其他部分协作。任务强制覆盖的类型清单如下类型类别数据类型在购物车中的典型用途原始类型String商品名、描述、用户信息原始类型Number价格、数量、税费计算原始类型Boolean商品库存可用性、用户偏好、购物车状态原始类型Null有意的空值如缺失的优惠码原始类型Undefined未初始化或缺失的数据原始类型Symbol唯一标识符进阶用法原始类型BigInt大额财务计算进阶用法引用类型Object商品详情、用户档案、购物车内容引用类型Array商品列表、订单历史、分类练习还包含三个 Bonus 挑战类型强制转换Type Coercion、数据校验Data Validation与性能考量Performance Considerations并给出了量化评分标准见原文 Rubric覆盖全部 7 种原始类型及对象/数组、代码真实可运行、紧密贴合电商场景、技术准确、表达清晰是获得 90% 以上成绩的关键。二、前置知识变量与常量的声明语法在讨论类型之前先回顾课程正文2-js-basics/1-data-types/README.md中建立的基础——数据都存储在变量或常量里。声明let myVariable;只创建存储位置此时其值就是undefined赋值myVariable 123;使用赋值运算符存入值合并声明与赋值let myVariable 123;是开发者的标准写法可重新赋值myVariable 321;会替换旧值这是let的可变性特征常量const MY_VARIABLE 123;一旦赋值不可再改且必须立即初始化。注意const obj { a: 3 }; obj.a 5;是允许的——const保护的是对象引用本身而非对象内部属性引用不变量值可变。在购物车场景中税率、免费配送门槛等业务常量应使用const声明购物车中商品数量这类会持续变化的状态则应使用let。三、七大原始类型在购物车中的逐一剖析3.1 String一切文案与用户信息的载体购物车职责商品名称、SKU、描述、用户邮箱、收货地址、优惠码等一切文本数据。为什么选 String电商页面上所有展示文本——按钮标签、错误提示、订单确认信息——在 JavaScript 中都以字符串处理。字符串由单引号、双引号或反引号模板字符串包裹如This is a string、This is also a string。代码示例let productName Wireless Headphones; // 双引号 let sku WH-2024-BLK; // 单引号 let promoCode null; // 优惠码初始为 null见后文 // 拼接使用 运算符 let cartSummary productName x 2 - $99.99; // 模板字符串更推荐保留空格与换行可直接嵌入变量 let orderLine ${productName} (${sku}) — 数量: 2 — 小计: $199.98;真实场景课程正文强调忘记给字符串加引号JavaScript 会把它当成变量名。在购物车中productName来自商品数据库用户输入的优惠码来自表单——两者都是典型的字符串输入源。类型交互字符串几乎与所有其他类型相遇——商品对象要用.name取字符串属性数量数字要嵌入模板字符串渲染到页面String(product.id)可把数值型商品 ID 显式转为字符串用于 URL 路由。3.2 Number价格、数量与税费计算的核心购物车职责单价、数量、折扣金额、运费、税率百分比、购物车总价。为什么选 NumberJavaScript 的number类型统一表示整数与小数42、3.14、-5无需显式类型声明且天然支持加减乘除与取余五类算术运算符见下表出自课程正文算术运算符章节符号说明示例加法两数之和1 2 // 3-减法两数之差1 - 2 // -1*乘法两数之积1 * 2 // 2/除法两数之商1 / 2 // 0.5%取余两数相除的余数1 % 2 // 1代码示例let unitPrice 49.99; // 单价小数 let quantity 3; // 数量整数 let taxRate 0.08; // 税率 8% let subtotal unitPrice * quantity; // 149.97 let tax subtotal * taxRate; // 11.9976 let total subtotal tax; // 161.9676 // 取余的实战价值判断数量是否为偶数从而触发买二送一 let freeShippingEligible quantity % 2 0;真实场景与仓库印证仓库中的银行项目对金额类型的使用堪称教科书级范例余额展示使用Number.prototype.toFixed(2)保证始终显示两位小数7-bank-project/3-data/README.md 中updateElement(balance, account.balance.toFixed(2));会把75渲染成75.00更工程化的金额格式化在 7-bank-project/solution/app.js 的toCurrency函数中先const n Number(amount)做显式转换再用Number.isFinite(n)校验合法性最后通过Intl.NumberFormat按用户 locale 输出带货币符号的金额服务端在 7-bank-project/api/server.js 中对req.body.amount先parseFloat再isNaN检查——这正是用户输入必须先转类型再校验的工程示范。类型交互Number 与 String 交互最频繁——总价需要toFixed(2)后拼接进模板字符串与 Boolean 交互——quantity 0产生库存可用性标志与 BigInt 交互——超大金额必须升级为 BigInt 避免精度溢出。3.3 Boolean购物车的开关与决策引擎购物车职责商品是否在售、用户是否登录、是否已应用优惠、购物车是否为空、是否免运费。为什么选 Boolean布尔只有true/false两个值是程序分支决策的最小单元——是否类问题天然对应布尔。代码示例let isInStock true; // 商品在售 let isLoggedIn false; // 用户未登录 let cartIsEmpty true; // 购物车初始为空 let freeShippingApplied false; // 尚未触发免运费 // 与运算符结合产生布尔值购物车满 $100 免运费 let qualifiesForFreeShipping subtotal 100; // 布尔驱动页面渲染逻辑 if (isLoggedIn !cartIsEmpty) { showCheckoutButton(); } else { showLoginPrompt(); }真实场景课程正文强调 JavaScript 的真值/假值体系——只有 6 个假值false、0、、null、undefined、NaN其余全部为真。这在购物车中意味着if (cart.length)比if (cart.length 0)更简洁但初学者应先掌握显式比较避免隐式转换带来的困惑。类型交互布尔常由比较/算术运算产出quantity % 2 0又反过来控制if分支中字符串渲染与数字累加的执行流Boolean(promoCode)可把 null/字符串统一折叠成真值判断。3.4 Null有意的没有值购物车职责缺失的优惠码、尚未选择的配送方式、暂缺货的商品描述等明确表示为空的场景。为什么选 Nullnull表示开发者有意赋空的引用值与尚未初始化的undefined语义不同。购物车中let appliedPromo null;比let appliedPromo;更准确——前者明确表达用户没输入优惠码这一业务状态。代码示例let appliedPromo null; // 用户尚未应用任何优惠码 function applyPromo(code) { if (code null) { // 显式检查 null无优惠码时按原价结算 return subtotal; } return applyDiscount(subtotal, code); } // 读取商品的可选字段缺货描述为 null 时不渲染该区块 if (product.shortDescription ! null) { render(product.shortDescription); }类型交互null常与 Boolean 协作完成状态判断if (discountCode null)与 Object 协作——对象属性可被赋为null表示该字段存在但无值与 Undefined 的区别则是本练习的核心辨析点。3.5 Undefined未初始化的还没有值购物车职责尚未加载的商品数据、还没从接口返回的用户偏好、函数未 return 时的返回值。为什么选 Undefined访问未声明的变量或未初始化的变量属性时得到undefined它表示值尚不存在。购物车在异步加载场景中极其常见——订单详情接口未返回时order.shippingAddress就是undefined。代码示例let cartItems; // 声明未赋值 → undefined console.log(cartItems); // undefined // 从接口拉取用户档案加载完成前字段为 undefined let userProfile {}; console.log(userProfile.email); // undefined属性尚不存在 // 防御式读取合并空值运算符兜底 let shippingFee order.shippingFee ?? 0; // undefined 时回退到 0类型交互undefined与 Null 最容易混淆练习要求区分二者——typeof null object而typeof undefined undefined是两个类型最经典的差异点结合空值合并运算符??可把 undefined/null 统一收敛为安全的默认值。3.6 Symbol购物车的隐形唯一标识购物车职责作为对象属性的私有/唯一键避免键名冲突进阶用法例如给购物车条目附加内部元数据。为什么选 Symbol每次调用Symbol()都生成一个绝无重复的值即使描述相同也不相等。这使它成为对象属性键的安全选择——外部代码几乎不可能意外覆盖或冲突。代码示例const CART_ITEM_META Symbol(cartItemMeta); let cartItem { id: SKU-001, name: Wireless Headphones, quantity: 2, // 使用 Symbol 作为键存储仅供内部使用的元数据 [CART_ITEM_META]: { addedAt: Date.now(), warehouse: CN-SH } }; // 常规遍历Object.keys / for...in不会暴露 Symbol 键 console.log(Object.keys(cartItem)); // [id, name, quantity] console.log(cartItem[CART_ITEM_META].warehouse); // CN-SH类型交互Symbol 最常与 Object 协作作为对象键承载隐藏元数据其不可枚举特性与 Array 的迭代方法组合时可让购物车数据序列化JSON.stringify时自动忽略内部标记字段。3.7 BigInt大额财务计算的精度救星购物车职责超出Number.MAX_SAFE_INTEGER约 9.007e15的大整数运算——如供应链批量采购、企业级订单金额或需要精确整数计数的积分系统。为什么选 BigIntJavaScript 的number基于 IEEE 754 双精度浮点超过安全整数范围后精度丢失。BigInt通过n后缀或BigInt()构造函数表示任意精度整数适合不能容忍一分钱误差的大额计算。代码示例let bulkOrderTotal 9007199254740993n; // 超出 Number 安全整数范围 let warehouseUnits 123456789012345678n; // BigInt 只能与 BigInt 运算 let grandTotal bulkOrderTotal 1n; // 9007199254740994nNumber 会算错 // 混合使用需显式转换注意 BigInt 不能直接与 Number 混算 let displayTotal grandTotal.toString(); // 9007199254740994类型交互BigInt 不能与 Number 直接进行算术运算必须先显式转换——这是练习中进阶用法最需要注意的坑与 String 交互频繁因为展示给用户时通常要toString()与 Number 的精度对比正是性能/精度权衡的经典议题。四、引用类型把商品与购物车组织起来4.1 Object商品详情、用户档案与购物车内容的容器购物车职责一个商品的完整画像名称、价格、库存、分类、用户档案姓名、地址、偏好、购物车本体商品集合 小计 优惠状态。为什么选 Object键值对结构最适合描述一个实体的多个属性与电商领域模型一一对应。课程正文强调用const声明对象后可以修改其内部属性obj.a 5合法只是不能整体替换引用。代码示例const product { id: SKU-001, name: Wireless Headphones, price: 49.99, inStock: true, tags: [audio, bluetooth] // 对象内部嵌数组 }; const cart { items: [], // 商品条目数组 promoCode: null, // 未应用优惠码 get subtotal() { return this.items.reduce((sum, item) sum item.price * item.quantity, 0); } }; cart.items.push({ productId: product.id, quantity: 2, price: product.price }); console.log(cart.subtotal); // 99.98真实场景与仓库印证银行项目的账户对象即典型领域对象——account持有user、balance、currency、transactions等属性见 7-bank-project/solution/app.js 中新建交易时对accounts[idx].balance与accounts[idx].transactions的更新前端通过updateElement(balance, account.balance.toFixed(2))将对象属性渲染进 DOM7-bank-project/3-data/README.md。类型交互Object 是容纳其他所有类型的容器——字符串属性、数字价格、布尔库存、null 优惠码、数组条目、Symbol 元数据键与 Array 组合构成购物车的核心数据结构。4.2 Array商品列表、订单历史与分类的有序集合购物车职责购物车条目列表、历史订单、商品分类、推荐商品轮播数据。为什么选 Array有序、可迭代、自带丰富的高阶方法push、filter、map、reduce是处理一组同构数据的标准选择。代码示例let cartItems [ { productId: SKU-001, name: Wireless Headphones, quantity: 2, price: 49.99 }, { productId: SKU-002, name: USB-C Cable, quantity: 1, price: 9.99 } ]; // 添加条目 cartItems.push({ productId: SKU-003, name: Mouse Pad, quantity: 1, price: 12.50 }); // 过滤只保留有库存的商品 let availableItems cartItems.filter(item item.quantity 0); // 计算总价reduce 聚合数字 let total cartItems.reduce((sum, item) sum item.price * item.quantity, 0); // 映射生成结账确认清单的字符串行 let checkoutLines cartItems.map(item ${item.name} x ${item.quantity});类型交互Array 元素通常是 Object商品条目reduce把对象数组聚合为 Number总价map把对象数组映射为 String 数组展示行length属性与 Boolean 结合判断购物车是否为空。五、Bonus 挑战类型强制转换、数据校验与性能考量5.1 类型强制转换Type CoercionJavaScript 会在运算中自动转换类型购物车是重灾区// 字符串 数字 → 拼接不是相加 5 10; // 510字符串优先 5 * 10; // 50乘除会强制转成数字 5 - 2; // 3 // 经典 bug来自表单的数量是字符串 let quantityInput 3; // input 的值永远是字符串 let unitPrice 49.99; let lineTotal unitPrice * quantityInput; // 149.97* 强制转换碰巧正确 let badTotal unitPrice quantityInput; // 49.993 触发了拼接 // 对策显式转换绝不依赖隐式行为 let qty Number(quantityInput); let safeTotal unitPrice * qty;课程正文的思考题正好呼应这一点1 1 2而1 1 11、1 1 11——运算符在任一操作数为字符串时执行拼接而非加法。工程上应使用Number()、parseInt()、parseFloat()做显式转换这正是银行项目 API 的做法amount parseFloat(amount)7-bank-project/api/server.js。5.2 数据校验Data Validation处理用户输入前必须先验证类型。参考银行项目的三层校验范式7-bank-project/solution/app.js 与 7-bank-project/api/server.jsfunction validateCartInput(input) { // 1. 基础存在性检查 if (!input) return { valid: false, reason: Missing input }; // 2. 数量必须是有限数字 const qty Number(input.quantity); if (!Number.isFinite(qty) || qty 0) { return { valid: false, reason: Quantity must be a positive number }; } // 3. 商品名必须是非空字符串 const name String(input.name || ).trim(); if (name.length 0) { return { valid: false, reason: Product name is required }; } return { valid: true, data: { name, qty } }; } // 用法先验证再入库 const result validateCartInput({ name: Mouse Pad, quantity: 2 }); if (result.valid) { cartItems.push(result.data); } else { console.error(result.reason); // 校验失败给出可读错误 }关键校验手段Number.isFinite()判定有限数字、Number.isNaN()判定 NaN、typeof x string判定字符串、Array.isArray(x)判定数组、Object.prototype.toString.call(x)区分 null 与普通对象。5.3 性能考量Performance Considerations购物车在何种场景下要权衡数据类型精度 vs 性能常规金额用number双精度浮点足够且运算最快超安全整数范围、对精度零容忍的财务累计才升级BigInt后者运算开销更高且需显式转换才能与 Number 混用对象 vs 数组需要按键随机访问用 ObjectO(1) 查找需要有序迭代、过滤、聚合用 Array高阶方法 缓存友好购物车条目列表用数组 商品 ID 索引对象是常见组合不可变更新大列表频繁增删时const 展开运算符生成新数组[...cartItems, newItem]虽产生新引用但配合框架的引用比较反而能避免整棵视图树重渲染字符串构建循环内大量拼接字符串优先用数组join()或模板字符串避免频繁创建中间字符串对象。六、提交指南与自检清单练习的提交要求原文 Submission Guidelines可转化为以下完成度清单每个数据类型使用独立 H2 标题结构统一为购物车职责 / 选型理由 / 代码示例 / 真实场景 / 类型交互全部 9 类数据7 原始 Object Array无一遗漏且示例可直接在浏览器控制台或 Node 中运行示例全部采用真实电商场景价格计算、优惠码、库存、订单历史而非抽象演示讲解语言面向初学者先给结论再给原因最后给代码至少完成一个 Bonus 挑战推荐类型强制转换 数据校验组合对照 Rubric 评分表DataType Coverage、Code Examples、Real-world Application、Technical Accuracy、Communication、Bonus Elements 六项均达到 Exemplary 描述。七、学习目标达成检验完成本练习后你应当能够对应原文 Learning Objectives✅理解JavaScript 七种原始数据类型的定义与行为差异重点区分 null 与 undefined、Number 与 BigInt✅应用把每种类型映射到购物车的具体业务字段形成字段 → 类型 → 理由的决策链✅分析面对同一需求如金额能论证为什么选 Number/BigInt/String 中的哪一个✅创建写出真实、可运行、带注释的购物车代码并通过toFixed、Number.isFinite、parseFloat等手法对齐仓库内银行项目的工程实践7-bank-project/3-data/README.md、7-bank-project/solution/app.js、7-bank-project/api/server.js✅解释用初学者能听懂的语言讲清为什么5 10是510而不是15✅连接把底层概念连接到真实应用——这正是本仓库 2-js-basics 课程 的设计宗旨四课循序渐进从数据类型出发逐步走向函数、决策与循环最终支撑起银行、聊天室等完整项目。【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考