前端基础博客：JavaScript 核心基础知识点总结

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