企业官网建设流程全解析

本章定位

前面几章里，你已经逐步掌握了 JavaScript 的核心基础能力。

你已经学习了：

1. JavaScript 是什么，代码如何运行。
2. 变量、数据类型与运算。
3. 条件判断与循环。
4. 函数与代码复用。
5. 数组与对象。
6. DOM 操作入门。
7. 事件机制与交互逻辑。
8. 定时器、异步与网络请求初步。

到这里，你已经能写出不少“能跑、能交互、能请求数据”的代码了。

但如果你开始看别人的教程、开源项目、框架示例，往往会很快遇到一个新的困惑：

为什么别人写的 JavaScript，和我前面学的写法长得不太一样？

例如你可能会看到：

• 反引号和${}组合在一起的字符串
• const { userName } = userInfo这种写法
• ...这种看起来像“省略号”的符号
• () => {}这种箭头函数
• import、export这种模块写法

这些写法，并不是另一门新语言，而是现代 JavaScript 里非常常见的一批语法特性。

它们通常会被统称为：

ES6+ 常用语法

这一章要解决的核心问题是：

为什么现代 JavaScript 会有这些更简洁的写法，它们分别解决什么问题，以及你应该怎样用更平稳的方式读懂并开始使用它们。

本章学习目标

学完这一章后，你应该能做到：

1. 理解什么是 ES6+，以及为什么现代项目里大量使用这些写法。
2. 掌握模板字符串的基础用法与适用场景。
3. 理解对象解构和数组解构的基础写法。
4. 理解展开运算符...在数组和对象中的常见用法。
5. 掌握箭头函数的基础写法和简洁写法。
6. 理解模块化的基本意义，知道为什么代码要拆分为多个文件。
7. 掌握export和import的基础导入导出方式。
8. 能把一段旧写法代码，改写成更现代、更易读的 ES6+ 写法。

一、为什么你会越来越频繁看到 ES6+ 写法

如果你继续往后学习 React、Next.js，或者只是多看几个现代前端项目，你会非常明显地发现：

现代 JavaScript 代码，几乎处处都在使用 ES6+ 语法。

这不是因为开发者只是想“写得更花”，而是因为这些语法通常会带来一些很实际的好处。

例如：

• 字符串拼接更清楚
• 从对象里取值更方便
• 复制和合并数组、对象更顺手
• 回调函数写法更简洁
• 多文件代码组织更自然

1. 为什么这一章很适合现在学

因为你前面已经学过：

• 变量
• 函数
• 数组
• 对象
• map、filter
• DOM
• 事件
• fetch

也就是说，你已经有足够的基础去理解：

ES6+ 并不是要替代前面学过的知识，而是在用更现代的写法来表达这些知识。

2. 这一章的重点不是“把语法写得更炫”

这一点非常重要。

你现在要建立的核心认知不是：

新语法更高级，所以必须全部用上。

而是：

新语法的价值，在于很多时候它能让代码更清楚、更少重复、更符合现代项目习惯。

二、什么是 ES6+

ES6 是 JavaScript 在 2015 年一次非常重要的标准更新。

后面又陆续加入了更多新语法，所以大家在日常交流里，经常会用：

ES6+

来泛指现代 JavaScript 常用的新写法。

1. 你现在可以怎么理解 ES6+

你不用把它想成一门全新的语言。

当前阶段更适合的理解是：

ES6+ 是现代 JavaScript 里一批更常见、更简洁、更适合工程开发的写法集合。

2. 这一章不会一次把所有新语法都讲完

因为现代 JavaScript 的语法点很多。

当前阶段，我们先只抓最常见、最值得优先掌握的一批：

1. 模板字符串
2. 解构赋值
3. 展开运算符
4. 箭头函数
5. 模块化导入导出

这几类已经足够帮你读懂很多现代代码了。

三、模板字符串：让字符串拼接更清楚

你在前面其实已经接触过模板字符串了。

现在我们把它正式放进 ES6+ 体系里重新认识一下。

