当前位置：首页 > news >正文

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

news 2026/5/12 14:16:07

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

一、课程学习目的

掌握ES6+常用数组高级方法，实现遍历、筛选、查找、映射、累加等批量数据处理，告别繁琐for循环。
熟练运用对象扩展语法，简化对象创建、合并、属性提取逻辑，适配现代JS数据结构。
理解高阶函数核心思想，结合箭头函数、解构赋值写出简洁规范的批量处理代码。
衔接前序数组、DOM、英语单词小程序场景，完成数据快速处理与页面渲染。
养成企业级数据处理思维，提升代码可读性、复用性与执行效率。

二、核心知识点讲解

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

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

forEach()：遍历数组，无返回值，替代普通for循环，适合批量执行操作。
filter()：筛选数组，返回符合条件的新数组，不改变原数组，常用于数据过滤。
map()：映射数组，返回加工后的新数组，适合批量修改/格式化数据。
find()：查找单个元素，返回第一个符合条件的元素，找不到返回undefined。
some()：判断是否有符合条件的元素，返回布尔值，只要一个满足即为true。
reduce()：累加/汇总数组，返回累计结果，适合求和、统计、数组扁平化。

2. ES6+对象扩展语法

（1）属性简写

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

（2）方法简写

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

（3）扩展运算符…

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

（4）Object.keys()

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

三、示例程序

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

// 英语单词数组（贴合课程场景）constwordList=['apple','banana','cat','dog','orange'];// 传统for循环遍历（代码繁琐）for(leti=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映射（单词处理）

constwordList=['apple','banana','cat','dog','orange'];// 1. filter筛选：提取长度>3的单词// 返回新数组，不修改原数组constlongWords=wordList.filter(item=>item.length>3);console.log('长度大于3的单词：',longWords);// 2. map映射：给单词添加中文释义constformatWords=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求和

constwordList=['apple','banana','cat','dog','orange'];// 单词分数数组constscoreList=[90,85,70,95,88];// 1. find查找：找到第一个包含'a'的单词consttargetWord=wordList.find(item=>item.includes('a'));console.log('第一个含a的单词：',targetWord);// 2. some判断：是否有长度<4的单词consthasShortWord=wordList.some(item=>item.length<4);console.log('是否存在短单词：',hasShortWord);// 3. reduce求和：计算总分// total：累计值 item：当前值 0：初始值consttotalScore=scoreList.reduce((total,item)=>total+item,0);console.log('单词测试总分：',totalScore);

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

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

// 基础变量consten='pear';constcn='梨';constlevel=1;// 1. 对象属性简写+方法简写constwordObj={// 属性简写：变量名=属性名en,cn,level,// 方法简写：省略functionshowInfo(){// 箭头函数无this，此处用普通方法console.log(`单词：${this.en}，释义：${this.cn}`);}};// 调用对象方法wordObj.showInfo();// 2. 对象扩展运算符：合并对象constbaseInfo={type:'名词'};// 展开两个对象，实现合并constfullWordObj={...wordObj,...baseInfo,tag:'基础词汇'};console.log('完整单词对象：',fullWordObj);// 3. Object.keys获取属性名constkeys=Object.keys(fullWordObj);console.log('单词对象属性名：',keys);

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

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

// 单词对象数组constwordData=[{en:'apple',cn:'苹果',score:90},{en:'banana',cn:'香蕉',score:85},{en:'cat',cn:'小猫',score:70}];// 获取页面容器constbox=document.getElementById('wordBox');// map映射+模板字符串渲染DOMconsthtml=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操作，将单词数组批量渲染到页面，完全贴合儿童英语小程序实战，是企业前端开发的标准写法。

四、掌握技巧与方法

单纯遍历数组用forEach，筛选数据用filter，格式化数据用map，查找单个用find。
数组高级方法均不改变原数组，返回新数组/结果，数据更安全。
对象优先用属性简写、方法简写，合并/拷贝用扩展运算符…，简洁高效。
reduce初始值建议必传，避免空数组报错，累加/统计更稳定。
数组方法可链式调用（如filter+map），简化代码结构。
结合箭头函数、解构赋值使用，代码更精简，符合现代JS规范。

五、课后作业

基础必做作业

定义数字数组[12,5,8,20,3]，用forEach遍历打印每个数字。
用filter筛选上述数组中大于10的数字，输出结果。
用map给单词数组[‘pig’,‘duck’]添加中文释义，返回格式化数组。

进阶必做作业

用find查找单词数组中第一个长度为3的单词，测试找不到的场景。
用reduce计算数字数组[15,25,10,30]的总和。
定义单词对象，使用属性简写、方法简写，并调用方法。

实战场景作业

儿童英语单词筛选器：

定义包含英文、中文、难度的单词对象数组。
用filter筛选难度为1的基础单词。
用map格式化数据，结合模板字符串渲染到DOM。
用some判断是否存在难度为3的高阶单词，输出判断结果。

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

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

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

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

完整实战代码

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="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 10pxrgba(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><divclass="container"><h2class="title">英语单词解构展示器</h2><buttonclass="operate-btn"id="deconstructBtn">解构取值+渲染</button><buttonclass="operate-btn"id="stringBtn">字符串方法校验</button><divclass="show-box"id="showBox"></div></div><script>// 基础数据：单词数组、单词对象（嵌套结构）constwordArr=['cat','小猫',1];constwordObj={en:'banana',cn:'香蕉',level:2,// 嵌套对象info:{type:'名词',master:'水果类'}};// 带空格的待处理文本consttrimStr=' apple 苹果 初级 ';constshowBox=document.getElementById('showBox');// 1. 解构取值+模板字符串渲染document.getElementById('deconstructBtn').onclick=()=>{// 数组解构 + 默认值const[wEn,wCn,wLevel=1]=wordArr;// 对象解构 + 嵌套解构 + 默认值const{en,cn,level=2,info:{type,master}}=wordObj;// 模板字符串拼接渲染（支持换行）consthtml=`<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=()=>{// 去除两端空格constnewTrimStr=trimStr.trim();// 判断是否包含指定字符consthasApple=newTrimStr.includes('apple');// 判断是否以指定字符开头conststartWith=newTrimStr.startsWith('apple');// 模板字符串展示结果consthtml=`<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>