JavaScript基础课程十三、ES6+ 核心语法（三）——数组与对象高级方法

本课聚焦ES6+数组与对象高级方法，是前端处理批量数据的核心技能，彻底告别冗余的for循环，实现代码语义化与高效化。数组高阶方法覆盖遍历、筛选、映射、查找、汇总，可应对各类列表数据处理场景；对象扩展语法简化创建、合并、取值逻辑，适配现代数据结构。本课知识贯穿Vue、React、小程序等全场景开发，是企业级项目必备技能。结合前序解构、箭头函数、DOM操作，可完成高质量的英语单词小程序，实现数据快速处理与页面渲染。掌握本课内容，能大幅提升编码效率与代码质量，为后续模块化、工程化学习筑牢基础。

一、课程学习目的

1. 掌握ES6+常用数组高级方法，实现遍历、筛选、查找、映射、累加等批量数据处理，告别繁琐for循环。

2. 熟练运用对象扩展语法，简化对象创建、合并、属性提取逻辑，适配现代JS数据结构。

3. 理解高阶函数核心思想，结合箭头函数、解构赋值写出简洁规范的批量处理代码。

4. 衔接前序数组、DOM、英语单词小程序场景，完成数据快速处理与页面渲染。

5. 养成企业级数据处理思维，提升代码可读性、复用性与执行效率。

---

二、核心知识点讲解

1. 数组高级方法（核心：遍历/处理/筛选数据）

数组高级方法属于高阶函数，内部封装循环逻辑，只需传入回调函数定义处理规则，代码更简洁、语义化更强，是企业开发处理数组数据的首选，本课聚焦6个高频方法。

• forEach()：遍历数组，无返回值，替代普通for循环，适合批量执行操作。

• filter()：筛选数组，返回符合条件的新数组，不改变原数组，常用于数据过滤。

• map()：映射数组，返回加工后的新数组，适合批量修改/格式化数据。

• find() ：查找单个元素，返回第一个符合条件的元素，找不到返回undefined。

• some()：判断是否有符合条件的元素，返回布尔值，只要一个满足即为true。

• reduce()：累加/汇总数组，返回累计结果，适合求和、统计、数组扁平化。

2. ES6+对象扩展语法

（1）属性简写

当对象属性名与变量名一致时，可省略冒号和重复值，直接写变量名，简化对象书写。

（2）方法简写

对象内定义方法时，省略function关键字，直接写方法名+()，代码更紧凑。

（3）扩展运算符...

展开对象/数组，实现快速合并、拷贝，替代繁琐的Object.assign()，不改变原对象。

（4）Object.keys()

获取对象所有属性名，返回数组，方便遍历对象属性。

---

三、示例程序

示例1：forEach遍历数组（单词批量打印）

// 英语单词数组（贴合课程场景）
const wordList = ['apple', 'banana', 'cat', 'dog', 'orange'];

// 传统for循环遍历（代码繁琐）
for (let i = 0; i < wordList.length; i++) {
  console.log(`单词${i+1}：${wordList[i]}`);
}

// ES6 forEach遍历（简洁语义化）
// item：当前元素 index：当前索引
wordList.forEach((item, index) => {
  console.log(`ES6遍历 - 单词${index+1}：${item}`);
});

示例说明：本示例对比传统循环与forEach的差异，forEach无需手动控制索引，代码更简洁，适合批量打印单词、遍历列表数据等场景，搭配箭头函数使用更符合现代JS规范。

示例2：filter筛选+map映射（单词处理）

const wordList = ['apple', 'banana', 'cat', 'dog', 'orange'];

// 1. filter筛选：提取长度>3的单词
// 返回新数组，不修改原数组
const longWords = wordList.filter(item => item.length > 3);
console.log('长度大于3的单词：', longWords);

// 2. map映射：给单词添加中文释义
const formatWords = wordList.map(item => {
  // 分支判断匹配释义
  if (item === 'apple') return `${item} - 苹果`;
  if (item === 'banana') return `${item} - 香蕉`;
  if (item === 'orange') return `${item} - 橙子`;
  return `${item} - 未知`;
});
console.log('格式化后的单词：', formatWords);

示例说明：filter筛选符合条件的数据，map批量格式化数据，二者是前端处理列表数据的核心组合。本示例实现长单词筛选、单词加释义，贴合儿童英语学习场景，可直接用于页面渲染。

示例3：find查找+some判断+reduce求和

const wordList = ['apple', 'banana', 'cat', 'dog', 'orange'];
// 单词分数数组
const scoreList = [90, 85, 70, 95, 88];