1. 旧写法：用+拼接字符串

例如：

constuserName="小白";constcityName="北京";console.log("你好，我是"+userName+"，我来自"+cityName);

这当然可以工作。

但只要字符串一长，或者中间插入的变量一多，读起来就会越来越累。

2. 新写法：模板字符串

例如：

constuserName="小白";constcityName="北京";console.log(`你好，我是${userName}，我来自${cityName}`);

3. 模板字符串最直观的好处是什么

就是：

它更像你平时在写一句完整的话。

你不用一直在：

• 开字符串
• 关字符串
• 用+
• 再接变量

这种来回切换的写法里跳来跳去。

4.${}可以先怎么理解

你可以先把它理解成：

在模板字符串里插入一个变量或表达式的位置。

例如：

constunitPrice=99;constquantity=2;console.log(`总价是：${unitPrice*quantity}元`);

这里插入的就不只是变量，也可以是一个简单表达式。

5. 当前阶段为什么优先推荐模板字符串

因为它通常更适合：

• 页面文案拼接
• 提示文字输出
• DOM 文本内容生成
• 列表项文字组织

这也是你后面在现代项目里会经常看到它的原因。

四、解构赋值是什么

“解构赋值”这个名字，第一次听起来会有点吓人。

其实你现在可以先把它理解成一句非常直白的话：

从数组或对象里，把里面的值快速拆出来，直接放进变量里。

也就是说，它本质上是在帮你做：

取值并命名

这件事。

五、对象解构：从对象里直接取值

先看一个你已经很熟悉的对象例子。

constuserInfo={userName:"小白",age:18,cityName:"北京"};

1. 旧写法：逐个读取属性

例如：

constuserName=userInfo.userName;constage=userInfo.age;constcityName=userInfo.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. 旧写法：按位置分别读取

例如：

constfirstCourse=courseNames[0];constsecondCourse=courseNames[1];constthirdCourse=courseNames[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);

你可以先这样理解：

1. 先把userInfo里的原有属性展开出来
2. 再把cityName改成新的值

2. 给对象补充新字段

例如：

constuserInfo={userName:"小白"};constcompletedUserInfo={...userInfo,age:18,cityName:"北京"};

3. 为什么对象展开很有用

因为在真实开发里，你经常会遇到这种需求：

原有对象保留大部分内容，只改其中一两个字段。

如果还是用一堆手动赋值，通常会比较啰嗦。

4. 当前阶段一个非常重要的提醒

你现在可以先把展开运算符理解成：

一层展开、快速组合数据的工具。

先不要把它当成“任何复杂嵌套数据都能完美深拷贝”的万能工具。

当前阶段把基础用法用顺就够了。

十、箭头函数：更简洁的函数写法

箭头函数是 ES6+ 里非常常见的一种函数写法。

它最直观的特点就是：

写起来更短。

1. 旧写法：普通函数表达式

例如：

constgetDoubleNumber=function(number){returnnumber*2;};

2. 新写法：箭头函数

例如：

constgetDoubleNumber=(number)=>{returnnumber*2;};

3. 当前阶段先怎么理解箭头函数

你可以先把它理解成：

用更简洁方式写函数的一种常见写法。

当前阶段最重要的，不是一下子掌握所有细节，而是先能认出来、读得懂、写得出简单版本。

十一、箭头函数的几种常见简洁写法

这一节很适合你慢慢看，不用一次全背。

1. 只有一个参数时，可以写得更短

例如：

constgetDoubleNumber=(number)=>{returnnumber*2;};

很多时候也会写成：

constgetDoubleNumber=number=>{returnnumber*2;};

2. 如果函数体只有一个返回表达式，还可以继续简化

例如：

constgetDoubleNumber=(number)=>number*2;

你可以先把它理解成：

这个函数只做一件事：把number * 2的结果返回出去。

3. 为什么箭头函数在map、filter里特别常见

因为这类场景里的函数通常比较短、比较单纯。

例如：

