本章定位前面几章里你已经逐步掌握了 JavaScript 的核心基础能力。你已经学习了JavaScript 是什么代码如何运行。变量、数据类型与运算。条件判断与循环。函数与代码复用。数组与对象。DOM 操作入门。事件机制与交互逻辑。定时器、异步与网络请求初步。到这里你已经能写出不少“能跑、能交互、能请求数据”的代码了。但如果你开始看别人的教程、开源项目、框架示例往往会很快遇到一个新的困惑为什么别人写的 JavaScript和我前面学的写法长得不太一样例如你可能会看到反引号和${}组合在一起的字符串const { userName } userInfo这种写法...这种看起来像“省略号”的符号() {}这种箭头函数import、export这种模块写法这些写法并不是另一门新语言而是现代 JavaScript 里非常常见的一批语法特性。它们通常会被统称为ES6 常用语法这一章要解决的核心问题是为什么现代 JavaScript 会有这些更简洁的写法它们分别解决什么问题以及你应该怎样用更平稳的方式读懂并开始使用它们。本章学习目标学完这一章后你应该能做到理解什么是 ES6以及为什么现代项目里大量使用这些写法。掌握模板字符串的基础用法与适用场景。理解对象解构和数组解构的基础写法。理解展开运算符...在数组和对象中的常见用法。掌握箭头函数的基础写法和简洁写法。理解模块化的基本意义知道为什么代码要拆分为多个文件。掌握export和import的基础导入导出方式。能把一段旧写法代码改写成更现代、更易读的 ES6 写法。一、为什么你会越来越频繁看到 ES6 写法如果你继续往后学习 React、Next.js或者只是多看几个现代前端项目你会非常明显地发现现代 JavaScript 代码几乎处处都在使用 ES6 语法。这不是因为开发者只是想“写得更花”而是因为这些语法通常会带来一些很实际的好处。例如字符串拼接更清楚从对象里取值更方便复制和合并数组、对象更顺手回调函数写法更简洁多文件代码组织更自然1. 为什么这一章很适合现在学因为你前面已经学过变量函数数组对象map、filterDOM事件fetch也就是说你已经有足够的基础去理解ES6 并不是要替代前面学过的知识而是在用更现代的写法来表达这些知识。2. 这一章的重点不是“把语法写得更炫”这一点非常重要。你现在要建立的核心认知不是新语法更高级所以必须全部用上。而是新语法的价值在于很多时候它能让代码更清楚、更少重复、更符合现代项目习惯。二、什么是 ES6ES6 是 JavaScript 在 2015 年一次非常重要的标准更新。后面又陆续加入了更多新语法所以大家在日常交流里经常会用ES6来泛指现代 JavaScript 常用的新写法。1. 你现在可以怎么理解 ES6你不用把它想成一门全新的语言。当前阶段更适合的理解是ES6 是现代 JavaScript 里一批更常见、更简洁、更适合工程开发的写法集合。2. 这一章不会一次把所有新语法都讲完因为现代 JavaScript 的语法点很多。当前阶段我们先只抓最常见、最值得优先掌握的一批模板字符串解构赋值展开运算符箭头函数模块化导入导出这几类已经足够帮你读懂很多现代代码了。三、模板字符串让字符串拼接更清楚你在前面其实已经接触过模板字符串了。现在我们把它正式放进 ES6 体系里重新认识一下。1. 旧写法用拼接字符串例如constuserName小白;constcityName北京;console.log(你好我是userName我来自cityName);这当然可以工作。但只要字符串一长或者中间插入的变量一多读起来就会越来越累。2. 新写法模板字符串例如constuserName小白;constcityName北京;console.log(你好我是${userName}我来自${cityName});3. 模板字符串最直观的好处是什么就是它更像你平时在写一句完整的话。你不用一直在开字符串关字符串用再接变量这种来回切换的写法里跳来跳去。4.${}可以先怎么理解你可以先把它理解成在模板字符串里插入一个变量或表达式的位置。例如constunitPrice99;constquantity2;console.log(总价是${unitPrice*quantity}元);这里插入的就不只是变量也可以是一个简单表达式。5. 当前阶段为什么优先推荐模板字符串因为它通常更适合页面文案拼接提示文字输出DOM 文本内容生成列表项文字组织这也是你后面在现代项目里会经常看到它的原因。四、解构赋值是什么“解构赋值”这个名字第一次听起来会有点吓人。其实你现在可以先把它理解成一句非常直白的话从数组或对象里把里面的值快速拆出来直接放进变量里。也就是说它本质上是在帮你做取值并命名这件事。五、对象解构从对象里直接取值先看一个你已经很熟悉的对象例子。constuserInfo{userName:小白,age:18,cityName:北京};1. 旧写法逐个读取属性例如constuserNameuserInfo.userName;constageuserInfo.age;constcityNameuserInfo.cityName;这当然没问题。但如果你经常要从对象里拿很多属性这种写法会显得有点重复。2. 新写法对象解构例如constuserInfo{userName:小白,age:18,cityName:北京};const{userName,age,cityName}userInfo;3. 这段写法可以先怎么理解你可以先把它读成从userInfo这个对象里把userName、age、cityName这几个属性拆出来直接变成同名变量。4. 为什么对象解构很有用因为在真实开发里你经常会拿到这样的数据用户对象商品对象接口返回对象如果每次都反复写userInfo.userName userInfo.cityName userInfo.email就会越来越啰嗦。解构能让这类取值过程更紧凑。5. 初学者要特别注意的一点对象解构时变量名通常要和属性名对应起来。例如const{userName}userInfo;这里拆的是对象里的userName属性。如果对象里没有这个属性就可能拿到undefined六、数组解构按位置把值拆出来数组解构的核心思路和对象解构很像但它不是按属性名而是按位置拆值。1. 一个最基础的数组例子constcourseNames[HTML,CSS,JavaScript];2. 旧写法按位置分别读取例如constfirstCoursecourseNames[0];constsecondCoursecourseNames[1];constthirdCoursecourseNames[2];3. 新写法数组解构例如constcourseNames[HTML,CSS,JavaScript];const[firstCourse,secondCourse,thirdCourse]courseNames;4. 这段写法可以先怎么理解你可以先把它读成按顺序把数组里的前几项拆出来依次放进对应变量。也就是说firstCourse对应第 1 项secondCourse对应第 2 项thirdCourse对应第 3 项5. 数组解构为什么有用因为有些时候你只关心数组前几项或者想让“位置含义”变成有名字的变量。例如取第一个商品取第一个和第二个成绩取一组数据里的前两项6. 当前阶段先不要把数组解构玩得太复杂后面你还会看到更复杂的用法。但当前阶段只要先把按位置快速取值这个核心理解稳住就已经很好了。七、展开运算符...把内容展开展开运算符第一次看到时很多人会觉得这三个点到底是在干什么你现在可以先用一句非常直白的话来理解...的核心感觉就是“把里面的内容展开”。它在数组和对象里都非常常见。八、数组里的展开运算符先来看数组场景。1. 合并数组例如constbasicCourses[HTML,CSS];constadvancedCourses[JavaScript,React];constallCourses[...basicCourses,...advancedCourses];console.log(allCourses);输出结果通常会是[HTML, CSS, JavaScript, React]你可以先把它理解成把前一个数组里的项展开再把后一个数组里的项展开然后放进新数组里。2. 在数组中新增一项但保留原有内容例如constcourseNames[HTML,CSS];constnewCourseNames[...courseNames,JavaScript];console.log(newCourseNames);3. 为什么这类写法会越来越常见因为它很适合表达一种清晰思路保留原有数据再生成一个带新内容的新数组。这在后面的 React 学习里会越来越常见。4. 当前阶段你可以先怎么理解先别急着想太深。你现在只要先记住数组里的...很适合做“复制现有内容 拼接新内容”。九、对象里的展开运算符对象里也可以使用...。1. 复制对象并更新某个字段例如constuserInfo{userName:小白,cityName:北京};constupdatedUserInfo{...userInfo,cityName:上海};console.log(updatedUserInfo);你可以先这样理解先把userInfo里的原有属性展开出来再把cityName改成新的值2. 给对象补充新字段例如constuserInfo{userName:小白};constcompletedUserInfo{...userInfo,age:18,cityName:北京};3. 为什么对象展开很有用因为在真实开发里你经常会遇到这种需求原有对象保留大部分内容只改其中一两个字段。如果还是用一堆手动赋值通常会比较啰嗦。4. 当前阶段一个非常重要的提醒你现在可以先把展开运算符理解成一层展开、快速组合数据的工具。先不要把它当成“任何复杂嵌套数据都能完美深拷贝”的万能工具。当前阶段把基础用法用顺就够了。十、箭头函数更简洁的函数写法箭头函数是 ES6 里非常常见的一种函数写法。它最直观的特点就是写起来更短。1. 旧写法普通函数表达式例如constgetDoubleNumberfunction(number){returnnumber*2;};2. 新写法箭头函数例如constgetDoubleNumber(number){returnnumber*2;};3. 当前阶段先怎么理解箭头函数你可以先把它理解成用更简洁方式写函数的一种常见写法。当前阶段最重要的不是一下子掌握所有细节而是先能认出来、读得懂、写得出简单版本。十一、箭头函数的几种常见简洁写法这一节很适合你慢慢看不用一次全背。1. 只有一个参数时可以写得更短例如constgetDoubleNumber(number){returnnumber*2;};很多时候也会写成constgetDoubleNumbernumber{returnnumber*2;};2. 如果函数体只有一个返回表达式还可以继续简化例如constgetDoubleNumber(number)number*2;你可以先把它理解成这个函数只做一件事把number * 2的结果返回出去。3. 为什么箭头函数在map、filter里特别常见因为这类场景里的函数通常比较短、比较单纯。例如constscores[60,70,80];constdoubledScoresscores.map((score)score*2);或者constpassScoresscores.filter((score)score60);这类写法在现代前端代码里会非常高频。4. 当前阶段一个很实用的建议你现在先把箭头函数优先用在简短工具函数mapfilter事件回调中的简单逻辑这会比较容易上手。十二、箭头函数和普通函数是不是完全一样不是。但当前阶段你还不需要一口气学完所有底层区别。1. 现在最重要的结论是什么你现在可以先记住对于简单函数和常见回调场景箭头函数经常可以看成更简洁的现代写法。2. 当前阶段先别急着“全部替换”有些初学者一学会箭头函数就想把所有function全改掉。这没有必要。你现在更稳妥的做法是先看懂箭头函数先在简单场景里用它先让写法简洁但逻辑不要变乱这比“处处都要改成箭头函数”更重要。十三、模块化是什么走到这里你已经写过越来越多 JavaScript 代码了。这时候很快会遇到另一个实际问题代码如果全都堆在一个文件里会越来越难看、越来越难找。比如你可能会有一个函数负责计算一个函数负责格式化文案一段代码负责处理 DOM一段代码负责处理请求如果全塞在一个main.js里文件会越来越臃肿。这时候就需要模块化。你现在可以先把模块化理解成把不同职责的代码拆到不同文件里再按需要导入和使用。十四、为什么代码要拆成多个模块文件模块化不是为了“显得专业”而是在解决很实际的问题。1. 让每个文件职责更清楚例如math.js里只放计算函数message.js里只放文案相关函数main.js里负责把这些功能接到页面上2. 更容易复用如果某个函数以后别的页面也要用那独立成模块就会更方便。3. 更容易维护当项目一大模块化几乎是必须的。不然你很容易遇到文件越来越长功能混在一起不知道该去哪里找代码这也是为什么你后面学 React、Next.js 时一定会大量接触模块化。十五、export和import模块导出与导入模块化最基础的两个动作就是导出导入1.export把模块里的内容暴露出去例如exportfunctionaddNumbers(numberA,numberB){returnnumberAnumberB;}这里的意思可以先理解成把这个函数从当前文件里导出去供别的文件使用。2.import把别的模块内容拿进来用例如import{addNumbers}from./math.js;这里的意思可以先理解成从math.js里把addNumbers这个导出内容拿进来。3. 为什么这里要写./math.js因为模块导入需要明确告诉浏览器你要从哪个文件里拿内容。当前阶段你先记住./表示当前目录文件名通常要写清楚十六、一个完整示例把小功能拆成多个模块文件下面我们来做一个非常适合纯小白理解的模块化例子。目标是把“计算函数”和“欢迎文案函数”拆到不同文件再在主文件里导入并使用最后把结果显示到页面上1.math.jsexportfunctionaddNumbers(numberA,numberB){returnnumberAnumberB;}2.message.jsexportfunctioncreateWelcomeMessage(userName){return你好${userName}欢迎继续学习现代 JavaScript;}3.main.jsimport{addNumbers}from./math.js;import{createWelcomeMessage}from./message.js;constpageTitledocument.getElementById(page-title);constresultTextdocument.getElementById(result-text);consttotaladdNumbers(10,20);constwelcomeMessagecreateWelcomeMessage(小白);// 把模块里导入的函数结果组合起来再显示到页面上pageTitle.textContentES6 模块化入门;resultText.textContent${welcomeMessage}10 20 ${total};4.index.htmlh1idpage-title/h1pidresult-text/pscripttypemodulesrc./main.js/script5. 为什么这里的typemodule很重要因为浏览器要知道这不是一段普通脚本而是一段使用模块导入导出语法的脚本。如果少了这句typemodule模块语法通常就不能按预期工作。6. 当前阶段关于模块化的一个实用提醒如果你本地直接双击打开 HTML某些浏览器环境下可能会遇到模块加载限制或路径问题。这不是你写法一定错了而是模块化在真实开发里通常会配合本地开发服务一起使用。当前阶段你先把“导出什么、导入什么、主文件怎么组织起来”这套思路看懂就已经很有价值。十七、一个完整示例把旧写法改成 ES6 写法下面我们来做一个综合对比例子。目标是把一段“能工作但偏旧的写法”改成更现代、更清晰的写法。1. 旧写法constuserInfo{userName:小白,cityName:北京};constuserNameuserInfo.userName;constcityNameuserInfo.cityName;constmessage你好我是userName我来自cityName;constscores[60,70,80];constdoubledScoresscores.map(function(score){returnscore*2;});console.log(message);console.log(doubledScores);2. ES6 改写后constuserInfo{userName:小白,cityName:北京};const{userName,cityName}userInfo;constmessage你好我是${userName}我来自${cityName};constscores[60,70,80];constdoubledScoresscores.map((score)score*2);console.log(message);console.log(doubledScores);3. 这个改写体现了什么它其实没有改变业务逻辑。变化主要在于用对象解构减少重复取值用模板字符串让文案更清楚用箭头函数让简单回调更简洁这也是你学习 ES6 时最应该建立的一层认识好的新语法重点不是“更花”而是“在不改变逻辑的前提下让表达更清楚”。十八、为什么新语法的重点是可读性不是“写得更花”这是本章最重要的观念之一。很多初学者一学 ES6就容易出现两种极端1. 第一种极端完全不敢用觉得这看起来太新了我还是一直写老写法吧。2. 第二种极端为了显得会写而到处乱用觉得只要我把代码全改成箭头函数、解构、展开运算符就一定更高级。这两种都不太理想。更稳妥的做法是先理解每种新语法到底解决什么问题再在合适场景里使用它。3. 一个非常实用的判断标准你每次准备使用某个 ES6 写法时都可以先问自己这段写法是不是更容易读懂这段写法是不是减少了重复这段写法会不会让当前逻辑反而更绕如果更清楚就值得用。如果只是更短但更难懂那就未必更好。十九、初学者最容易踩的坑这一章的坑很典型而且很多都和“只会模仿写法但还没想清楚含义”有关。1. 把模板字符串的反引号写错模板字符串使用的是不是单引号也不是双引号。这点特别容易在刚开始时写混。2. 对象解构时属性名写错例如对象里明明是userName你却写成const{username}userInfo;那很可能拿到的就是undefined3. 数组解构忘了它是按位置取值对象解构更像“按名字拿”数组解构更像“按顺序拿”。这一点一定要分清。4. 把...当成万能复制工具当前阶段你先把它理解成快速展开一层内容、组合新数组或新对象的工具。不要一开始就把它当成“任何复杂嵌套数据都能完美深拷贝”的万能解法。5. 看到箭头函数就想全部替换箭头函数确实很常见但不是说一学会就要把所有函数都改掉。当前阶段更推荐先在简单、短小、单一职责的函数和回调里用顺它。6. 模块化时忘记写正确路径或typemodule模块导入导出最常见的入门错误之一就是路径写错文件名写错HTML 里忘了写typemodule这类错误看起来小但非常高频。二十、本章实践练习这一章特别适合做“旧写法改现代写法”的练习。重点不是追求一口气全会而是让你真正体会现代语法到底让哪一步更清楚了。1. 练习 1把旧字符串拼接改成模板字符串请把类似下面这种写法constuserName小白;constcityName北京;constmessage你好我是userName我来自cityName;改写成模板字符串版本。2. 练习 2练习对象解构和数组解构请自己创建一个用户对象一个课程数组然后分别用对象解构数组解构把里面的值拆出来。这个练习重点是区分对象按名字取值区分数组按位置取值3. 练习 3练习展开运算符请完成下面两类操作1. 数组合并把两个课程数组合并成一个新数组。2. 对象更新在保留原有用户信息的前提下只修改城市字段。这个练习重点是理解...在数组和对象里的共同感觉都是“展开已有内容再组合新结果”。4. 练习 4把普通回调函数改成箭头函数请把类似下面这种写法constscores[60,70,80];constdoubledScoresscores.map(function(score){returnscore*2;});改写成箭头函数版本。5. 练习 5拆分一个小功能为多个模块文件请尝试把一个非常小的功能拆成 2 到 3 个文件。例如一个文件放“计算函数”一个文件放“文案函数”一个主文件负责把结果显示到页面这个练习重点不是环境搭建而是先建立一个功能可以按职责拆成多个模块文件的思路。二十一、学习重点提示这一章最重要的不是一下子把所有现代语法都用满而是先真正建立“读得懂、改得动、用得合适”的能力。请重点记住ES6 不是另一门语言而是现代 JavaScript 常用的新写法集合。模板字符串更适合表达带变量的文案。解构赋值的本质是“把数组或对象里的值拆出来直接放进变量”。展开运算符的核心感觉是“展开已有内容再组合新结果”。箭头函数很适合简单函数和常见回调但当前阶段不要为了短而把逻辑写乱。模块化的核心价值是让代码按职责拆分、更容易复用和维护。export是把内容导出去import是把内容拿进来。新语法的重点是提升可读性不是为了“写得更花”。如果你只记一句话请记住ES6 的核心价值不是让代码看起来更新而是让你更自然地表达原本就要写的逻辑。二十二、本章小结这一章你已经从“会写基础 JavaScript”进一步走到了“开始读懂并使用现代 JavaScript 写法”。你已经学习了什么是 ES6模板字符串对象解构与数组解构展开运算符箭头函数模块化导入导出基础如何把旧写法改成更现代的写法这一步非常关键。因为从这一章开始你再去看现代前端教程、框架示例和开源代码时理解门槛会明显下降很多。后面当你继续进入阶段复盘、再往 TypeScript 和 React 走时这些 ES6 写法几乎会一路陪着你。二十三、课后思考题请你思考下面几个问题为什么模板字符串通常比拼接更适合现代项目中的文案组织对象解构和数组解构的最核心区别是什么为什么说展开运算符更像“展开已有内容再组合新结果”为什么箭头函数虽然简洁但也不适合为了短而乱用为什么模块化几乎是项目代码变多之后的必然需求为什么说学习 ES6 的重点是可读性而不是“显得会写”建议你用自己的话把答案写下来。只要你能把这些问题说清楚说明你已经真正开始具备阅读现代 JavaScript 代码的能力了。二十四、下一章预告下一章我们会继续学习从零开始学前端 | 第二十章阶段复盘与代码思维训练到那时我们会把这一整个 JavaScript 阶段真正收拢起来重新练一次“如何拆需求、如何组织数据、如何写逻辑、如何调试”的基本功。
