东莞建站网站模板,遵义网站制作一般需要多少钱,工业产品设计作品集,佛山企业网页制作电话如果大家感感兴趣也可以去看#xff1a; #x1f389;博客主页#xff1a;阿猫的故乡 #x1f389;系列专栏#xff1a;JavaScript专题栏 #x1f389;ajax专栏#xff1a;ajax知识点 #x1f389;欢迎关注#xff1a;#x1f44d;点赞#x1f64c;收藏✍️留言 学习… 如果大家感感兴趣也可以去看 博客主页阿猫的故乡 系列专栏JavaScript专题栏 ajax专栏ajax知识点 欢迎关注点赞收藏✍️留言 学习目标 知道对象数据类型的特征具备对象数组数据渲染页面的能力 学习内容
对象 综合案例 学习时间
周一至周五晚上 7 点—晚上9点周六上午 9 点-上午 11 点周日下午 3 点-下午 6 点 学习产出
对象
• 什么是对象
在JavaScript中对象是由一组键值对属性和方法组成的数据结构。对象可以用来表示现实世界中的实体也可以用来存储和操作数据。
对象可以通过两种方式创建
字面量方式直接使用大括号{}来创建对象并在大括号内定义属性和方法。构造函数方式使用构造函数和关键字new来创建对象。
对象的属性可以是任意的JavaScript数据类型包括字符串、数字、布尔值、数组、函数等。属性可以通过点操作符或方括号操作符来访问和修改。
对象的方法是指对象中的函数。方法可以通过点操作符来调用并可以访问对象的属性。
对象的特点包括
对象的属性和方法是无序的可以随意添加、删除和修改。对象可以通过引用来传递。对象可以作为数据的集合可以使用循环和条件语句来遍历和操作对象的属性和方法。
对象objectJavaScript里的一种数据类型 l 可以理解为是一种无序的数据集合 注意数组是有序的数据集合 l 用来描述某个事物例如描述一个人 Ø 人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能 Ø 如果用多个变量保存则比较散用对象比较统一 l 比如描述 班主任 信息 Ø 静态特征 (姓名, 年龄, 身高, 性别, 爱好) 可以使用数字, 字符串, 数组, 布尔类型等表示 Ø 动态行为 (点名, 唱, 跳, rap) 使用函数表示
• 对象使用 对象有属性和方法组成 Ø 属性信息或叫特征名词。 比如 手机尺寸、颜色、重量等… Ø 方法功能或叫行为动词。 比如 手机打电话、发短信、玩游戏…
对象使用
数据描述性的信息称为属性如人的姓名、身高、年龄、性别等一般是名词性的。 Ø 属性都是成 对出现的包括属性名和值它们之间使用英文 : 分隔 Ø 多个属性之间使用英文 , 分隔 Ø 属性就是依附在对象上的变量外面是变量对象内是属性 Ø 属性名可以使用 或 一般情况下省略除非名称遇到特殊符号如空格、中横线等
ES6最新语法给了JavaScript对象一些新的特性和语法糖。下面是一些ES6最新语法用于JavaScript对象的示例
属性简写 在ES6中如果属性名和变量名相同可以直接使用变量名作为属性名而无需重复声明。
const name John;
const age 25;const person { name, age };方法简写 在ES6中可以使用箭头函数来定义对象的方法。
const person {name: John,age: 25,sayHello() {console.log(Hello, my name is ${this.name});}
};
person.sayHello();计算属性名 ES6允许在对象字面量中使用计算属性名可以在属性名中使用表达式。
const propName name;const person {[propName]: John,age: 25
};
console.log(person.name); // 输出: John对象解构赋值 ES6允许使用解构赋值语法从对象中提取和声明变量。
const person {name: John,age: 25
};const { name, age } person;
console.log(name); // 输出: John
console.log(age); // 输出: 25Object.assign()方法 ES6引入了一个Object.assign()方法用于将源对象的属性复制到目标对象中。
const person {name: John,age: 25
};const newPerson Object.assign({}, person); // 复制person对象
console.log(newPerson);这些是ES6最新语法用于JavaScript对象的一些示例。它们提供了更简洁和方便的方式来操作和定义对象。
对象本质是无序的数据集合, 操作数据无非就是 增 删 改 查 语法
JavaScript对象是一种无序的数据集合它是由一对花括号{}包围的属性和值组成。操作对象的数据通常包括增加添加新属性、删除、修改和查询。
增加属性可以通过为对象添加新属性来增加数据。
const person {}; // 创建空对象person.name John; // 增加name属性
person.age 25; // 增加age属性删除属性可以使用delete关键字来删除对象的属性。
const person {name: John,age: 25
};delete person.age; // 删除age属性修改属性可以通过直接赋值给对象的属性来修改数据。
const person {name: John,age: 25
};person.name Jane; // 修改name属性的值查询属性可以使用点号或方括号来访问对象的属性值。
const person {name: John,age: 25
};console.log(person.name); // 输出: John
console.log(person[age]); // 输出: 25总结来说JavaScript对象是一种无序的数据集合可以使用增加、删除、修改和查询等操作来操作对象中的数据。以上是基本的操作语法示例。
属性-查的另外一种写法
l 对于多词属性或则 - 等属性点操作就不能用了。 l 我们可以采取 对象[‘属性’] 方式 单引号和双引号都阔以
练习
请利用[] 语法把对象里面的属性依次打印出来
对象中的方法
l 数据行为性的信息称为方法如跑步、唱歌等一般是动词性的其本质是函数 1. 方法是由方法名和函数两部分构成它们之间使用 : 分隔 2. 多个属性之间使用英文 , 分隔 3. 方法是依附在对象中的函数 4. 方法名可以使用 或 一般情况下省略除非名称遇到特殊符号如空格、中横线等
• 遍历对象
目标能够遍历输出对象里面的元素l 遍历对象 for 遍历对象的问题 Ø 对象没有像数组一样的length属性,所以无法确定长度 Ø 对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标 在ES6中我们可以使用for...of循环和Object.entries()方法来遍历对象。
使用for...of循环遍历对象的所有属性
const person {name: John,age: 25,gender: male
};for (const key in person) {console.log(key : person[key]);
}输出结果
name: John
age: 25
gender: male使用Object.entries()方法来获取对象的属性和值并使用for...of循环遍历
const person {name: John,age: 25,gender: male
};for (const [key, value] of Object.entries(person)) {console.log(key : value);
}输出结果
name: John
age: 25
gender: male以上是使用ES6语法遍历对象的两种方法。for...of循环用于遍历对象的属性Object.entries()方法用于获取对象的属性和值并通过解构赋值将其分解为key和value。
下面也是关于黑马的练习项目
遍历数组对象 需求根据以上数据渲染生成表格 • 内置对象
目标学会调用JavaScript为我们准备好的内置对象 学习路径 1. 内置对象是什么
JavaScript内部提供的对象包含各种属性和方法给开发者调用 l 思考我们之前用过内置对象吗 Ø document.write() Ø console.log()
内置对象是JavaScript语言提供的一些原生对象它们在执行环境中自动存在无需额外的声明或引入。这些内置对象提供了一些常用的属性和方法可以用于处理各种类型的数据和执行各种操作。
JavaScript中的内置对象可以分为以下几类 基本对象包括Object、Function、Boolean、Symbol、Error等。这些对象是其他对象的基础提供了一些共享的属性和方法。 数字和日期对象包括Number、Math、Date等。Number对象用于处理数字Math对象提供了一些数学计算相关的方法Date对象用于处理日期和时间。 字符串对象包括String对象和RegExp对象。String对象用于处理字符串提供了各种字符串操作的方法RegExp对象用于处理正则表达式。 集合对象包括Array、Set、Map等。Array对象用于表示和操作数组Set对象用于表示和操作一组无重复值Map对象用于表示和操作键值对。 全局对象在浏览器环境中是window对象在Node.js环境中是global对象。全局对象提供了一些与运行环境相关的属性和方法如浏览器中的setTimeout、location等。
除了以上的内置对象还有许多其他的内置对象如JSON对象、Promise对象、Reflect对象等它们提供了更高级的功能和特定的操作。
使用这些内置对象我们可以完成各种常见的操作如创建对象、调用方法、处理数据等。了解并熟悉这些内置对象对于编写高效的JavaScript代码非常重要。 2. 内置对象Math
Math对象是JavaScript中的内置对象之一提供了一些数学计算相关的属性和方法。以下是Math对象的一些常用属性和方法 Math.PI表示圆周率的常量约等于3.14159。 Math.abs(x)返回一个数的绝对值。 Math.ceil(x)返回大于或等于给定数的最小整数。 Math.floor(x)返回小于或等于给定数的最大整数。 Math.round(x)返回给定数的四舍五入值。 Math.max(x1, x2, ...)返回一组数中的最大值。 Math.min(x1, x2, ...)返回一组数中的最小值。 Math.random()返回一个0到1之间的随机数。 Math.sqrt(x)返回给定数的平方根。 Math.pow(x, y)返回给定数的指定次幂。 Math.sin(x)、Math.cos(x)、Math.tan(x)分别返回给定角度的正弦、余弦和正切值。 Math.exp(x)返回e的指定次幂。 Math.log(x)返回给定数的自然对数。 Math.floor(Math.random() * (max - min 1)) min生成一个指定范围内的随机整数。
以上只是Math对象的一些常用属性和方法还有其他一些方法和一些其他常量如三角函数、指数函数、对数函数等。在实际开发中我们可以利用Math对象进行各种数学计算和处理。 3. 生成任意范围随机数
如果你想使用ES6语法来声明函数并生成任意范围的随机数可以使用以下代码示例
const getRandomNumber (min, max) {let range max - min 1;return Math.floor(Math.random() * range) min;
}// 示例使用
let randomNumber getRandomNumber(1, 10);
console.log(randomNumber); // 输出1到10之间的随机整数在上述代码中我们使用ES6的箭头函数语法来声明了一个名为getRandomNumber的函数。函数内部的逻辑与之前的示例相同。
使用let关键字进行声明的优点是它会创建一个具有块级作用域的变量因此它的作用范围被限制在函数内部。这可以避免变量被意外地重写或重新赋值提高代码的可读性和可维护性。