constscores=[60,70,80];constdoubledScores=scores.map((score)=>score*2);

或者：

constpassScores=scores.filter((score)=>score>=60);

这类写法在现代前端代码里会非常高频。

4. 当前阶段一个很实用的建议

你现在先把箭头函数优先用在：

• 简短工具函数
• map
• filter
• 事件回调中的简单逻辑

这会比较容易上手。

十二、箭头函数和普通函数是不是完全一样

不是。

但当前阶段，你还不需要一口气学完所有底层区别。

1. 现在最重要的结论是什么

你现在可以先记住：

对于简单函数和常见回调场景，箭头函数经常可以看成更简洁的现代写法。

2. 当前阶段先别急着“全部替换”

有些初学者一学会箭头函数，就想把所有function全改掉。

这没有必要。

你现在更稳妥的做法是：

1. 先看懂箭头函数
2. 先在简单场景里用它
3. 先让写法简洁，但逻辑不要变乱

这比“处处都要改成箭头函数”更重要。

十三、模块化是什么

走到这里，你已经写过越来越多 JavaScript 代码了。

这时候很快会遇到另一个实际问题：

代码如果全都堆在一个文件里，会越来越难看、越来越难找。

比如你可能会有：

• 一个函数负责计算
• 一个函数负责格式化文案
• 一段代码负责处理 DOM
• 一段代码负责处理请求

如果全塞在一个main.js里，文件会越来越臃肿。

这时候就需要模块化。

你现在可以先把模块化理解成：

把不同职责的代码拆到不同文件里，再按需要导入和使用。

十四、为什么代码要拆成多个模块文件

模块化不是为了“显得专业”，而是在解决很实际的问题。

1. 让每个文件职责更清楚

例如：

• math.js里只放计算函数
• message.js里只放文案相关函数
• main.js里负责把这些功能接到页面上

2. 更容易复用

如果某个函数以后别的页面也要用，那独立成模块就会更方便。

3. 更容易维护

当项目一大，模块化几乎是必须的。

不然你很容易遇到：

• 文件越来越长
• 功能混在一起
• 不知道该去哪里找代码

这也是为什么你后面学 React、Next.js 时，一定会大量接触模块化。

十五、export和import：模块导出与导入

模块化最基础的两个动作就是：

1. 导出
2. 导入

1.export：把模块里的内容暴露出去

例如：

exportfunctionaddNumbers(numberA,numberB){returnnumberA+numberB;}

这里的意思可以先理解成：

把这个函数从当前文件里导出去，供别的文件使用。

2.import：把别的模块内容拿进来用

例如：

import{addNumbers}from"./math.js";

这里的意思可以先理解成：

从math.js里把addNumbers这个导出内容拿进来。

3. 为什么这里要写./math.js

因为模块导入需要明确告诉浏览器：

你要从哪个文件里拿内容。

当前阶段你先记住：

• ./表示当前目录
• 文件名通常要写清楚

十六、一个完整示例：把小功能拆成多个模块文件

下面我们来做一个非常适合纯小白理解的模块化例子。

目标是：

1. 把“计算函数”和“欢迎文案函数”拆到不同文件
2. 再在主文件里导入并使用
3. 最后把结果显示到页面上

1.math.js

exportfunctionaddNumbers(numberA,numberB){returnnumberA+numberB;}

2.message.js

exportfunctioncreateWelcomeMessage(userName){return`你好，${userName}，欢迎继续学习现代 JavaScript`;}

3.main.js

import{addNumbers}from"./math.js";import{createWelcomeMessage}from"./message.js";constpageTitle=document.getElementById("page-title");constresultText=document.getElementById("result-text");consttotal=addNumbers(10,20);constwelcomeMessage=createWelcomeMessage("小白");// 把模块里导入的函数结果组合起来，再显示到页面上pageTitle.textContent="ES6+ 模块化入门";resultText.textContent=`${welcomeMessage}，10 + 20 =${total}`;

4.index.html

