JavaScript数组与对象方法

20XX/XX/XXJavaScript数组与对象方法汇报人:XXXCONTENTS目录01

课程开篇引入02

JavaScript数组基础用法03

JavaScript数组常用操作04

JavaScript对象基础用法CONTENTS目录05

JavaScript对象常用操作06

综合实战案例07

课程总结与拓展课程开篇引入01学习目标与内容概述

掌握数组核心操作方法熟练运用map、filter等方法处理数组，比如用filter筛选电商订单中的有效数据。

精通对象常用操作技巧学会Object.keys、assign等方法，像用assign合并用户信息与默认配置对象。

理解数组与对象的联动逻辑掌握将数组转换为对象、对象解构为数组的方法，适配复杂业务数据处理场景。JavaScript数组基础用法02数组的概念与创建方式

数组的核心定义数组是JS中用于存储多个有序值的集合，可包含不同类型数据，如数字、字符串甚至对象。

字面量创建数组通过方括号包裹元素直接创建，如`letfruits=['苹果','香蕉','橙子']`，是最常用的创建方式。

构造函数创建数组调用Array构造函数创建，如`letnums=newArray(1,2,3)`，还可指定长度初始化空数组。length属性获取数组长度通过length属性可直接获取数组元素总数，比如letarr=[1,2,3];console.log(arr.length)会返回3。constructor属性查看构造函数constructor属性指向数组的构造函数，数组实例的constructor属性会返回Array()函数本身。prototype属性扩展方法prototype属性可用于给数组添加自定义方法，比如通过Atotype新增求和方法供所有数组调用。数组的基本属性JavaScript数组常用操作03元素添加与删除方法push()与pop()方法push()可在数组末尾添加元素，如arr.push("香蕉")；pop()删除末尾元素，是数组栈操作常用方法。unshift()与shift()方法unshift()在数组开头添加元素，如arr.unshift("苹果")；shift()删除开头元素，适合头部操作场景。splice()方法splice()可灵活添加、删除元素，如arr.splice(2,1,"橙子")，能指定位置完成复杂操作。数组遍历方法

forEach()遍历执行回调forEach()会遍历数组每一项并执行回调函数，例如可用于批量修改电商购物车中商品的价格信息。

map()遍历生成新数组map()遍历数组时会返回新数组，比如将学生成绩数组批量转换为等级评价数组，不修改原数组。

filter()遍历筛选元素filter()遍历数组后返回符合条件的元素新数组，常用于从用户列表中筛选出会员用户数据。slice()方法实现数组截取该方法可提取数组中指定区间元素，如arr.slice(1,3)可截取数组arr索引1到2的元素，不改变原数组。concat()方法实现数组合并此方法能合并多个数组，如arr1.concat(arr2,arr3)可将arr2、arr3元素并入arr1，返回新数组。spread运算符合并数组通过[...arr1,...arr2]语法可快速合并数组，React等项目中常使用该简洁方式实现数组合并。数组截取与合并方法数组排序与反转方法

01sort()方法实现数组排序sort()默认按字符编码排序，可传入比较函数，如arr.sort((a,b)=>a-b)实现数字升序排列。

02reverse()方法实现数组反转reverse()会直接颠倒数组元素顺序，如将[1,2,3]调用后变为[3,2,1]，改变原数组。

03sort()结合localeCompare()实现字符串排序处理多语言字符串排序时，可用arr.sort((a,b)=>a.localeCompare(b))，适配不同语言规则。数组查找与过滤方法

find()方法精准查找该方法返回数组中首个满足条件的元素，比如在用户数组中找到年龄为25的第一个用户对象。

filter()方法批量过滤此方法可筛选出所有符合条件的元素，例如从商品数组中过滤出价格低于100的商品集合。

includes()方法存在性检测该方法用于判断数组是否包含指定值，比如检测成绩数组中是否存在满分100分的记录。JavaScript对象基础用法04对象的概念与创建方式对象的核心概念解析JavaScript对象是键值对集合，键为属性名，值为属性值，可存储多类型数据，是数据封装的核心载体。字面量创建对象实例通过{key:value}字面量语法可快速创建对象，如constuser={name:"Alice",age:25}，简洁直观。构造函数创建对象实例使用newObject()或自定义构造函数创建，如newObject({gender:"female"})，适合批量创建同类型对象。直接字面量定义属性通过{key:value}的字面量形式，可快速定义对象属性，比如letobj={name:"张三",age:25}。对象方法的简洁写法ES6支持直接在对象中用函数名(){}定义方法，例如letobj={greet(){console.log("你好")}}。使用Object.defineProperty定义属性该方法可精准配置属性特性，如设置只读，示例：Object.defineProperty(obj,"id",{value:1,writable:false})。对象的属性与方法定义JavaScript对象常用操作05对象属性的访问与修改