// 1. find查找：找到第一个包含'a'的单词
const targetWord = wordList.find(item => item.includes('a'));
console.log('第一个含a的单词：', targetWord);

// 2. some判断：是否有长度<4的单词
const hasShortWord = wordList.some(item => item.length < 4);
console.log('是否存在短单词：', hasShortWord);

// 3. reduce求和：计算总分
// total：累计值 item：当前值 0：初始值
const totalScore = scoreList.reduce((total, item) => total + item, 0);
console.log('单词测试总分：', totalScore);

示例说明：本示例整合三个高频数组方法，find精准查找单个元素，some快速判断条件，reduce实现数据汇总。结合单词查找、分数统计场景，覆盖前端数据处理核心需求，代码逻辑清晰、效率更高。

示例4：对象扩展语法（属性/方法简写+扩展运算符）

// 基础变量
const en = 'pear';
const cn = '梨';
const level = 1;

// 1. 对象属性简写+方法简写
const wordObj = {
  // 属性简写：变量名=属性名
  en,
  cn,
  level,
  // 方法简写：省略function
  showInfo() {
    // 箭头函数无this，此处用普通方法
    console.log(`单词：${this.en}，释义：${this.cn}`);
  }
};
// 调用对象方法
wordObj.showInfo();

// 2. 对象扩展运算符：合并对象
const baseInfo = { type: '名词' };
// 展开两个对象，实现合并
const fullWordObj = { ...wordObj, ...baseInfo, tag: '基础词汇' };
console.log('完整单词对象：', fullWordObj);

// 3. Object.keys获取属性名
const keys = Object.keys(fullWordObj);
console.log('单词对象属性名：', keys);

示例说明：本示例讲解对象四大扩展语法，简化对象创建、方法定义、合并逻辑。扩展运算符可快速拷贝/合并对象，避免原对象被篡改；Object.keys方便遍历对象属性，适配单词对象、配置对象等场景。

示例5：综合实战（数组方法+DOM渲染）

// 单词对象数组
const wordData = [
  { en: 'apple', cn: '苹果', score: 90 },
  { en: 'banana', cn: '香蕉', score: 85 },
  { en: 'cat', cn: '小猫', score: 70 }
];
// 获取页面容器
const box = document.getElementById('wordBox');

// map映射+模板字符串渲染DOM
const html = wordData.map(item => `
  <div style="margin:10px;padding:10px;border:1px solid #ccc;">
    <p>英文：${item.en}</p>
    <p>中文：${item.cn}</p>
    <p>分数：${item.score}</p>
  </div>
`).join(''); // join转为字符串

// 渲染到页面
box.innerHTML = html;

示例说明：本课核心综合案例，结合数组map方法、模板字符串、DOM操作，将单词数组批量渲染到页面，完全贴合儿童英语小程序实战，是企业前端开发的标准写法。

---

四、掌握技巧与方法

1. 单纯遍历数组用forEach ，筛选数据用filter ，格式化数据用map ，查找单个用find。

2. 数组高级方法均不改变原数组，返回新数组/结果，数据更安全。

3. 对象优先用属性简写、方法简写 ，合并/拷贝用扩展运算符...，简洁高效。

4. reduce初始值建议必传，避免空数组报错，累加/统计更稳定。

5. 数组方法可链式调用（如filter+map），简化代码结构。

6. 结合箭头函数、解构赋值使用，代码更精简，符合现代JS规范。

---

五、课后作业

基础必做作业

1. 定义数字数组[12,5,8,20,3]，用forEach遍历打印每个数字。

2. 用filter筛选上述数组中大于10的数字，输出结果。

3. 用map给单词数组['pig','duck']添加中文释义，返回格式化数组。

进阶必做作业

4. 用find查找单词数组中第一个长度为3的单词，测试找不到的场景。

5. 用reduce计算数字数组[15,25,10,30]的总和。

6. 定义单词对象，使用属性简写、方法简写，并调用方法。

实战场景作业

7. 儿童英语单词筛选器：

• 定义包含英文、中文、难度的单词对象数组。

• 用filter筛选难度为1的基础单词。

• 用map格式化数据，结合模板字符串渲染到DOM。

• 用some判断是否存在难度为3的高阶单词，输出判断结果。

---

ES6+核心语法（二）------解构与字符串 实战作业代码

作业核心考点：数组解构、对象解构、解构默认值、模板字符串、字符串扩展方法，沿用儿童英语单词学习场景，HTML+JS合一，浏览器直接运行，覆盖基础+进阶+综合实战要求。

---

上一课作业答案：代码功能说明