<h1id="page-title"></h1><pid="result-text"></p><scripttype="module"src="./main.js"></script>

5. 为什么这里的type="module"很重要

因为浏览器要知道：

这不是一段普通脚本，而是一段使用模块导入导出语法的脚本。

如果少了这句：

type="module"

模块语法通常就不能按预期工作。

6. 当前阶段关于模块化的一个实用提醒

如果你本地直接双击打开 HTML，某些浏览器环境下可能会遇到模块加载限制或路径问题。

这不是你写法一定错了，而是：

模块化在真实开发里通常会配合本地开发服务一起使用。

当前阶段你先把“导出什么、导入什么、主文件怎么组织起来”这套思路看懂，就已经很有价值。

十七、一个完整示例：把旧写法改成 ES6+ 写法

下面我们来做一个综合对比例子。

目标是把一段“能工作但偏旧的写法”，改成更现代、更清晰的写法。

1. 旧写法

constuserInfo={userName:"小白",cityName:"北京"};constuserName=userInfo.userName;constcityName=userInfo.cityName;constmessage="你好，我是"+userName+"，我来自"+cityName;constscores=[60,70,80];constdoubledScores=scores.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];constdoubledScores=scores.map((score)=>score*2);console.log(message);console.log(doubledScores);

3. 这个改写体现了什么

它其实没有改变业务逻辑。

变化主要在于：

1. 用对象解构减少重复取值
2. 用模板字符串让文案更清楚
3. 用箭头函数让简单回调更简洁

这也是你学习 ES6+ 时最应该建立的一层认识：

好的新语法，重点不是“更花”，而是“在不改变逻辑的前提下，让表达更清楚”。

十八、为什么新语法的重点是可读性，不是“写得更花”

这是本章最重要的观念之一。

很多初学者一学 ES6+，就容易出现两种极端：

1. 第一种极端：完全不敢用

觉得：

这看起来太新了，我还是一直写老写法吧。

2. 第二种极端：为了显得会写而到处乱用

觉得：

只要我把代码全改成箭头函数、解构、展开运算符，就一定更高级。

这两种都不太理想。

更稳妥的做法是：

先理解每种新语法到底解决什么问题，再在合适场景里使用它。

3. 一个非常实用的判断标准

你每次准备使用某个 ES6+ 写法时，都可以先问自己：

1. 这段写法是不是更容易读懂？
2. 这段写法是不是减少了重复？
3. 这段写法会不会让当前逻辑反而更绕？

如果更清楚，就值得用。

如果只是更短但更难懂，那就未必更好。

十九、初学者最容易踩的坑

这一章的坑很典型，而且很多都和“只会模仿写法，但还没想清楚含义”有关。

1. 把模板字符串的反引号写错

模板字符串使用的是：

