Web前端技术(JavaScript+jQuery) 课件 任务10 存储并输出手机商品信息

Web前端技术主讲人：XXX

XXX学院任务10存储并输出手机商品信息【知识目标】

理解对象的含义；

掌握创建及访问对象的方法；

掌握遍历对象的方法；

了解判断对象的方法。【技能目标】

能够根据需求使用不同的方法创建对象；

能够根据需求访问对象属性和方法；

能够使用不同的方法遍历对象；

能够使用相关方法判断对象是否存在指定属性和方法。【素质目标】

培养学生良好的代码编写规范；

培养学生严谨的逻辑思维；

培养学生的家国情怀。教学目标知识导图什么是对象都是“对象”（1）对象的引入

在JavaScript中，对象是拥有属性和方法的数据集合，是被称为属性和方法的命名值的容器。

对象是由键和值组成的无序集合，定义对象类型需要使用花括号{}，语法格式如下。{name1:value1,name2:value2...,nameN:valueN}【说明】（1）name1、name2...、nameN为属性名，属性名是字符串类型的。（2）value1、value2...、valueN为属性值，属性值可以是JavaScript中任意的数据类型。（2）对象的定义及语法商品名称：手机品牌：华为型号：HUAWEInova12颜色：曜金黑

内存：256GB屏幕尺寸：6.7英寸手机操作系统：HarmonyOS功能：打电话、发信息…对象：手机属性：品牌、型号、颜色、内存

屏幕尺寸、手机操作系统方法：打电话、发信息…constphone={brand:'华为',model:'HUAWEInova12',color:'black’,flash:'256GB',size:'6.7英寸',os:'HarmonyOS’,call:()=>{},sendSMS:()=>{}}（3）对象案例分析创建及访问对象利用字面量{}创建对象利用newObject创建对象利用构造函数创建对象创建对象方法1方法2方法3（1）创建对象的方法对象创建完成后，可以按以下的方法访问对象的属性和方法。（1）访问对象属性方法1：对象名.属性名，如stuO方法2：对象名[属性名]，如stuObj[‘name’]（2）访问对象方法方法1：对象名.方法名()，如stuObj.sayHello()方法2：对象名[方法名]()，如stuObj[‘sayHello’]()（3）通过对象解构访问对象的属性和方法（2）访问对象【案例】请创建学生对象（student），具体说明如下。（1）该对象包括姓名、学号、性别、年龄、专业、班级。（2）该对象具有以下两个方法。①sayHello方法：在页面输出“XXX说：大家好！”。②study方法：在页面上输出“好好学习天天向上”（3）在控制台输出该对象。（3）案例遍历对象使用for…in遍历对象使用Object.keys()方法遍历对象使用Object.values()方法遍历对象使用Object.entries()方法遍历对象遍历对象方法1方法2方法3方法4（1）遍历对象的方法（2）使用for…in遍历对象for…in语句用于循环对象的属性，循环中的代码每执行一次，就会对数据的元素或对象的属性进行一次操作，其语法格式如下。for(variableinobject){//处理逻辑}【参数说明】variable：变量名称，用于存储对象属性名；