作为前端开发 的入门基石JavaScript的运算符规则、页面加载机制、DOM获取、数据类型及转换是笔试、面试的核心高频考点直接决定基础题得分率。本文在原有基础上深化考点解析、补充真题陷阱、强化易错点标注、新增应试技巧摒弃冗余表述聚焦“会做题、拿满分”适配各类前端入门考试及基础面试帮你精准突破得分盲区轻松冲刺高分。一、JavaScript运算符分类核心考点必考易出选择题判断题JavaScript运算符按功能可分为6大类无需死记硬背结合真题场景理解精准掌握每类运算符的核心用法及易错点避免丢分• 算术运算符用于数值计算核心常用加、-减、*乘、/除、%取余重点、自增高频、--自减高频拓展真题考点%取余结果的符号与被除数一致如5%32-5%3-2这是笔试易丢分点号可用于字符串拼接如hello 123 → hello123属于算术运算符的特殊用法也是隐式类型转换的常见场景需重点区分“加法”与“拼接”。• 赋值运算符用于给变量赋值核心常用基础赋值、加后赋值、-减后赋值、*乘后赋值、/除后赋值、%取余后赋值真题关联必考点笔试常考简写等价写法如a 3等价于a a 3需熟练默写避免书写错误。• 比较运算符用于判断数值/类型关系核心常用等于、绝对等于重点、!不等于、!绝对不等于、大于、小于、大于等于、小于等于关键提醒满分要点比较运算符的返回值均为布尔值true/false是条件判断的核心基础会触发隐式类型转换不转换类型开发及笔试中优先使用避免隐藏bug如 0 → true笔试常考判断对错。• 逻辑运算符用于组合判断条件核心常用逻辑与、||逻辑或、!逻辑非高频考点必背短路特性——左侧为false则不执行右侧||左侧为true则不执行右侧如0 console.log(test)不会打印1 || console.log(test)也不会打印!可将任意值转为布尔值连续两次!!可精准转为布尔值如!!hello → true这是面试高频拓展点。• 三元运算符简化单行条件判断语法条件 ? 表达式1 : 表达式2得分技巧可替代简单if-else笔试中使用三元运算符可体现代码简洁性加分项注意嵌套场景如a 10 ? 大 : (a 5 ? 中 : 小)但不可嵌套过多避免可读性差。• 位运算符基于二进制运算前端开发极少使用笔试仅考查“了解即可”核心掌握、|、^、~、、无需深入掌握底层原理避免浪费时间。二、常用作判断的运算符高频考点易出简答题代码题在if判断、for循环、while循环等条件场景中仅依赖3类运算符精准区分用法避免混淆丢分结合真题示例强化记忆1. 比较运算符核心作用是判断“大小”“相等”关系是条件判断的基础真题示例if(a 5 a 10)判断a在5-10之间、if(b hello)判断b严格等于字符串hello易错点必避坑、不可写成、语法错误会直接丢分。2. 逻辑运算符核心作用是组合多个判断条件实现复杂判断真题示例if(a 3 b 10 !isLogin)判断a大于3、b小于10且用户未登录真题关联面试常考“逻辑与和逻辑或的区别”重点答出短路特性及返回值如3 5 → 53 || 5 → 3。3. 三元运算符简化条件判断真题示例let result score 60 ? 及格 : 不及格替代if(score 60){result及格}else{result不及格}代码更简洁笔试推荐使用。易错点汇总笔试丢分重灾区1. 位运算符不用于判断算术运算符仅用于数值计算不可混淆2. 逻辑运算符的短路特性容易忽略导致代码输出题丢分3. 条件判断时隐式类型转换可能导致判断逻辑错误如0 false为true优先使用规避。三、运算符优先级必考易出代码输出题提分关键运算符优先级决定代码执行顺序无需记忆全部优先级掌握核心排序真题示例可快速解题避免因顺序错误丢分核心优先级排序从高到低必背口诀小括号()最高强制改变顺序 自增/自减/-- 算术运算符先乘除取余后加减 比较运算符 逻辑运算符 赋值运算符 三元运算符最低。✅ 满分记忆口诀括号最优先先算乘除后加减先比较后逻辑最后赋值三元放最后熟练背诵直接应对代码输出题。真题示例必考题型可直接默写let res 2 3 * 4 5 3 ? 1 : 0 → 执行步骤① 3412算术运算符乘优先于加② 21214算术运算符加减③ 53true比较运算符④ 14truetrue逻辑与短路特性⑤ true?1:0 → res1三元运算符补充提分点若添加小括号let res (2 3) * 4 5 3 ? 1 : 0执行结果为1括号改变优先级先算235再算5420。四、i 和 i 的执行顺序区别高频易错必考代码输出题重灾区两者均为自增运算符核心功能都是让变量数值1唯一区别是“返回值的时机”结合真题代码易错点强化杜绝丢分4. i前置自增执行顺序 → 先自增i i 1再返回自增后的新值5. i后置自增执行顺序 → 先返回自增前的旧值再执行自增i i 1。真题高频代码示例可直接默写满分保障// 前置自增 i真题常考let a 2;let b a;// 执行步骤1. a自增为32. 将3赋值给b → 最终a3b3console.log(a, b); // 输出3 3真题常考输出结果// 后置自增 i真题常考let x 2;let y x;// 执行步骤1. 将x的旧值2赋值给y2. x自增为3 → 最终x3y2console .log(x, y); // 输出3 2真题常考输出结果// 拓展面试高频自减同理–i先自减再赋值i–先赋值再自减let c 5;let d --c; // c4d4let e c–; // c3e4满分技巧记住核心口诀“前置先自增再赋值后置先赋值再自增”补充易错点单独使用i和i效果完全一致均只自增无返回值差异仅在赋值时体现区别这是笔试常考判断题。五、等于和 绝对等于的区别经典考点必考易出选择题简答题两者核心区别是否自动进行数据类型转换这是笔试、面试的高频考点结合真题示例易错案例精准掌握杜绝丢分1. 等于宽松相等执行逻辑 → 先自动转换数据类型将两个操作数转为同一类型再比较值是否相等真题示例必背10 10 → true数字转字符串、0 false → truefalse转数字0、null undefined → true特殊情况笔试常考易错点NaN NaN → falseNaN与任何值都不相等包括自身这是笔试易丢分点。2. 绝对等于严格相等执行逻辑 → 不转换数据类型先比较“类型”类型不同直接返回false类型相同再比较值是否相等真题示例必背10 10 → false类型不同、10 10 → true类型和值都相同、0 false → false类型不同、null undefined → false类型不同。✅ 开发规范得分点简答题加分项实际开发中优先使用避免因隐式类型转换导致的隐藏bug如 0 → true逻辑判断易出错笔试中若题目问“判断两个值是否完全相等应使用哪种运算符”必答。六、JavaScript入口函数及作用必考易遗漏细节提分关键JS入口函数的核心作用是“指定代码执行时机”避免因DOM未加载完成导致无法获取元素分2种标准写法需精准区分优劣、细节及真题考点3. JS入口函数标准写法2种实操题必考// 写法1原生JS传统入口函数兼容所有浏览器笔试常考window.onload function() {// 业务代码DOM操作、事件绑定等写在这里const div document.getElementById(‘con’); // 可正常获取DOM};// 关键细节易错点window.onload 等待所有资源DOM、图片、样式、视频等加载完成后执行// 且只能绑定一个函数绑定多个会覆盖前一个笔试常考判断对错// 写法2现代推荐写法效率高面试高频document.addEventListener(‘DOMContentLoaded’, function() {// 业务代码写在这里});// 关键细节得分点仅等待DOM加载完成无需等待图片、视频等资源执行更快// 可绑定多个函数不会覆盖区别于window.onload笔试常考对比题2. 入口函数的作用3点简答题必答满分必备• 保证DOM加载完成避免JS执行时页面元素尚未渲染导致无法获取DOM元素如获取id为con的div返回null实操题常考此场景• 统一代码执行时机将所有JS逻辑包裹在入口函数内避免代码分散执行提升可读性和可维护性• 稳定执行环境确保页面结构、样式、核心资源加载就绪避免因资源未加载完成导致的代码运行异常如操作未加载的图片尺寸。七、获取页面中id为con的div元素必考实操性考点代码题得分关键JavaScript提供3种常用方法重点掌握最优写法区分优劣实操细节避免语法错误丢分适配真题场景// 方法1最优推荐实操题必写得分关键根据id直接获取const div1 document.getElementById(‘con’);// 关键细节易错点必记getElementById的参数无需加#直接写id名con加#会报错// 方法2常用适配所有CSS选择器笔试常考对比通过CSS选择器获取const div2 document.querySelector(‘#con’); // id选择器需加#仅获取第一个匹配元素// 拓展querySelector可获取任意CSS选择器匹配的元素如.box获取类名为box的元素// 方法3不推荐冗余易错笔试了解即可通过标签名筛选const divList document.getElementsByTagName(‘div’);const div3 divList[0]; // 假设id为con的div是页面第一个div实际开发中不可靠// 易错点getElementsByTagName返回的是集合 需通过索引获取不能直接操作得分技巧实操题中优先写方法1标注“最优”并说明原因效率高、针对性强、语法简单若题目要求“使用CSS选择器获取”再写方法2方法3仅作为拓展笔试很少考查无需重点记忆 。补充获取DOM后可简单写操作示例如div1.style.color red体现实操能力加分项。八、JavaScript中undefined和not defined的区别新增高频考点必考易混淆两者均与“未定义”相关但本质不同核心区别在于“变量是否声明”结合真题示例报错类型精准区分避免丢分1. undefined变量已声明但未赋值属于JavaScript合法值不会报错可正常打印补充真题常考场景函数缺少实参、对象不存在的属性默认值均为undefined真题示例可直接默写let a; // 声明未赋值console.log(a); // 输出undefined无报错function fn(num) {console.log(num); // 未传实参输出undefined}fn(); // 调用函数未传参const obj {name: ‘js’};console.log(obj.age); // 对象不存在的属性输出undefined2. not defined变量从未声明、未定义直接访问会抛出ReferenceError引用错误终止代码后续执行真题常考报错类型真题示例可直接默写console.log(b); // 报错b is not defined变量b未声明console.log(c 1); // 报错c is not defined变量c未声明无法参与运算满分记忆口诀简答题直接套用undefined已声明、未赋值无报错not defined未声明、直接用报引用错误。九、JavaScript输出数据的方法新增高频考点必考易出实操题核心掌握4种输出方法区分用法、场景及优劣适配真题实操题避免混淆• console.log()控制台输出多用于开发调试可打印任意类型数据数字、字符串、对象等不影响页面渲染是开发及笔试最常用的输出方式真题示例console.log(123, hello, {name: js}) → 控制台打印123、hello、对象。• document.write()向页面文档写入内容直接渲染在网页中易错点笔试常考页面加载完成后使用会覆盖页面原有内容如window.onload function(){document.write(test)}会覆盖整个页面适用于简单内容输出。• alert()弹出警告框强制阻断代码执行需关闭弹窗才继续只能输出文本内容复杂数据会转为字符串示例alert(分数 90) → 弹窗显示“分数90”开发中极少使用笔试重点考查用法。• confirm() / prompt()拓展考点面试高频交互类输出方式• confirm()弹出确认弹窗返回布尔值确定→true取消→false示例let isSure confirm(确定提交)• prompt()弹出输入弹窗获取用户输入内容返回输入字符串取消→null示例let name prompt(请输入姓名)。十、类型转换新增高频考点必考易出选择题代码题JavaScript是弱类型语言数据类型可自动或手动转换核心掌握“3种强制转换2种隐式转换”结合真题示例规避易错点1. 三种强制类型转换手动触发可控笔试重点• String() 强制转为字符串可将任意类型转为字符串规则清晰无陷阱真题示例String(123) → 123、String(true) → true、String(undefined) → undefined、String(null) → null。• Number() 强制转为数字核心考点注意特殊值转换规则易错点真题示例Number(123) → 123、Number(abc) → NaN、Number(true) → 1、Number(false) → 0、Number(undefined) → NaN、Number() → 0补充NaN是特殊数字与任何值都不相等包括自身笔试常考判断对错。• Boolean() 强制转为布尔值记住“6个假值”其余均为真值真题常考假值转为false0、‘’空字符串、NaN、null、undefined、false真题示例Boolean(123) → true、Boolean() → false、Boolean(null) → false、Boolean( ) → true空格字符串是真值易错点。2. 两种隐式类型转换自动触发易出陷阱题• 字符串拼接号一边为字符串时自动将另一边转为字符串再拼接真题陷阱示例123 456 → 123456不是579、num: 100 → num:100笔试常考“输出结果”。• 数学运算-、*、/、%等算术运算除号拼接外自动将数据转为数字再运算真题陷阱示例123 - 45 → 78、100 * 2 → 200、abc - 1 → NaN、10 / 2 → 5。十一、强制类型转换和隐式类型转换的区别新增高频考点易出简答题核心从“触发方式、可控性、使用场景”三个维度区分简答题直接套用精准拿分1. 触发方式不同强制类型转换开发者手动调用String()、Number()、Boolean()等方法主动转换隐式类型转换代码运行时浏览器自动触发无需手动书写方法。2. 可控性不同强制转换转换逻辑清晰规则可控不易出现Bug适合精准控制数据类型隐式转换自动执行规则隐蔽容易出现意料之外的结果如 0 → true需规避陷阱。3. 使用场景不同强制转换需要精准控制数据类型时使用如表单输入值转为数字运算隐式转换运算、字符串拼接等场景自动触发日常开发需注意规避陷阱优先用强制转换替代。满分总结必考默写版简答题直接套用提分关键4. 运算符分6类常用判断运算符为比较、逻辑、三元运算符优先级核心排序括号自增/自减算术比较逻辑赋值三元小括号可强制改变顺序5. i先自增再赋值i先赋值再自增单独使用效果一致赋值时体现区别自动转类型比数值不转类型优先使用6. JS入口函数2种写法window.onload等所有资源仅绑定1个函数、document.addEventListener(‘DOMContentLoaded’)等DOM可绑定多个核心作用是保证DOM加载、统一执行时机7. 获取id为con的div最优写法是document.getElementById(‘con’)参数不加#实操题优先使用8. undefined已声明未赋值无报错与not defined未声明直接用报引用错误口诀区分更易记9. 常用输出方法console.log()调试首选、document.write()页面写入、alert()警告弹窗拓展confirm()和prompt()交互弹窗10. 强制转换String()、Number()、Boolean()手动可控隐式转换字符串拼接、算术运算自动触发需避坑两者核心区别在触发方式、可控性、使用场景。提分提醒本文所有知识点均对应笔试/面试高频考点每个考点均包含“真题示例易错点得分技巧”可直接背诵默写重点关注标注的易错点和真题陷阱避免丢分熟练掌握后可轻松突破90分适配各类前端入门考试及基础面试。 补充所有代码示例均为真题高频题型可直接默写套用重点标注的易错点、得分技巧的内容是笔试丢分重灾区需重点记忆确保基础题不丢分、拓展题多拿分。
JavaScript核心基础通关指南：运算符、入口函数与DOM获取
作为前端开发 的入门基石JavaScript的运算符规则、页面加载机制、DOM获取、数据类型及转换是笔试、面试的核心高频考点直接决定基础题得分率。本文在原有基础上深化考点解析、补充真题陷阱、强化易错点标注、新增应试技巧摒弃冗余表述聚焦“会做题、拿满分”适配各类前端入门考试及基础面试帮你精准突破得分盲区轻松冲刺高分。一、JavaScript运算符分类核心考点必考易出选择题判断题JavaScript运算符按功能可分为6大类无需死记硬背结合真题场景理解精准掌握每类运算符的核心用法及易错点避免丢分• 算术运算符用于数值计算核心常用加、-减、*乘、/除、%取余重点、自增高频、--自减高频拓展真题考点%取余结果的符号与被除数一致如5%32-5%3-2这是笔试易丢分点号可用于字符串拼接如hello 123 → hello123属于算术运算符的特殊用法也是隐式类型转换的常见场景需重点区分“加法”与“拼接”。• 赋值运算符用于给变量赋值核心常用基础赋值、加后赋值、-减后赋值、*乘后赋值、/除后赋值、%取余后赋值真题关联必考点笔试常考简写等价写法如a 3等价于a a 3需熟练默写避免书写错误。• 比较运算符用于判断数值/类型关系核心常用等于、绝对等于重点、!不等于、!绝对不等于、大于、小于、大于等于、小于等于关键提醒满分要点比较运算符的返回值均为布尔值true/false是条件判断的核心基础会触发隐式类型转换不转换类型开发及笔试中优先使用避免隐藏bug如 0 → true笔试常考判断对错。• 逻辑运算符用于组合判断条件核心常用逻辑与、||逻辑或、!逻辑非高频考点必背短路特性——左侧为false则不执行右侧||左侧为true则不执行右侧如0 console.log(test)不会打印1 || console.log(test)也不会打印!可将任意值转为布尔值连续两次!!可精准转为布尔值如!!hello → true这是面试高频拓展点。• 三元运算符简化单行条件判断语法条件 ? 表达式1 : 表达式2得分技巧可替代简单if-else笔试中使用三元运算符可体现代码简洁性加分项注意嵌套场景如a 10 ? 大 : (a 5 ? 中 : 小)但不可嵌套过多避免可读性差。• 位运算符基于二进制运算前端开发极少使用笔试仅考查“了解即可”核心掌握、|、^、~、、无需深入掌握底层原理避免浪费时间。二、常用作判断的运算符高频考点易出简答题代码题在if判断、for循环、while循环等条件场景中仅依赖3类运算符精准区分用法避免混淆丢分结合真题示例强化记忆1. 比较运算符核心作用是判断“大小”“相等”关系是条件判断的基础真题示例if(a 5 a 10)判断a在5-10之间、if(b hello)判断b严格等于字符串hello易错点必避坑、不可写成、语法错误会直接丢分。2. 逻辑运算符核心作用是组合多个判断条件实现复杂判断真题示例if(a 3 b 10 !isLogin)判断a大于3、b小于10且用户未登录真题关联面试常考“逻辑与和逻辑或的区别”重点答出短路特性及返回值如3 5 → 53 || 5 → 3。3. 三元运算符简化条件判断真题示例let result score 60 ? 及格 : 不及格替代if(score 60){result及格}else{result不及格}代码更简洁笔试推荐使用。易错点汇总笔试丢分重灾区1. 位运算符不用于判断算术运算符仅用于数值计算不可混淆2. 逻辑运算符的短路特性容易忽略导致代码输出题丢分3. 条件判断时隐式类型转换可能导致判断逻辑错误如0 false为true优先使用规避。三、运算符优先级必考易出代码输出题提分关键运算符优先级决定代码执行顺序无需记忆全部优先级掌握核心排序真题示例可快速解题避免因顺序错误丢分核心优先级排序从高到低必背口诀小括号()最高强制改变顺序 自增/自减/-- 算术运算符先乘除取余后加减 比较运算符 逻辑运算符 赋值运算符 三元运算符最低。✅ 满分记忆口诀括号最优先先算乘除后加减先比较后逻辑最后赋值三元放最后熟练背诵直接应对代码输出题。真题示例必考题型可直接默写let res 2 3 * 4 5 3 ? 1 : 0 → 执行步骤① 3412算术运算符乘优先于加② 21214算术运算符加减③ 53true比较运算符④ 14truetrue逻辑与短路特性⑤ true?1:0 → res1三元运算符补充提分点若添加小括号let res (2 3) * 4 5 3 ? 1 : 0执行结果为1括号改变优先级先算235再算5420。四、i 和 i 的执行顺序区别高频易错必考代码输出题重灾区两者均为自增运算符核心功能都是让变量数值1唯一区别是“返回值的时机”结合真题代码易错点强化杜绝丢分4. i前置自增执行顺序 → 先自增i i 1再返回自增后的新值5. i后置自增执行顺序 → 先返回自增前的旧值再执行自增i i 1。真题高频代码示例可直接默写满分保障// 前置自增 i真题常考let a 2;let b a;// 执行步骤1. a自增为32. 将3赋值给b → 最终a3b3console.log(a, b); // 输出3 3真题常考输出结果// 后置自增 i真题常考let x 2;let y x;// 执行步骤1. 将x的旧值2赋值给y2. x自增为3 → 最终x3y2console .log(x, y); // 输出3 2真题常考输出结果// 拓展面试高频自减同理–i先自减再赋值i–先赋值再自减let c 5;let d --c; // c4d4let e c–; // c3e4满分技巧记住核心口诀“前置先自增再赋值后置先赋值再自增”补充易错点单独使用i和i效果完全一致均只自增无返回值差异仅在赋值时体现区别这是笔试常考判断题。五、等于和 绝对等于的区别经典考点必考易出选择题简答题两者核心区别是否自动进行数据类型转换这是笔试、面试的高频考点结合真题示例易错案例精准掌握杜绝丢分1. 等于宽松相等执行逻辑 → 先自动转换数据类型将两个操作数转为同一类型再比较值是否相等真题示例必背10 10 → true数字转字符串、0 false → truefalse转数字0、null undefined → true特殊情况笔试常考易错点NaN NaN → falseNaN与任何值都不相等包括自身这是笔试易丢分点。2. 绝对等于严格相等执行逻辑 → 不转换数据类型先比较“类型”类型不同直接返回false类型相同再比较值是否相等真题示例必背10 10 → false类型不同、10 10 → true类型和值都相同、0 false → false类型不同、null undefined → false类型不同。✅ 开发规范得分点简答题加分项实际开发中优先使用避免因隐式类型转换导致的隐藏bug如 0 → true逻辑判断易出错笔试中若题目问“判断两个值是否完全相等应使用哪种运算符”必答。六、JavaScript入口函数及作用必考易遗漏细节提分关键JS入口函数的核心作用是“指定代码执行时机”避免因DOM未加载完成导致无法获取元素分2种标准写法需精准区分优劣、细节及真题考点3. JS入口函数标准写法2种实操题必考// 写法1原生JS传统入口函数兼容所有浏览器笔试常考window.onload function() {// 业务代码DOM操作、事件绑定等写在这里const div document.getElementById(‘con’); // 可正常获取DOM};// 关键细节易错点window.onload 等待所有资源DOM、图片、样式、视频等加载完成后执行// 且只能绑定一个函数绑定多个会覆盖前一个笔试常考判断对错// 写法2现代推荐写法效率高面试高频document.addEventListener(‘DOMContentLoaded’, function() {// 业务代码写在这里});// 关键细节得分点仅等待DOM加载完成无需等待图片、视频等资源执行更快// 可绑定多个函数不会覆盖区别于window.onload笔试常考对比题2. 入口函数的作用3点简答题必答满分必备• 保证DOM加载完成避免JS执行时页面元素尚未渲染导致无法获取DOM元素如获取id为con的div返回null实操题常考此场景• 统一代码执行时机将所有JS逻辑包裹在入口函数内避免代码分散执行提升可读性和可维护性• 稳定执行环境确保页面结构、样式、核心资源加载就绪避免因资源未加载完成导致的代码运行异常如操作未加载的图片尺寸。七、获取页面中id为con的div元素必考实操性考点代码题得分关键JavaScript提供3种常用方法重点掌握最优写法区分优劣实操细节避免语法错误丢分适配真题场景// 方法1最优推荐实操题必写得分关键根据id直接获取const div1 document.getElementById(‘con’);// 关键细节易错点必记getElementById的参数无需加#直接写id名con加#会报错// 方法2常用适配所有CSS选择器笔试常考对比通过CSS选择器获取const div2 document.querySelector(‘#con’); // id选择器需加#仅获取第一个匹配元素// 拓展querySelector可获取任意CSS选择器匹配的元素如.box获取类名为box的元素// 方法3不推荐冗余易错笔试了解即可通过标签名筛选const divList document.getElementsByTagName(‘div’);const div3 divList[0]; // 假设id为con的div是页面第一个div实际开发中不可靠// 易错点getElementsByTagName返回的是集合 需通过索引获取不能直接操作得分技巧实操题中优先写方法1标注“最优”并说明原因效率高、针对性强、语法简单若题目要求“使用CSS选择器获取”再写方法2方法3仅作为拓展笔试很少考查无需重点记忆 。补充获取DOM后可简单写操作示例如div1.style.color red体现实操能力加分项。八、JavaScript中undefined和not defined的区别新增高频考点必考易混淆两者均与“未定义”相关但本质不同核心区别在于“变量是否声明”结合真题示例报错类型精准区分避免丢分1. undefined变量已声明但未赋值属于JavaScript合法值不会报错可正常打印补充真题常考场景函数缺少实参、对象不存在的属性默认值均为undefined真题示例可直接默写let a; // 声明未赋值console.log(a); // 输出undefined无报错function fn(num) {console.log(num); // 未传实参输出undefined}fn(); // 调用函数未传参const obj {name: ‘js’};console.log(obj.age); // 对象不存在的属性输出undefined2. not defined变量从未声明、未定义直接访问会抛出ReferenceError引用错误终止代码后续执行真题常考报错类型真题示例可直接默写console.log(b); // 报错b is not defined变量b未声明console.log(c 1); // 报错c is not defined变量c未声明无法参与运算满分记忆口诀简答题直接套用undefined已声明、未赋值无报错not defined未声明、直接用报引用错误。九、JavaScript输出数据的方法新增高频考点必考易出实操题核心掌握4种输出方法区分用法、场景及优劣适配真题实操题避免混淆• console.log()控制台输出多用于开发调试可打印任意类型数据数字、字符串、对象等不影响页面渲染是开发及笔试最常用的输出方式真题示例console.log(123, hello, {name: js}) → 控制台打印123、hello、对象。• document.write()向页面文档写入内容直接渲染在网页中易错点笔试常考页面加载完成后使用会覆盖页面原有内容如window.onload function(){document.write(test)}会覆盖整个页面适用于简单内容输出。• alert()弹出警告框强制阻断代码执行需关闭弹窗才继续只能输出文本内容复杂数据会转为字符串示例alert(分数 90) → 弹窗显示“分数90”开发中极少使用笔试重点考查用法。• confirm() / prompt()拓展考点面试高频交互类输出方式• confirm()弹出确认弹窗返回布尔值确定→true取消→false示例let isSure confirm(确定提交)• prompt()弹出输入弹窗获取用户输入内容返回输入字符串取消→null示例let name prompt(请输入姓名)。十、类型转换新增高频考点必考易出选择题代码题JavaScript是弱类型语言数据类型可自动或手动转换核心掌握“3种强制转换2种隐式转换”结合真题示例规避易错点1. 三种强制类型转换手动触发可控笔试重点• String() 强制转为字符串可将任意类型转为字符串规则清晰无陷阱真题示例String(123) → 123、String(true) → true、String(undefined) → undefined、String(null) → null。• Number() 强制转为数字核心考点注意特殊值转换规则易错点真题示例Number(123) → 123、Number(abc) → NaN、Number(true) → 1、Number(false) → 0、Number(undefined) → NaN、Number() → 0补充NaN是特殊数字与任何值都不相等包括自身笔试常考判断对错。• Boolean() 强制转为布尔值记住“6个假值”其余均为真值真题常考假值转为false0、‘’空字符串、NaN、null、undefined、false真题示例Boolean(123) → true、Boolean() → false、Boolean(null) → false、Boolean( ) → true空格字符串是真值易错点。2. 两种隐式类型转换自动触发易出陷阱题• 字符串拼接号一边为字符串时自动将另一边转为字符串再拼接真题陷阱示例123 456 → 123456不是579、num: 100 → num:100笔试常考“输出结果”。• 数学运算-、*、/、%等算术运算除号拼接外自动将数据转为数字再运算真题陷阱示例123 - 45 → 78、100 * 2 → 200、abc - 1 → NaN、10 / 2 → 5。十一、强制类型转换和隐式类型转换的区别新增高频考点易出简答题核心从“触发方式、可控性、使用场景”三个维度区分简答题直接套用精准拿分1. 触发方式不同强制类型转换开发者手动调用String()、Number()、Boolean()等方法主动转换隐式类型转换代码运行时浏览器自动触发无需手动书写方法。2. 可控性不同强制转换转换逻辑清晰规则可控不易出现Bug适合精准控制数据类型隐式转换自动执行规则隐蔽容易出现意料之外的结果如 0 → true需规避陷阱。3. 使用场景不同强制转换需要精准控制数据类型时使用如表单输入值转为数字运算隐式转换运算、字符串拼接等场景自动触发日常开发需注意规避陷阱优先用强制转换替代。满分总结必考默写版简答题直接套用提分关键4. 运算符分6类常用判断运算符为比较、逻辑、三元运算符优先级核心排序括号自增/自减算术比较逻辑赋值三元小括号可强制改变顺序5. i先自增再赋值i先赋值再自增单独使用效果一致赋值时体现区别自动转类型比数值不转类型优先使用6. JS入口函数2种写法window.onload等所有资源仅绑定1个函数、document.addEventListener(‘DOMContentLoaded’)等DOM可绑定多个核心作用是保证DOM加载、统一执行时机7. 获取id为con的div最优写法是document.getElementById(‘con’)参数不加#实操题优先使用8. undefined已声明未赋值无报错与not defined未声明直接用报引用错误口诀区分更易记9. 常用输出方法console.log()调试首选、document.write()页面写入、alert()警告弹窗拓展confirm()和prompt()交互弹窗10. 强制转换String()、Number()、Boolean()手动可控隐式转换字符串拼接、算术运算自动触发需避坑两者核心区别在触发方式、可控性、使用场景。提分提醒本文所有知识点均对应笔试/面试高频考点每个考点均包含“真题示例易错点得分技巧”可直接背诵默写重点关注标注的易错点和真题陷阱避免丢分熟练掌握后可轻松突破90分适配各类前端入门考试及基础面试。 补充所有代码示例均为真题高频题型可直接默写套用重点标注的易错点、得分技巧的内容是笔试丢分重灾区需重点记忆确保基础题不丢分、拓展题多拿分。