`

不是单引号'，也不是双引号"。

这点特别容易在刚开始时写混。

2. 对象解构时属性名写错

例如对象里明明是：

userName

你却写成：

const{username}=userInfo;

那很可能拿到的就是：

undefined

3. 数组解构忘了它是按位置取值

对象解构更像“按名字拿”，数组解构更像“按顺序拿”。

这一点一定要分清。

4. 把...当成万能复制工具

当前阶段你先把它理解成：

快速展开一层内容、组合新数组或新对象的工具。

不要一开始就把它当成“任何复杂嵌套数据都能完美深拷贝”的万能解法。

5. 看到箭头函数就想全部替换

箭头函数确实很常见，但不是说一学会就要把所有函数都改掉。

当前阶段更推荐：

先在简单、短小、单一职责的函数和回调里用顺它。

6. 模块化时忘记写正确路径或type="module"

模块导入导出最常见的入门错误之一就是：

• 路径写错
• 文件名写错
• HTML 里忘了写type="module"

这类错误看起来小，但非常高频。

二十、本章实践练习

这一章特别适合做“旧写法改现代写法”的练习。

重点不是追求一口气全会，而是让你真正体会：

现代语法到底让哪一步更清楚了。

1. 练习 1：把旧字符串拼接改成模板字符串

请把类似下面这种写法：

constuserName="小白";constcityName="北京";constmessage="你好，我是"+userName+"，我来自"+cityName;

改写成模板字符串版本。

2. 练习 2：练习对象解构和数组解构

请自己创建：

• 一个用户对象
• 一个课程数组

然后分别用：

• 对象解构
• 数组解构

把里面的值拆出来。

这个练习重点是：

1. 区分对象按名字取值
2. 区分数组按位置取值

3. 练习 3：练习展开运算符

请完成下面两类操作：

1. 数组合并

把两个课程数组合并成一个新数组。

2. 对象更新

在保留原有用户信息的前提下，只修改城市字段。

这个练习重点是：

理解...在数组和对象里的共同感觉都是“展开已有内容再组合新结果”。

4. 练习 4：把普通回调函数改成箭头函数

请把类似下面这种写法：

constscores=[60,70,80];constdoubledScores=scores.map(function(score){returnscore*2;});

改写成箭头函数版本。

5. 练习 5：拆分一个小功能为多个模块文件

请尝试把一个非常小的功能拆成 2 到 3 个文件。

例如：

• 一个文件放“计算函数”
• 一个文件放“文案函数”
• 一个主文件负责把结果显示到页面

这个练习重点不是环境搭建，而是先建立：

一个功能可以按职责拆成多个模块文件

的思路。

二十一、学习重点提示

这一章最重要的，不是一下子把所有现代语法都用满，而是先真正建立“读得懂、改得动、用得合适”的能力。

请重点记住：

1. ES6+ 不是另一门语言，而是现代 JavaScript 常用的新写法集合。
2. 模板字符串更适合表达带变量的文案。
3. 解构赋值的本质是“把数组或对象里的值拆出来，直接放进变量”。
4. 展开运算符的核心感觉是“展开已有内容，再组合新结果”。
5. 箭头函数很适合简单函数和常见回调，但当前阶段不要为了短而把逻辑写乱。
6. 模块化的核心价值，是让代码按职责拆分、更容易复用和维护。
7. export是把内容导出去，import是把内容拿进来。
8. 新语法的重点是提升可读性，不是为了“写得更花”。

如果你只记一句话，请记住：

ES6+ 的核心价值，不是让代码看起来更新，而是让你更自然地表达原本就要写的逻辑。

二十二、本章小结

这一章，你已经从“会写基础 JavaScript”进一步走到了“开始读懂并使用现代 JavaScript 写法”。

你已经学习了：

• 什么是 ES6+
• 模板字符串
• 对象解构与数组解构
• 展开运算符
• 箭头函数
• 模块化导入导出基础
• 如何把旧写法改成更现代的写法

这一步非常关键。

因为从这一章开始，你再去看现代前端教程、框架示例和开源代码时，理解门槛会明显下降很多。

后面当你继续进入阶段复盘、再往 TypeScript 和 React 走时，这些 ES6+ 写法几乎会一路陪着你。

二十三、课后思考题

请你思考下面几个问题：

1. 为什么模板字符串通常比+拼接更适合现代项目中的文案组织？
2. 对象解构和数组解构的最核心区别是什么？
3. 为什么说展开运算符更像“展开已有内容再组合新结果”？
4. 为什么箭头函数虽然简洁，但也不适合为了短而乱用？
5. 为什么模块化几乎是项目代码变多之后的必然需求？
6. 为什么说学习 ES6+ 的重点是可读性，而不是“显得会写”？

建议你用自己的话把答案写下来。只要你能把这些问题说清楚，说明你已经真正开始具备阅读现代 JavaScript 代码的能力了。

二十四、下一章预告

下一章我们会继续学习：

从零开始学前端 | 第二十章：阶段复盘与代码思维训练

到那时，我们会把这一整个 JavaScript 阶段真正收拢起来，重新练一次“如何拆需求、如何组织数据、如何写逻辑、如何调试”的基本功。