本代码是适配课程十二ES6+解构与字符串语法的英语单词展示工具，采用HTML+JS整合编写，可直接运行。通过数组解构批量提取单词数据，对象解构快速解析单词对象属性，搭配解构默认值防止数据缺失报错；利用模板字符串实现变量插入与换行渲染，替代传统拼接；调用includes、trim、startsWith等字符串方法，完成单词校验、文本清理、前缀判断等功能。点击按钮可触发解构取值、字符串处理、页面渲染全流程，直观展示解构简化取值、字符串扩展优化交互的优势，贴合零基础实操，全程紧扣本课核心考点。

完整实战代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>课程十二 ES6+解构与字符串实战 - 单词工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei";
        }
        .container {
            width: 650px;
            margin: 60px auto;
            padding: 25px;
            border: 1px solid #f0f0f0;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.05);
        }
        .title {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }
        .operate-btn {
            padding: 8px 18px;
            margin: 10px 5px;
            background: #42b983;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .show-box {
            margin-top: 25px;
            padding: 15px;
            line-height: 2;
            border-top: 1px dashed #eee;
        }
        .item {
            margin: 5px 0;
            padding: 5px 10px;
            background: #f9f9f9;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2 class="title">英语单词解构展示器</h2>
        <button class="operate-btn" id="deconstructBtn">解构取值+渲染</button>
        <button class="operate-btn" id="stringBtn">字符串方法校验</button>
        <div class="show-box" id="showBox"></div>
    </div>

    <script>
        // 基础数据：单词数组、单词对象（嵌套结构）
        const wordArr = ['cat', '小猫', 1];
        const wordObj = {
            en: 'banana',
            cn: '香蕉',
            level: 2,
            // 嵌套对象
            info: { type: '名词', master: '水果类' }
        };
        // 带空格的待处理文本
        const trimStr = '  apple 苹果 初级  ';
        const showBox = document.getElementById('showBox');

        // 1. 解构取值+模板字符串渲染
        document.getElementById('deconstructBtn').onclick = () => {
            // 数组解构 + 默认值
            const [wEn, wCn, wLevel = 1] = wordArr;
            // 对象解构 + 嵌套解构 + 默认值
            const { 
                en, 
                cn, 
                level = 2, 
                info: { type, master } 
            } = wordObj;

            // 模板字符串拼接渲染（支持换行）
            const html = `
                <div class="item">数组解构：英文=${wEn}，中文=${wCn}，等级=${wLevel}</div>
                <div class="item">对象解构：英文=${en}，中文=${cn}，等级=${level}</div>
                <div class="item">嵌套解构：词性=${type}，分类=${master}</div>
            `;
            showBox.innerHTML = html;
        };

        // 2. 字符串扩展方法实战
        document.getElementById('stringBtn').onclick = () => {
            // 去除两端空格
            const newTrimStr = trimStr.trim();
            // 判断是否包含指定字符
            const hasApple = newTrimStr.includes('apple');
            // 判断是否以指定字符开头
            const startWith = newTrimStr.startsWith('apple');
            // 模板字符串展示结果
            const html = `
                <div class="item">原字符串：${trimStr}（含空格）</div>
                <div class="item">去空格后：${newTrimStr}</div>
                <div class="item">是否包含apple：${hasApple}</div>
                <div class="item">是否以apple开头：${startWith}</div>
            `;
            showBox.innerHTML = html;
        };
    </script>
</body># 课程十二
</html>

---

作业验收标准

1. 点击解构按钮，正常展示数组、对象、嵌套解构的取值结果，无undefined异常

2. 点击字符串按钮，正确执行去空格、包含判断、开头判断，结果精准

3. 全程使用模板字符串渲染，无传统+拼接，语法规范无报错

4. 解构默认值生效，缺失数据时不报错，页面展示正常

5. 代码注释清晰，结构分明，贴合本课解构与字符串核心考点

作业拓展要求（进阶）

新增嵌套数组解构功能，结合endsWith方法判断单词后缀，并用模板字符串渲染拓展结果，强化本课语法综合运用能力。

注意事项

• 数组解构按元素顺序 匹配，对象解构按属性名匹配，名称不一致会取值undefined

• 解构不确定是否有值时，务必设置默认值，避免页面渲染空白或控制台报错

• 模板字符串使用反引号``，变量通过${}插入，支持直接换行，勿误用单双引号

• 字符串扩展方法返回新值，不会修改原字符串，需接收赋值后使用

• 嵌套解构层级要对应，避免语法错误，代码保持缩进规范便于排查问题

---