你好我是你们的老朋友。很多刚接触前端的朋友都会遇到同一个问题看了大量 HTML 和 CSS 教程能写出漂亮的静态页面但一碰到 JavaScriptJS就卡住了。原因很简单——HTML 和 CSS 是标记语言写法相对固定而 JS 是一门真正的编程语言涉及变量、函数、逻辑、数据类型等概念需要换一套“编程思维”来学。这篇文章就是为你准备的 JS 核心语法速成指南。我会用最简单的方式把前端开发最常用的 JS 知识点串起来。不需要你提前掌握任何编程基础只要跟着文章敲一遍代码30 分钟左右就能建立起对 JS 的整体认知。读完你会发现JS 并没有想象中那么难。本文适合下面几类读者刚学完 HTML 和 CSS、准备进军 JavaScript 的新手。学过 JS 但知识点零散、想系统梳理一遍的初学者。准备前端面试需要快速复习核心语法的求职者。后端转前端想快速了解 JS 语法特点的开发者。下面我们直接开始。1. 认识 JavaScript1.1 JavaScript 是什么JavaScript 是一种运行在浏览器中的脚本语言也可以借助 Node.js 运行在服务器端。它的主要作用是让网页“动起来”——处理用户点击、表单校验、数据请求、页面动态渲染等操作。打个比方如果把网页比作一栋房子HTML 是房子的结构墙壁、门窗CSS 是装修颜色、大小、位置那么 JavaScript 就是水电系统——让灯能亮、空调能转、房子真正“活”起来。现在的前端开发中JavaScript 几乎无处不在网页交互特效轮播图、弹窗、表单验证。前后端数据交互Ajax、Fetch、Axios。单页应用开发Vue、React、Angular。小程序开发、桌面应用开发Electron、服务端开发Node.js。1.2 JavaScript 和 Java 的关系很多新手会问JavaScript 和 Java 有什么关系答案很简单没有关系。只是因为 JavaScript 刚诞生时Java 语言非常火爆为了借势取名 JavaScript。两者的语法、运行环境、应用场景完全不同。你只需要学习 JavaScript 本身即可不必纠结与 Java 的关系。1.3 怎么运行 JavaScript学习阶段最简单的运行方式有两种第一种直接在浏览器控制台运行。打开 Chrome 浏览器按F12打开开发者工具切换到 Console控制台面板输入 JS 代码回车即可执行。第二种在 HTML 文件中通过script标签引入 JS 文件。这是实际项目中常用的方式。下面我们先创建一个最简单的 HTML 文件后面所有示例都可以在这个环境中运行。!-- 文件路径demo.html -- !DOCTYPE html html langzh-CN head meta charsetUTF-8 titleJS 速成入门/title /head body h1 idtitleHello JavaScript/h1 !-- 在页面底部引入 JS 文件 -- script srcdemo.js/script /body /html再创建一个demo.js文件// 文件路径demo.js console.log(Hello, JavaScript!);用浏览器打开demo.html按F12打开控制台就能看到输出结果。这是学习 JS 最常见、也最方便的环境。2. 变量与数据类型2.1 变量的声明方式变量用来存储数据。JS 中有三种声明变量的方式var、let、const。在早期 JS 版本中var是唯一的变量声明方式。但var存在作用域混乱的问题后面会讲到所以 ES6ECMAScript 2015新增了let和const。现在的实际开发中推荐默认使用const变量需要重新赋值时使用let尽量避免使用var。// 使用 var老代码中常见新手不建议使用 var name 小明; // 使用 let变量值可以改变 let age 18; age 19; // 允许重新赋值 // 使用 const常量声明后不可改变 const birthday 2005-06-01; birthday 2005-06-02; // 报错Assignment to constant variable. console.log(name, age, birthday);这里有一个容易让新手困惑的点const声明的对象和数组里面的内容可以修改吗答案是可以的。const限制的是“变量指向的地址不能变”而不是“地址里的内容不能变”。看下面的示例const person { name: 小红, age: 20 }; // 允许修改属性值 person.age 21; // 允许新增属性 person.city 上海; console.log(person); // { name: 小红, age: 21, city: 上海 } // 但不允许重新赋值给 person // person {}; 报错面试中经常考这一点请一定记牢。2.2 基本数据类型JavaScript 中最常用的基本数据类型有七种数据类型说明示例Number数值包括整数和小数42、3.14String字符串用引号包裹你好、helloBoolean布尔值true、falseUndefined变量声明但未赋值let a;Null空值表示“没有对象”let b null;BigInt大整数12345678901234567890nSymbol唯一值Symbol(id)我们可以用typeof运算符查看一个变量的数据类型let num 42; let str hello; let flag true; let a; let b null; console.log(typeof num); // number console.log(typeof str); // string console.log(typeof flag); // boolean console.log(typeof a); // undefined console.log(typeof b); // object 注意这是 JS 的一个历史遗留问题注意最后一行typeof null返回的是object而不是null。这是 JavaScript 语言早期设计时留下的 Bug官方一直没有修复面试中经常被问到知道这个现象即可。2.3 类型转换实际开发中经常需要把一种类型转换为另一种类型。最常见的场景是从输入框拿到的是字符串但我们需要把它当作数字进行运算。let input 25; // 字符串转数字 let num1 Number(input); let num2 parseInt(input, 10); let num3 parseFloat(3.14); console.log(num1); // 25 console.log(num2); // 25 console.log(num3); // 3.14 // 使用 号也可以快速转数字 let num4 input; console.log(num4); // 25 // 数字转字符串 let price 99; console.log(String(price)); // 99 console.log(price.toString()); // 99 console.log(price ); // 99利用 号拼接字符串 // 转布尔值 console.log(Boolean(0)); // false console.log(Boolean()); // false console.log(Boolean(null)); // false console.log(Boolean(undefined));// false console.log(Boolean(hello)); // true console.log(Boolean(42)); // true这里有一个经典坑点25 1的结果是251而不是26。因为当号一边是字符串时它会执行字符串拼接而不是加法。console.log(25 1); // 251字符串拼接 console.log(25 - 1); // 24减号不支持字符串拼接会转成数字计算 console.log(25 * 2); // 50 console.log(25 / 5); // 5理解这一点对后续避免逻辑错误非常有帮助。3. 运算符与流程控制3.1 常用运算符JS 运算符分为几类这里列出最常用的一部分算术运算符let a 10; let b 3; console.log(a b); // 13 console.log(a - b); // 7 console.log(a * b); // 30 console.log(a / b); // 3.3333333333333335 console.log(a % b); // 1取余数 console.log(a ** 2); // 100幂运算比较运算符console.log(5 5); // true只比较值不比较类型 console.log(5 5); // false同时比较值和类型 console.log(5 ! 5); // false console.log(5 ! 5); // true console.log(10 5); // true console.log(10 10); // true开发中强烈推荐使用和!避免因为隐式类型转换导致难以排查的 Bug。逻辑运算符let age 20; let hasTicket true; console.log(age 18 hasTicket); // true且and两边都 true 才为 true console.log(age 18 || hasTicket); // true或or一边为 true 即为 true console.log(!hasTicket); // false非not取反赋值运算符let count 5; count 3; // 相当于 count count 3结果为 8 count - 2; // 相当于 count count - 2结果为 6 count * 2; // 相当于 count count * 2结果为 12 count / 4; // 相当于 count count / 4结果为 3 console.log(count);3.2 条件判断if / else if / else条件判断用来根据不同的情况执行不同的代码。前端最常见的场景是根据用户是否登录显示不同的界面。let score 75; if (score 90) { console.log(优秀); } else if (score 60) { console.log(及格); } else { console.log(不及格); } // 三元运算符简洁版的 if-else let result score 60 ? 通过 : 不通过; console.log(result); // 通过三元运算符常用于简单判断写起来比较简洁。但如果条件嵌套过多反而会影响可读性建议只在逻辑简单时使用。3.3 循环for / while循环用来重复执行某段代码。最常见的场景是遍历数组。for 循环// 输出 1 到 5 for (let i 1; i 5; i) { console.log(i); } // 遍历数组 let fruits [苹果, 香蕉, 橙子]; for (let i 0; i fruits.length; i) { console.log(fruits[i]); }while 循环let i 0; while (i 3) { console.log(当前 i 的值为 i); i; }for...of 循环ES6 新增let fruits [苹果, 香蕉, 橙子]; for (let fruit of fruits) { console.log(fruit); }for...of写法更简洁推荐在遍历数组时优先使用。还有一种for...in循环主要用来遍历对象的属性名。但由于它会把原型链上的属性也遍历出来容易出现意料之外的结果实际开发中不建议随意使用。4. 函数4.1 函数的声明与调用函数是一段可以被重复调用的代码块。函数的诞生让代码从“顺序执行”变成了“按需执行”这是编程思维的重要一步。// 函数声明 function greet(name) { return 你好 name ; } // 函数调用 let message greet(小明); console.log(message); // 你好小明来拆解一下函数的结构function声明函数的关键字。greet函数名自己定义建议用见名知义的动词或动词短语。name参数调用函数时传入的数据可以有多个用逗号分隔。return返回值函数执行后得到的结果。如果不需要返回值可以省略。4.2 函数表达式与箭头函数除了上面的函数声明方式JS 还支持把函数赋值给变量这种方式叫函数表达式// 函数表达式 const add function (a, b) { return a b; }; console.log(add(3, 5)); // 8ES6 推出了箭头函数写法更简洁现在是前端开发的主流写法// 箭头函数 const add (a, b) { return a b; }; // 如果函数体只有一行 return可以进一步简化 const addSimple (a, b) a b; // 如果只有一个参数甚至可以省略括号 const double x x * 2; console.log(add(3, 5)); // 8 console.log(addSimple(3, 5)); // 8 console.log(double(4)); // 8箭头函数不仅是语法糖它和普通函数在this的指向上也有区别。this是 JS 中一个比较进阶的概念新手阶段只需要记住在对象方法、事件回调等场景中箭头函数的this指向更符合直觉。随着学习深入你会慢慢体会到这一点。4.3 参数默认值与剩余参数在实际开发中经常需要处理“调用函数时参数没传全”的情况。ES6 提供了参数默认值语法function greet(name 游客) { return 你好 name ; } console.log(greet()); // 你好游客 console.log(greet(小红)); // 你好小红剩余参数用来收集多余的参数function sum(...numbers) { let total 0; for (let num of numbers) { total num; } return total; } console.log(sum(1, 2, 3)); // 6 console.log(sum(1, 2, 3, 4, 5)); // 154.4 作用域与变量提升作用域决定了变量在哪些地方可以被访问。JS 中有全局作用域、函数作用域和块级作用域。let global 全局变量; function show() { let local 局部变量; console.log(global); // 可以访问全局变量 console.log(local); // 可以访问局部变量 } show(); // console.log(local); // 报错local is not defined外部无法访问函数内部变量var和let在作用域上的区别是面试高频题if (true) { var a 1; let b 2; } console.log(a); // 1var 没有块级作用域 console.log(b); // 报错b is not definedlet 有块级作用域再来看变量提升console.log(x); // undefined不会报错 var x 10; // 上面代码等价于 // var x; // console.log(x); // x 10;这种现象叫变量提升是var的典型问题很容易导致代码逻辑混乱。而let和const不存在变量提升// console.log(y); // 报错Cannot access y before initialization let y 20;这也是为什么不推荐使用var的核心原因之一。理解作用域后再看网上的一些代码就不会懵了。5. 数组与对象5.1 数组的常用操作数组用来存放一系列数据。JS 数组可以存放不同类型的元素但在实际项目中我们通常会保持数组内元素类型一致。let fruits [苹果, 香蕉]; let numbers [1, 2, 3, 4, 5]; // 取值和赋值 console.log(fruits[0]); // 苹果 fruits[1] 西瓜; console.log(fruits); // [苹果, 西瓜] // 获取数组长度 console.log(numbers.length); // 5 // 添加和删除元素 fruits.push(橙子); // 末尾添加 console.log(fruits); // [苹果, 西瓜, 橙子] fruits.pop(); // 删除末尾元素 console.log(fruits); // [苹果, 西瓜] fruits.unshift(草莓); // 开头添加 console.log(fruits); // [草莓, 苹果, 西瓜] fruits.shift(); // 删除开头元素 console.log(fruits); // [苹果, 西瓜]5.2 数组的遍历与查找除了传统的for循环和for...of循环开发中最常用的是数组自带的forEach、map、filter、find等方法。这些方法配合箭头函数使用代码非常简洁。forEach遍历数组无返回值。let list [HTML, CSS, JS]; list.forEach(function (item, index) { console.log(index, item); }); // 箭头函数写法 list.forEach((item, index) { console.log(index, item); });map遍历数组并返回一个新数组常用于数据转换。let numbers [1, 2, 3]; // 把每个数字乘以 2 let doubled numbers.map(num num * 2); console.log(doubled); // [2, 4, 6]filter过滤出符合条件的元素。let scores [55, 85, 72, 43, 96]; // 筛选出及格60的成绩 let passed scores.filter(score score 60); console.log(passed); // [85, 72, 96]find返回第一个符合条件的元素。let users [ { id: 1, name: 小明 }, { id: 2, name: 小红 }, { id: 3, name: 小刚 } ]; let user users.find(u u.id 2); console.log(user); // { id: 2, name: 小红 }includes 与 indexOf判断元素是否存在。let arr [a, b, c]; console.log(arr.includes(b)); // true console.log(arr.includes(d)); // false console.log(arr.indexOf(b)); // 1找不到时返回 -1面试题中常出现“判断字符串是否包含某个字符”除了includes在字符串中同样适用let str Hello JavaScript; console.log(str.includes(Java)); // true console.log(str.indexOf(Java)); // 65.3 对象的创建与访问对象用花括号表示由键值对组成。前端开发中对象通常用来描述一组相互关联的数据。let person { name: 小明, age: 18, city: 北京, greet: function () { console.log(大家好我是 this.name); } }; // 访问对象的属性两种方式 console.log(person.name); // 小明 console.log(person[age]); // 18 // 修改属性 person.age 19; // 新增属性 person.email xiaomingexample.com; // 调用对象的方法 person.greet(); // 大家好我是小明更推荐使用点语法person.name代码更清晰。person[age]这种写法在“属性名是变量”的场景下才使用。5.4 对象的结构与解构ES6 提供了解构赋值语法可以快速从对象或数组中取出数据。现在前端框架开发中几乎每天都在用。对象解构let user { name: 小红, age: 20, city: 上海 }; // 以前这样取 // let name user.name; // let age user.age; // 解构赋值 const { name, age, city } user; console.log(name, age, city); // 小红 20 上海数组解构和交换变量let colors [red, green, blue]; let [first, second, third] colors; console.log(first, second, third); // red green blue // 利用解构交换两个变量的值 let a 1; let b 2; [a, b] [b, a]; console.log(a, b); // 2 1剩余与扩展运算符这三个点...是 ES6 的一个语法可以在对象和数组中展开或收集数据。// 扩展运算符展开数组或对象 let arr1 [1, 2, 3]; let arr2 [4, 5, 6]; let combined [...arr1, ...arr2]; console.log(combined); // [1, 2, 3, 4, 5, 6] // 浅拷贝对象 let original { a: 1, b: 2 }; let copy { ...original }; console.log(copy); // { a: 1, b: 2 }6. ES6 常用特性6.1 模板字符串过去拼接字符串要用号写起来繁琐还容易出错。ES6 的模板字符串用反引号包裹可以直接在字符串中嵌入变量let name 小明; let age 18; // 旧写法 let msg1 我叫 name 今年 age 岁。; // 模板字符串 let msg2 我叫${name}今年${age}岁。; console.log(msg1); // 我叫小明今年18岁。 console.log(msg2); // 我叫小明今年18岁。模板字符串还支持换行在拼接多行 HTML 片段时特别方便let user { name: 小红, age: 20 }; let card div classcard h3${user.name}/h3 p年龄${user.age}/p /div ; console.log(card);6.2 Promise 与异步处理JS 是单线程语言但页面上经常需要处理耗时操作例如请求服务器数据、读取本地文件、设置定时器等。为了让这些操作不阻塞页面JS 引入了异步编程模型。Promise 是处理异步操作的标准方式。先看一个最简单的 Promise 示例const fetchData () { return new Promise((resolve, reject) { setTimeout(() { let success true; if (success) { resolve(数据获取成功); } else { reject(数据获取失败); } }, 1000); }); }; // 使用 then/catch 处理结果 fetchData() .then(data { console.log(data); // 1秒后输出数据获取成功 }) .catch(err { console.log(err); });更推荐使用async/await语法让异步代码看起来更像同步代码const getData async () { try { const result await fetchData(); console.log(result); } catch (err) { console.log(出错啦 err); } }; getData();关于 Promise新手阶段不需要深入原理但至少要理解三个概念Promise 有三个状态pending进行中、fulfilled成功、rejected失败。then接收成功结果catch接收失败原因。async/await是 Promise 的语法糖用try/catch捕获异常。6.3 常用字符串方法实际开发中字符串处理是高频场景。下面是最常用的一组方法let str Hello JavaScript; console.log(str.length); // 17 console.log(str.toUpperCase()); // HELLO JAVASCRIPT console.log(str.toLowerCase()); // hello javascript console.log(str.includes(Java)); // true console.log(str.startsWith(Hello)); // true console.log(str.endsWith(Script)); // true console.log(str.indexOf(a)); // 7 // 截取子串 console.log(str.substring(6, 10)); // Java console.log(str.slice(6)); // JavaScript // 分割成数组 let csv 苹果,香蕉,橙子; console.log(csv.split(,)); // [苹果, 香蕉, 橙子] // 去除空格 let email userexample.com ; console.log(email.trim()); // userexample.com // 保留小数数值方法常用于价格展示 let price 3.14159; console.log(price.toFixed(2)); // 3.14注意返回值是字符串面试中常见的json.stringify与性能优化其实也是字符串处理相关的话题。简单来说JSON.stringify可以把 JS 对象转换成 JSON 字符串用于数据存储或传输JSON.parse则反过来把 JSON 字符串解析为对象。let obj { name: 小明, age: 18 }; let jsonStr JSON.stringify(obj); console.log(jsonStr); // {name:小明,age:18} let newObj JSON.parse(jsonStr); console.log(newObj.name); // 小明7. DOM 操作入门7.1 什么是 DOMDOMDocument Object Model文档对象模型是浏览器提供的一套接口让 JS 可以操作 HTML 元素。简单理解浏览器把 HTML 解析成一个树形结构JS 通过操作这棵树上的节点就能动态改变网页内容。学习 DOM 操作是前端开发“让页面动起来”的第一步。7.2 获取元素最常见的几种获取元素的方式// 通过 id 获取元素 const title document.getElementById(title); // 通过 class 获取元素列表 const items document.getElementsByClassName(item); // 通过标签名获取元素列表 const divs document.getElementsByTagName(div); // 使用选择器获取第一个匹配元素最推荐 const firstItem document.querySelector(.item); // 使用选择器获取所有匹配元素 const allItems document.querySelectorAll(.item);实际开发中document.querySelector和document.querySelectorAll使用频率最高。7.3 修改内容与样式// 获取元素 const title document.getElementById(title); // 修改文本内容 title.textContent 新的标题; // 修改 HTML 内容可以插入标签 title.innerHTML span stylecolor:red红色标题/span; // 修改样式 title.style.color blue; title.style.fontSize 24px;修改textContent和innerHTML的区别值得注意textContent只修改文本插入的标签会被当作普通文本显示innerHTML会解析 HTML 标签。在需要渲染用户输入内容时用innerHTML存在 XSS 安全风险建议优先使用textContent或在做好转义的前提下使用。7.4 事件监听事件可以让页面响应用户操作。最常用的是鼠标点击事件const button document.getElementById(btn); const output document.getElementById(output); button.addEventListener(click, function () { output.textContent 按钮被点击了; });常见的事件类型事件名称触发时机click鼠标点击mouseenter鼠标移入mouseleave鼠标移出keydown键盘按下submit表单提交change输入框内容改变且失去焦点input输入框内容实时改变7.5 综合示例下面写一个经典示例点击按钮在页面上添加一项待办事项。!-- 文件路径todo.html -- !DOCTYPE html html langzh-CN head meta charsetUTF-8 title待办事项/title /head body input typetext idtaskInput placeholder输入待办事项 button idaddBtn添加/button ul idtaskList/ul script const input document.getElementById(taskInput); const btn document.getElementById(addBtn); const list document.getElementById(taskList); btn.addEventListener(click, function () { const taskText input.value.trim(); if (taskText ) { alert(请输入内容); return; } const li document.createElement(li); li.textContent taskText; list.appendChild(li); // 清空输入框并聚焦 input.value ; input.focus(); }); /script /body /html这是一个非常经典的入门案例它把前面学到的变量、事件、条件判断、DOM 操作串联了起来。你可以把代码复制到本地运行感受一下“页面被 JS 驱动”的过程。8. 常见问题与排查思路新手写 JS 时经常会遇到一些高频问题。下面整理成表格方便你对照排查问题现象常见原因排查与解决思路xxx is not defined变量未声明就使用或者声明语句尚未执行检查变量名拼写确认声明语句在调用之前undefined不是报错但结果不对变量声明了但没有赋值对象中不存在该属性用console.log打印变量确认输出是否为undefined页面没有反应JS 代码报错中断打开浏览器控制台查看报错信息检查script标签位置Cannot read property xxx of null获取 DOM 元素的时机太早元素尚未加载把script标签放在页面底部或使用DOMContentLoaded事件按钮点击无效果事件绑定代码有误或选择器选不到元素在事件绑定前打印元素确认是否获取成功结果出现了字符串拼接号两边有字符串执行了拼接使用Number()、parseInt()显式转换类型NaN的结果非法数值计算例如把非数字字符串转成数字检查数据来源确认输入内容是数字格式变量值莫名被修改不小心使用了var产生了全局变量污染使用let和const按作用域规范声明变量异步请求结果拿不到没有正确处理 Promise或接口报错在.then/catch中打印日志确认异步是否执行成功9. 最佳实践与工程建议学完语法只是第一步工程化开发中还要注意以下几点。这些也是从“会写代码”走向“写好代码”的关键9.1 命名清晰变量名和函数名要做到“见名知义”。// 不推荐 let a 18; function fn() {} // 推荐 let userAge 18; function getUserInfo() {}习惯使用驼峰命名法类名首字母大写常量全部大写并用下划线分隔例如MAX_COUNT。9.2 优先使用严格相等统一使用和!避免隐式类型转换带来意外结果。除非你明确需要字符串和数字互相比较否则不要使用。9.3 保持函数单一职责一个函数只做一件事。函数体过长时考虑拆分成多个小函数。这能让代码更容易测试、维护和复用。9.4 处理边界情况写代码时多想一想输入为空怎么办数组为空怎么办用户输入了特殊字符怎么办优秀的代码不仅要处理正常流程更要处理好异常和边界场景。9.5 善用 console 调试初学者最常见的调试方式是console.log()这个习惯很好。但随着项目变大建议学会使用浏览器开发者工具中的 Sources 面板设置断点可以更直观地观察变量变化。9.6 建立代码规范从一开始就保持良好的代码风格。可以使用 ESLint 和 Prettier 工具统一规范、自动格式化。前端项目中使用这些工具已经是标配越早接触越好。9.7 警惕异步陷阱在循环里做异步操作是新手容易踩坑的地方。如果需要在循环中逐个请求接口注意异步任务并不是按直觉顺序完成的。建议先掌握Promise.all、Promise.allSettled等 API再深入异步编程。10. 总结与下一步学习建议到此为止我们已经把 JavaScript 的核心语法过了一遍。回顾一下今天的内容变量与数据类型let、const声明方式基本数据类型与类型转换。运算符与流程控制比较、逻辑运算符if判断和for循环。函数函数声明、箭头函数、参数默认值、作用域。数组与对象数组遍历、map/filter/find等高阶方法、对象访问与解构。ES6 新特性模板字符串、展开运算符、解构赋值、Promise 异步处理。DOM 操作获取元素、修改内容、事件监听并完成了待办事项小案例。常见问题与工程实践排错思路、命名规范、边界处理。这些内容基本覆盖了前端日常开发 80% 以上的 JS 语法场景。接下来的学习路线可以参考下面几步第一步练习正则与数组对象方法组合。试着用map、filter、reduce实现一组数据处理功能例如统计数组中的最大值、对商品列表按价格过滤、把用户列表按城市分组。第二步掌握事件与 DOM 进阶。理解事件冒泡与事件委托学会动态创建表格、实现简单的轮播图、实现表单校验。这一步能巩固你对 DOM 操作的理解。第三步学习网络请求。掌握fetch和axios的用法用免费公开 API 做一个数据展示页面。这能帮助你建立前后端交互的完整概念。第四步进入框架学习。有了扎实的 JS 基础再学习 Vue 或 React 会轻松很多。框架是建立在原生 JS 之上的底层思路都是对 DOM 操作和状态管理的封装。第五步阅读优质源码。建议阅读一些知名开源项目中风格清晰的代码比如 Lodash 中某些函数的实现理解代码如何组织、如何考虑边界情况。学习编程没有捷径只有多敲代码、多调试、多思考。建议你拿到代码后不要直接复制粘贴而是亲手敲一遍然后试着改一改、变一变看看会发生什么。出错是好事排查错误的过程就是对知识理解加深的过程。希望这篇文章能帮你在 JavaScript 入门的路上少走一些弯路。如果你在练习中遇到具体问题欢迎在评论区留言我看到后会尽力解答。如果本文对你有帮助可以收藏备用也欢迎转发给正在学前端的朋友。