点语法访问属性通过点语法可直接访问对象属性，如使用``就能获取user对象中name属性的具体值。

方括号语法访问属性方括号语法支持动态属性名，例如`user['age']`，也可通过变量`letkey='age';user[key]`来访问。

直接赋值修改属性使用点语法或方括号语法直接赋值，比如`user.age=25`，可快速修改对象对应属性的值。

Object.defineProperty修改属性通过该方法可精准配置属性特性，如设置`Object.defineProperty(user,'name',{value:'小明'})`。对象的遍历方法使用for...in循环遍历for...in循环可遍历对象的可枚举属性，包括继承来的属性，如遍历浏览器window对象的属性。使用Object.keys()遍历Object.keys()返回对象自身可枚举属性组成的数组，常用于遍历自定义对象，如获取用户信息对象的键名。使用Object.entries()遍历Object.entries()返回键值对数组，可配合for...of循环遍历，能同时获取对象的键与对应的值。对象的拷贝方法

浅拷贝之Object.assign()该方法可将源对象属性复制到目标对象，如Object.assign({},obj)，但仅拷贝对象表层属性。

浅拷贝之扩展运算符使用...扩展运算符可快速实现对象浅拷贝，如constnewObj={...oldObj}，操作便捷且可读性强。

深拷贝之JSON序列化法通过JSON.parse(JSON.stringify(obj))实现深拷贝，不过无法处理函数、Symbol等特殊类型数据。

深拷贝之递归自定义函数编写递归函数遍历对象各层级属性逐一复制，能灵活处理各类数据类型，适配复杂对象场景。使用delete操作符删除属性delete操作符可删除对象自有属性，如执行delete，能移除obj对象的name属性。用in操作符判断属性存在in操作符可检测对象自有或继承属性，如'toString'inobj可判断该方法是否存在。使用hasOwnProperty判断自有属性hasOwnProperty仅检测对象自有属性，如obj.hasOwnProperty('age')可确认age是否为自身属性。对象属性的删除与判断对象与JSON的转换01JSON.stringify()实现对象转JSON该方法可将JS对象转为JSON字符串，比如把包含用户信息的对象转为JSON格式用于后端传输。02JSON.parse()实现JSON转对象此方法能将JSON字符串还原为JS对象，常见于解析后端返回的JSON格式响应数据。03转换时的自定义处理可通过传入回调函数定制转换规则，比如过滤对象中敏感属性，像隐藏用户密码字段。综合实战案例06数组方法实现成绩排序统计利用sort()方法按分数高低排序学生成绩数组，结合reduce()统计总分与平均分，如处理班级期中成绩数据。对象方法实现学生信息查询借助Object.keys()遍历学生对象属性，搭配find()方法精准查询指定学生的各科成绩及排名情况。数组与对象结合实现成绩更新通过map()遍历学生数组，配合Object.assign()修改对应学生对象的成绩信息，同步更新整体数据。学生成绩管理功能商品购物车列表处理

购物车商品数量统计通过forEach遍历数组，统计购物车内商品总数量，类似淘宝购物车底部的商品总数显示。

购物车商品总价计算利用reduce方法累加商品单价与数量的乘积，快速得出购物车商品的实际支付总价。

购物车商品筛选排序调用filter方法筛选指定品类商品，搭配sort方法按价格排序，满足用户个性化查看需求。待办事项列表开发

使用数组方法存储与渲染待办项利用push()添加新待办、filter()筛选已完成项，结合map()渲染列表，实现基础数据交互。

使用对象方法封装待办逻辑将添加、删除、标记完成等功能封装为对象方法，如obj.addTodo()，提升代码可维护性。

结合数组与对象方法实现本地存储通过JSON.stringify()序列化待办对象数组，用localStorage保存，刷新页面后可恢复数据。接口数据格式化处理数组过滤提取目标字段借助filter与map方法，从用户列表接口数据中筛选出VIP用户，并提取姓名、ID字段返回新数组。对象嵌套结构扁平化通过递归遍历，将电商商品接口返回的多层嵌套对象数据，转化为单层扁平结构以便前端渲染。数组去重与数据补全利用Set结合map方法，对商品分类接口返回的重复标签数组去重，同时补全缺失的分类描述信息。课程总结与拓展07核心知识点回顾数组遍历方法梳理forEach、map、filter等是常用遍历方法，forEach侧重执行操作，map可返回新数组，filter用于筛选元素。对象属性操作方法总结Object.keys()可获取对象键名数组，Object.assign()能实现对象浅拷贝，常用于对象合并场景。数组迭代转换方法