定制网站平台的安全设计,wap平台,旅游网站的设计与实现开题报告,天津网络优化网站建设前言 “学了几个JS单词#xff0c;但连不成句子#xff1f;别急#xff0c;这篇让你把零散的语法点#xff0c;像拼乐高一样组合成真正能用的程序。” 一、变量声明#xff1a;不只是var、let、const那么简单 javascript // 1. 基本声明 let 名字 “小明” // let#…前言“学了几个JS单词但连不成句子别急这篇让你把零散的语法点像拼乐高一样组合成真正能用的程序。”一、变量声明不只是var、let、const那么简单javascript// 1. 基本声明let 名字 “小明” // let可变的标签const 生日 “2000-01-01” // const不可变的标签var 旧方式 “不推荐但需要了解” // var老派的声明// 2. 批量声明let a 1, b 2, c 3 // 一行声明多个// 3. 先声明后赋值let 用户等级 // 声明时不赋值用户等级 “VIP” // 稍后赋值console.log(用户等级) // 输出: VIP// 4. 变量的作用域重点function 测试作用域() {var var变量 “var的作用域是函数级”let let变量 “let的作用域是块级”const const变量 “const的作用域也是块级”if (true) { var var在if里 我可以在if外面被访问 let let在if里 我只能在if里面被访问 } console.log(var在if里) // ✅ 可以访问 // console.log(let在if里) // ❌ 报错未定义}测试作用域()变量选择指南用const除非你知道变量需要重新赋值需要重新赋值时用let除非维护老代码否则不用var二、数据类型深入理解7种魔法材料javascript// 1. 原始类型7种let 字符串 “Hello” // Stringlet 数字 42 // Number包括整数、小数let 大整数 9007199254740991n // BigInt超大整数let 布尔值 true // Booleanlet 空值 null // Null表示无let 未定义 undefined // Undefined未赋值let 唯一值 Symbol(“唯一标识”) // Symbol唯一标识符// 2. 对象类型万物皆对象let 对象 { 名字: “小明”, 年龄: 20 }let 数组 [1, 2, 3]let 函数 function() { console.log(“我是函数”) }let 日期 new Date()// 3. 类型检测console.log(typeof “字符串”) // “string”console.log(typeof 42) // “number”console.log(typeof true) // “boolean”console.log(typeof undefined) // “undefined”console.log(typeof null) // “object”历史遗留bugconsole.log(typeof {}) // “object”console.log(typeof []) // “object”数组也是对象console.log(typeof function(){}) // “function”// 4. 类型转换let 字符串转数字 Number(“123”) // 123let 数字转字符串 String(123) // “123”let 布尔转数字 Number(true) // 1let 数字转布尔 Boolean(0) // false0是falsy值let 自动转换 “答案是” 42 // “答案是42”隐式转换三、运算符不只是加减乘除javascript// 1. 算术运算符let a 10, b 3console.log(a b) // 13console.log(a - b) // 7console.log(a * b) // 30console.log(a / b) // 3.333…console.log(a % b) // 1取余console.log(a ** b) // 1000指数console.log(a) // 10后自增先返回值再1console.log(a) // 12先自增先1再返回值// 2. 比较运算符console.log(10 “10”) // true宽松相等只比较值console.log(10 “10”) // false严格相等比较值和类型console.log(10 ! “10”) // false宽松不等console.log(10 ! “10”) // true严格不等console.log(10 5) // trueconsole.log(10 5) // falseconsole.log(10 10) // trueconsole.log(10 5) // false// 3. 逻辑运算符let 有钱 truelet 有时间 falseconsole.log(有钱 有时间) // false与两个都为真console.log(有钱 || 有时间) // true或至少一个为真console.log(!有钱) // false非取反// 短路求值重要let 用户名 “”let 默认名 用户名 || “匿名用户” // “匿名用户”console.log(默认名)let 用户配置 nulllet 配置 用户配置?.主题 ?? “默认主题” // “默认主题”空值合并// 4. 赋值运算符let x 10x 5 // x x 5现在x是15x - 3 // x x - 3现在x是12x * 2 // x x * 2现在x是24x / 4 // x x / 4现在x是6x % 4 // x x % 4现在x是2// 5. 三元运算符条件运算符let 分数 85let 评级 分数 90 ? “优秀” : 分数 60 ? “及格” : “不及格”console.log(评级) // “及格”四、条件分支让程序学会选择javascript// 1. if-else基础版let 时间 14if (时间 12) {console.log(“上午好”)} else if (时间 18) {console.log(“下午好”)} else {console.log(“晚上好”)}// 2. if-else简化版if (时间 12) console.log(“上午好”)else console.log(“下午或晚上好”)// 3. switch-case多分支选择let 星期 3let 日程安排switch (星期) {case 1: // 星期一日程安排 “周会”break // 必须break否则会继续执行下面的casecase 2:日程安排 “写代码”breakcase 3:日程安排 “学习新技术”breakcase 4:日程安排 “代码审查”breakcase 5:日程安排 “项目总结”breakcase 6:case 7: // 周六和周日相同日程安排 “休息”breakdefault: // 其他情况日程安排 “未知”}console.log(星期${星期}的日程${日程安排})// 4. 现代switch可以返回值的版本let 月份 5let 季节 (() {switch (月份) {case 12: case 1: case 2: return “冬季”case 3: case 4: case 5: return “春季”case 6: case 7: case 8: return “夏季”case 9: case 10: case 11: return “秋季”default: return “未知季节”}})()console.log(${月份}月是${季节})五、循环控制重复的艺术javascript// 1. for循环最常用console.log(“ for循环开始”)for (let i 0; i 5; i) {console.log(第${i 1}次循环)}// 2. while循环条件驱动console.log(“ while循环开始”)let 计数器 0while (计数器 3) {console.log(计数器${计数器})计数器 // 不要忘记递增否则死循环}// 3. do-while循环至少执行一次console.log(“ do-while循环开始”)let 输入 “”do {输入 prompt(“请输入’退出’来结束循环”)console.log(你输入了${输入})} while (输入 ! “退出”)// 4. 遍历数组三种方式let 水果 [“”, “”, “”, “”]// 方式1传统for循环for (let i 0; i 水果.length; i) {console.log(水果${i}: ${水果[i]})}// 方式2for…of循环推荐for (let 单个水果 of 水果) {console.log(我喜欢吃${单个水果})}// 方式3forEach方法水果.forEach((单个水果, 索引) {console.log(第${索引}种水果是${单个水果})})// 5. 遍历对象let 学生 {姓名: “小明”,年龄: 18,成绩: 95,城市: “北京”}for (let 属性 in 学生) {console.log(${属性}: ${学生[属性]})}// 6. 循环控制关键词console.log(“ 循环控制演示”)for (let i 0; i 10; i) {if (i 3) {continue // 跳过本次循环继续下一次}if (i 7) { break // 跳出整个循环 } console.log(i) // 输出: 0, 1, 2, 4, 5, 6}六、函数封装你的魔法javascript// 1. 函数声明会被提升function 打招呼(名字) {return你好${名字}}console.log(打招呼(“小明”)) // 可以在这里调用即使函数定义在后面也有效// 2. 函数表达式不会被提升const 计算面积 function(长, 宽) {return 长 * 宽}console.log(计算面积(5, 3)) // 15// 3. 箭头函数现代写法const 计算体积 (长, 宽, 高) 长 * 宽 * 高console.log(计算体积(2, 3, 4)) // 24// 多行箭头函数需要大括号和returnconst 分析数据 (数据) {let 总和 数据.reduce((a, b) a b, 0)let 平均值 总和 / 数据.lengthreturn { 总和, 平均值 }}// 4. 默认参数function 创建用户(名字, 年龄 18, 城市 “北京”) {return { 名字, 年龄, 城市 }}console.log(创建用户(“小红”)) // 使用默认年龄和城市// 5. 剩余参数接收任意数量参数function 计算总和(…数字) {return 数字.reduce((总和, 当前) 总和 当前, 0)}console.log(计算总和(1, 2, 3, 4, 5)) // 15// 6. 立即执行函数IIFE(function() {console.log(“这个函数会立即执行”)})()// 7. 递归函数自己调用自己function 计算阶乘(n) {if (n 1) return 1return n * 计算阶乘(n - 1)}console.log(计算阶乘(5)) // 120七、综合实战智能评分系统javascriptfunction 智能评分系统(学生列表) {// 参数验证if (!Array.isArray(学生列表)) {throw new Error(“参数必须是数组”)}let 结果 { 总人数: 0, 平均分: 0, 优秀率: 0, 不及格率: 0, 分数分布: {}, 前3名: [] } // 1. 数据预处理 let 有效学生 学生列表.filter(学生 { return 学生 typeof 学生.分数 number 学生.分数 0 学生.分数 100 }) if (有效学生.length 0) { return 没有有效数据 } 结果.总人数 有效学生.length // 2. 计算统计信息 let 总分 0 for (let 学生 of 有效学生) { 总分 学生.分数 // 分数分布 let 分数段 Math.floor(学生.分数 / 10) * 10 结果.分数分布[分数段] (结果.分数分布[分数段] || 0) 1 // 优秀和不及格统计 if (学生.分数 90) 结果.优秀率 if (学生.分数 60) 结果.不及格率 } 结果.平均分 总分 / 结果.总人数 结果.优秀率 (结果.优秀率 / 结果.总人数 * 100).toFixed(1) % 结果.不及格率 (结果.不及格率 / 结果.总人数 * 100).toFixed(1) % // 3. 找出前3名 结果.前3名 [...有效学生] .sort((a, b) b.分数 - a.分数) .slice(0, 3) .map(学生 ${学生.姓名}: ${学生.分数}分) return 结果}// 测试数据let 测试学生 [{ 姓名: “小明”, 分数: 95 },{ 姓名: “小红”, 分数: 88 },{ 姓名: “小刚”, 分数: 76 },{ 姓名: “小丽”, 分数: 92 },{ 姓名: “小强”, 分数: 45 },{ 姓名: “小华”, 分数: 68 }]let 分析结果 智能评分系统(测试学生)console.log(“ 评分系统分析结果”)for (let 项目 in 分析结果) {console.log(${项目}: ${JSON.stringify(分析结果[项目])})}八、常见陷阱与最佳实践javascript// 陷阱1变量提升的坑console.log(变量提升) // undefined不会报错因为var会提升var 变量提升 “我被提升了”// console.log(let提升) // ❌ 报错let不会提升// let let提升 “我不会被提升”// 陷阱2浮点数精度问题console.log(0.1 0.2) // 0.30000000000000004console.log(0.1 0.2 0.3) // false// 解决方案console.log(Math.abs(0.1 0.2 - 0.3) Number.EPSILON) // true// 陷阱3类型转换的坑console.log([] ![]) // true什么鬼console.log([] []) // “”空字符串console.log({} {}) // “[object Object][object Object]”// 最佳实践始终使用严格相等console.log([] ![]) // false这才合理// 最佳实践1使用const优先const 配置 {网站名: “我的网站”,主题: “dark”,语言: “zh-CN”}// 最佳实践2函数参数使用默认值function 获取用户信息(用户ID, 选项 {}) {const 默认选项 { 详细: false, 缓存: true }选项 { …默认选项, …选项 }// … 函数体}// 最佳实践3使用模板字符串let 用户 { 名字: “小明”, 年龄: 20 }let 消息 用户${用户.名字}今年${用户.年龄}岁${用户.年龄 18 ? 已成年 : 未成年}console.log(消息)九、从会写到写好的思维转变可读性变量名要像注释一样清晰可维护性函数要短小单一一个函数只做一件事可测试性纯函数优先避免副作用可扩展性考虑未来可能需要修改的地方最后的心法语法是工具思维才是关键。当你写代码时不仅要思考能不能运行更要思考别人能不能看懂、“三个月后的我能不能看懂”。现在回到浏览器控制台把这些语法点一个一个敲进去。每理解一个概念就试着用它解决一个小问题。编程的路上每个啊哈我明白了的时刻都是最珍贵的奖励。这篇语法指南帮你理清思路了吗点赞/收藏是最好的鼓励 评论区留下你遇到的最困惑的JS语法问题我们一起攻克它。