本课重点学习 ES6+ 两大高频语法：解构赋值与字符串扩展。解构赋值可快速从数组、对象中提取数据，让代码大幅精简、易读；模板字符串彻底告别繁琐的 + 拼接，支持变量、换行、表达式，是页面渲染的必备工具。字符串新增方法让文本处理更简单高效。本课知识在 Vue/React 开发、小程序、全栈项目中无处不在，是现代 JavaScript 最实用的语法之一。结合前序 DOM、函数、数组课程，可完成真正规范、简洁、可维护的实战项目，为后续框架学习与企业开发打下坚实基础。
一、课程学习目的
-
掌握 ES6+ 对象解构、数组解构语法，快速提取数据，简化取值代码。
-
熟练使用解构默认值、嵌套解构，应对复杂数据结构。
-
学会 ES6+ 字符串扩展方法，包括模板字符串、判断、截取、去空格等。
-
能够使用模板字符串拼接内容、渲染页面，替代传统字符串拼接。
-
结合前序 DOM、数组、函数知识，写出更简洁、易读、现代化的代码。
二、核心知识点讲解
1. 解构赋值
解构赋值是快速从数组 / 对象中提取数据并赋值给变量的语法，代码更简洁。
（1）数组解构
按顺序提取数组元素，一一对应赋值。
（2）对象解构
按属性名提取对象值，与顺序无关，非常常用。
（3）嵌套解构
适用于多层数组/对象结构，可深度提取数据。
2. ES6+ 字符串扩展
（1）模板字符串 ``（反引号）
支持换行、变量直接插入、表达式运算 ，替代繁琐的+ 拼接。
（2）字符串新增方法
-
includes(str)：判断是否包含指定字符串，返回布尔值 -
startsWith(str)：判断是否以指定字符串开头 -
endsWith(str)：判断是否以指定字符串结尾 -
repeat(n)：重复字符串 n 次 -
trim()：去除字符串两端空格
三、示例程序
示例1：数组解构（按顺序取值）
javascript
// 普通英语单词数组
let words = ["apple", "banana", "orange"];
// 传统取值（麻烦）
let w1 = words[0];
let w2 = words[1];
let w3 = words[2];
// ES6 数组解构（简洁）
let [word1, word2, word3] = words;
console.log(word1); // apple
console.log(word2); // banana
console.log(word3); // orange示例说明：数组解构按索引顺序取值，一行代码完成多个变量赋值，大幅简化数组取值代码，适合批量提取单词、成绩、列表数据。
示例2：对象解构（按属性名取值）
javascript
// 单词对象
let wordObj = {
en: "dog",
cn: "小狗",
level: 1
};
// 传统取值
let en = wordObj.en;
let cn = wordObj.cn;
// ES6 对象解构（属性名必须一致）
let { en, cn, level } = wordObj;
console.log(en); // dog
console.log(cn); // 小狗
console.log(level); // 1示例说明 ：对象解构根据属性名匹配取值，与顺序无关，是开发中最常用的取值方式，特别适合接口数据、配置对象快速提取。
示例3：解构 + 默认值（防止 undefined）
javascript
let user = {
name: "小明",
age: 10
};
// 给不存在的属性设置默认值
let { name, age, gender = "男" } = user;
console.log(name); // 小明
console.log(age); // 10
console.log(gender); // 男（使用默认值）示例说明：解构时可设置默认值，避免数据缺失导致报错，提升代码健壮性。
示例4：模板字符串（变量 + 换行）
javascript
let en = "cat";
let cn = "小猫";
// 传统拼接（易出错、不支持换行）
let str = "单词：" + en + "，意思：" + cn;
// ES6 模板字符串（反引号 ``）
let res = `
当前学习单词：
英文：${en}
中文：${cn}
`;
console.log(res);示例说明 ：模板字符串支持直接插入变量 ${变量}，支持换行，非常适合 DOM 页面渲染、日志输出、单词展示。
示例5：字符串扩展方法
javascript
let word = "apple";
console.log(word.includes("app")); // true 包含
console.log(word.startsWith("a")); // true 开头
console.log(word.endsWith("e")); // true 结尾
console.log(word.repeat(3)); // appleappleapple
console.log(" hello ".trim()); // hello 去空格示例说明：ES6 字符串新方法让判断、截取、处理文本更简单，无需写复杂逻辑，适合单词校验、输入框处理。
示例6：解构 + 模板字符串 + DOM 综合（衔接前期课程）
javascript
// 单词对象
let wordData = {
en: "pear",
cn: "梨",
pic: "pear.jpg"
};
// 对象解构
let { en, cn } = wordData;
// 获取页面元素
let box = document.getElementById("box");
// 模板字符串渲染DOM
box.innerHTML = `
<h3>英文：${en}</h3>
<p>中文：${cn}</p>
`;示例说明：本课综合实战，解构提取单词数据 + 模板字符串渲染页面，完全贴合儿童英语学习场景，是企业真实开发常用写法。
四、掌握技巧与方法
-
数组解构按顺序 ，对象解构按属性名。
-
取值不确定时，给解构加默认值，避免 undefined。
-
字符串拼接一律使用模板字符串 `` ，不再用
+。 -
判断包含、开头、结尾优先用
includes/startsWith/endsWith。 -
解构与函数参数、对象、数组结合使用，代码最简洁。
-
模板字符串可直接渲染 DOM 内容，支持换行与样式。
五、课后作业
基础作业
-
定义数组
["red", "green", "blue"]，使用数组解构提取三个颜色。 -
定义对象
{title:"英语课", time:40}，使用对象解构取值。 -
使用模板字符串输出：
我正在学习 ES6 课程十二。
进阶作业
-
给解构设置默认值，解构一个不存在的属性并测试。
-
使用
includes判断单词"banana"是否包含"nan"。 -
使用嵌套解构，提取多层对象中的单词数据。
实战作业
- 儿童英语单词展示器：
-
建立单词对象（英文、中文、等级）。
-
使用对象解构取值。
-
使用模板字符串渲染到页面 DOM。
-
使用
includes判断单词是否包含指定字母。
上一课实战作业代码
##ES6+语法新特性 代码功能说明
本代码是适配ES6+语法的英语单词学习助手，采用HTML+JS合一编写，可直接在浏览器运行。通过const声明固定单词库、let声明可变文本，实现块级作用域管控与常量保护；利用箭头函数搭配默认参数快速打印单词信息，剩余参数实现多单词总字符数统计；点击测试按钮触发交互，将单词详情、字符统计、单词列表批量渲染至页面，同时验证const数组可修改内部元素、不可更改地址的特性。全程覆盖let/const、箭头函数、默认/剩余参数核心考点，贴合零基础实操，代码简洁规范、注释清晰，可直观检验ES6+语法掌握程度。
完整实战代码
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>第9课 ES6+语法实战 - 英语单词工具</title>
<style>
.box {
width: 600px;
margin: 50px auto;
padding: 20px;
border: 1px solid #eee;
border-radius: 8px;
font-family: "Microsoft YaHei";
}
.btn {
padding: 6px 12px;
margin: 10px 5px;
cursor: pointer;
border: none;
border-radius: 4px;
background: #42b983;
color: #fff;
}
.result {
margin-top: 20px;
line-height: 1.8;
}
</style>
</head>
<body>
<div class="box">
<h3>英语单词学习助手（ES6+版）</h3>
<button class="btn" id="testBtn">执行ES6+测试</button>
<div class="result" id="result"></div>
</div>
<script>
// ===================== 考点1：const声明常量（不可修改）、let声明变量 =====================
// 常量：固定单词库，不可修改
const WORD_LIST = ['apple', 'banana', 'cat', 'dog', 'orange'];
// 变量：可修改的结果文本
let resultText = '';
// ===================== 考点2：箭头函数 + 函数默认参数 =====================
/**
* 打印单词信息函数
* @param {string} en 英文单词
* @param {string} cn 中文释义，默认值'待学习'
*/
const printWord = (en, cn = '待学习') => {
return `英文：${en} | 中文：${cn}`;
};
// ===================== 考点3：剩余参数... 接收多个实参 =====================
/**
* 统计多个单词的总长度
* @param {...any} words 多个单词参数
* @returns 总长度
*/
const countTotalLength = (...words) => {
let total = 0;
words.forEach(item => {
total += item.length;
});
return total;
};
// ===================== 考点4：箭头函数绑定点击事件 =====================
document.getElementById('testBtn').onclick = () => {
// 1. 测试默认参数
resultText += '<p>' + printWord('apple', '苹果') + '</p>';
// 不传中文，使用默认值
resultText += '<p>' + printWord('pear') + '</p>';
// 2. 测试剩余参数
const totalLen = countTotalLength(...WORD_LIST);
resultText += `<p>单词库总字符数：${totalLen}</p>`;
// 3. 测试let块级作用域
for(let i = 0; i < WORD_LIST.length; i++) {
// let仅在当前循环块有效
resultText += `<p>单词${i+1}：${WORD_LIST[i]}</p>`;
}
// 渲染结果到页面
document.getElementById('result').innerHTML = resultText;
};
// 测试const数组特性：内部元素可操作，地址不可改
WORD_LIST.push('grape');
// WORD_LIST = ['test']; // 取消此行会报错，const常量地址不可修改
</script>注意事项
-
全程禁止使用var关键字，严格区分let（可变变量）与const（常量）的使用场景，避免变量污染
-
箭头函数无自身this指向，仅适用于普通回调、工具函数，不可作为构造函数使用
-
剩余参数必须放在形参末尾，const声明的数组/对象不可直接重新赋值，仅可修改内部成员
-
运行后打开浏览器控制台排查报错，确保页面渲染正常、语法规范、逻辑无漏洞
作业验收标准
-
点击按钮，正常展示单词信息、默认参数、剩余参数统计结果
-
代码中无var关键字，全程使用let/const
-
箭头函数、默认参数、剩余参数语法使用正确
-
理解const常量特性：基本类型不可改，数组/对象内部可操作
-
控制台无报错，代码注释清晰
作业拓展要求
修改代码，新增一个箭头函数，接收剩余参数实现查找最长单词功能，并将结果渲染到页面，强化ES6+语法实操能力。