Web 前端 JS 基本语法速成指南2026 年最新实用版适合 0-3 个月快速上手JavaScript简称 JS是目前 Web 前端最核心的编程语言几乎所有交互、动态效果、数据处理都靠它。下面按最常用、最常考的顺序整理基本语法建议边看边在浏览器控制台F12 → Console敲代码验证。1. 声明变量var / let / const// 旧时代不推荐新项目使用varname张三;// 函数作用域 变量提升// 现代标准强烈推荐letage25;// 块级作用域if、for、{} 都算块constPI3.14159;// 常量不能重新赋值但对象/数组内容可改constperson{name:李四};person.age30;// 合法对象引用没变// person {}; // 非法会报错面试金句let / const 是 ES6 引入的块级作用域var 有变量提升和函数作用域问题现代项目一律用 let const。2. 数据类型8 种类型例子typeof 结果特点Number42, 3.14, NaN, Infinity“number”所有数字都是浮点数String“hello”, ‘world’,模板“string”单/双/反引号都行Booleantrue, false“boolean”—Undefinedlet x;“undefined”未赋值Nulllet y null;“object”历史遗留主动清空对象引用SymbolSymbol(‘id’)“symbol”ES6 唯一值通常做对象键BigInt12345678901234567890n“bigint”处理超大整数Object{}, [], function(){} 等“object” / “function”引用类型常见陷阱console.log(typeofnull);// objectbug记住就好console.log([]instanceofArray);// trueconsole.log(typeof[]);// object3. 模板字符串ES6 最常用constname重阳;constage28;console.log(我叫${name}今年${age}岁);// 反引号 ${}// 多行字符串consthtmldiv h1欢迎${name}/h1 /div;4. 运算符重点掌握短路逻辑// 逻辑运算符短路leta0||默认值;// 默认值0 转 boolean 为 falseletb不会执行;// 遇到假值就返回假值// 空值合并ES2020letusernameuserInput??匿名;// 只有 null/undefined 才用默认值// 可选链ES2020——防报错神器console.log(user?.address?.city);// user 不存在也不会报错返回 undefined5. 条件判断 三元运算// if-elseif(score90){gradeA;}elseif(score80){gradeB;}else{gradeC;}// 三元运算符一行写法letmsgage18?成人:未成年;// 多个条件用 || 短路isLoginshowDashboard();// 已登录才执行6. 循环for / for…of / for…in// 传统 for最常用for(leti0;iarr.length;i){console.log(arr[i]);}// for...of遍历值数组/字符串/Map/Set 推荐for(constitemofarr){console.log(item);}// for...in遍历键主要用于对象for(constkeyinperson){console.log(key,person[key]);}7. 函数声明 箭头函数ES6// 传统函数functionadd(a,b){returnab;}// 箭头函数最常用写法constadd(a,b)ab;// 单行省略 return 和 {}constgreetname你好${name};// 单参数省略 ()constsayHi()console.log(Hi);// 无参// this 指向区别箭头函数没有自己的 thisconstobj{name:重阳,say:function(){console.log(this.name);},// this → objsayArrow:()console.log(this.name)// this → window/global或 undefined};8. 数组常用方法必须掌握前 10 个constarr[1,2,3,4,5];// 增删改查arr.push(6);// 尾部添加arr.pop();// 尾部删除arr.unshift(0);// 头部添加arr.shift();// 头部删除arr.splice(2,1,99);// 从索引2开始删1个插入99// 遍历 转换arr.forEach(itemconsole.log(item));constdoubledarr.map(xx*2);// [2,4,6,8,10]constevensarr.filter(xx%20);// [2,4]constsumarr.reduce((acc,cur)acccur,0);// 求和arr.sort((a,b)a-b);// 升序排序arr.includes(3);// truearr.indexOf(4);// 3arr.join(-);// 1-2-3-4-59. 对象操作ES6 写法constuser{name:重阳,age:28,city:Kansas City};// 解构赋值const{name,age}user;console.log(name,age);// 重阳 28// 属性简写 计算属性名constkeyscore;conststudent{name,age,[key]:95,// 计算属性sayHi(){console.log(hi)}// 方法简写};// 展开运算符constcopy{...user,job:前端};10. 类型转换 真假值假值falsy只有 6 个false、0、、null、undefined、NaN其他都为真包括 []、{}、“0”、“false” 等显式转换Number(123)// 123String(123)// 123Boolean(0)// falseparseInt(12px)// 12parseFloat(3.14)// 3.14快速自测清单建议全部敲一遍let 和 const 的区别箭头函数和普通函数 this 区别数组 map、filter、reduce 分别返回什么怎么判断一个变量是否为数组Array.isArray()可选链 ?. 和空值合并 ?? 的区别模板字符串和普通字符串区别掌握以上内容基本能应付 80% 的前端 JS 基础面试和日常开发。你现在是刚入门想系统练手还是已经有基础想针对某个部分比如 this 指向、闭包、Promise、async/await深入告诉我你的当前水平和目标我可以给你更精准的进阶路线 练习题。