-
JavaScript-对象
学习目标：
- 掌握对象
学习内容：
- 什么是对象
- 对象使用
- 对象操作
- 对象的方法
- 遍历对象
- 内置对象
什么是对象：
- 对象
object：JavaScript里的一种数据类型。 - 可以理解为是一种无序的数据集合，注意数组是有序的数据集合。
- 用来描述某个事物，例如描述一个人。
- 人有姓名、年龄、性别等信息、还有吃饭睡觉敲代码等功能。
- 如果有多个变量保存则比较散，用对象比较统一。
- 比如描述班主任信息。
- 静态特征（姓名，年龄，身高，性别，爱好）➡可以使用数字，字符串，数组，布尔类型等表示。
- 动态行为（点名，唱，跳，rap)➡使用函数表示。
<title>对象-对象使用</title> </head> <body> <script> //1.声明对象 let obj = { uname: '雪碧宝宝', age: 18, gender: '女' } console.log(obj) </script> </body>- 对象是什么？
- 对象是一种数据类型。
- 无序的数据的集合。
- 对象有什么特点？
- 无序的数据的集合。
- 可以详细的描述某个事物。
对象使用：
- 对象声明语法
let 对象名 = {}let 对象名 = new Object()例如：
//声明了一个person的对象 let person = {}实际开发中，我们多用花括号。
{}是对象字面量。- 对象有属性和方法组成
属性：信息或叫特征（名词）。比如手机尺寸、颜色、重量等。
方法：功能或叫行为（动词）。比如手机打电话、发短信、玩游戏。
let 对象名 = { 属性名：属性值, 方法名：函数 }- 属性
数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。
let obj = { uname: '雪碧宝宝', age: 18, gender: '女' }- 属性都是成对出现的，包括属性名和值，它们之间使用
：分隔。 - 多个属性之间使用英文
，分隔。 - 属性就是依附在对象上的变量（外面是变量，对象内是属性）
- 属性名可以使用
""或''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等。
let obj = { 'goods-name': '苹果', num: 18, weight: '2kg', adress: '芒果便利店' } console.log(obj['goods-name'])注意：
- 对象属性没有顺序。
- 属性和值用
；隔开。 - 多个属性用
，隔开。
<title>练习-声明产品对象</title> </head> <body> <script> let goods = { name: '苹果', num: 18, weight: '2kg', adress: '芒果便利店' } goods.price = '30元' console.log(goods) console.log(goods, name) </script> </body>
对象操作：
对象本质是无序的数据集合，操作数据无非就是
增删改查语法
- 对象操作 - 查
- 声明对象，并添加了若干属性后，可以使用，获得对象中属性对应的值，称之为属性访问。
- 语法：
对象名.属性。 - 简单理解就是获得对象里面的属性值。
<title>对象-对象操作-查</title> </head> <body> <script> //1.声明 let obj = { name: '苹果', num: 18, weight: '2kg', adress: '芒果便利店' } //2.使用属性 查 对象名.属性名 console.log(obj.adress) </script> </body>- 查的另外一种属性
//3.查的另外一种属性: 对象名['属性名'] let obj = { 'goods-name': '苹果', num: 18, weight: '2kg', adress: '芒果便利店' } console.log(obj['goods-name'])- 对象操作 - 改
语法：对象名.属性 = 新值。
<title>对象-对象操作-改</title> </head> <body> <script> //1.声明对象 let pink = { uname: '雪碧宝宝', age: 18, gender: '女' } //2.改 对象名.属性 = 新值 pink.gender = '男' console.log(pink) </script> </body>- 对象操作 - 增
语法：对象名.属性 = 新值。
注意：改和增的语法一样，判断标准就是对象有没有这个属性，没有就是新增，有就是改。
<title>对象-对象操作-增</title> </head> <body> <script> //1.声明对象 let pink = { uname: '雪碧宝宝', age: 18, gender: '女' } //2.增 对象名.属性 = 新值 pink.hobby = '吃罐罐' console.log(pink) </script> </body>- 对象操作 - 删（了解）
语法：delete 对象名.属性。
<title>对象-对象操作-删</title> </head> <body> <script> //1.声明对象 let pink = { uname: '雪碧宝宝', age: 18, gender: '女' } //2.删 delete 对象名.属性 了解 delete pink.gender console.log(pink) </script> </body>- 练习
<title>练习-声明产品对象-增删改查</title> </head> <body> <script> let goods = { name: '苹果', num: 18, weight: '2kg', adress: '芒果便利店' } goods.price = '30元' //1.将商品名称的值修改 goods.name = '栗子' //2.新增一个颜色属性 goods.color = 'pink' //3.打印输出 console.log(goods) </script> </body>
对象的方法：
数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。
<title>对象-对象的方法</title> </head> <body> <script> let obj = { uname: '雪碧宝宝', //方法 song: function (x, y) { // console.log('青春修炼手册') console.log(x + y) }, dance: function () { console.log('jazz') } } //方法调用 对象名.方法名 obj.song(1, 2) obj.dance() </script> </body>- 方法是由方法名和函数两部分构成，它们之间使用
：分隔。 - 多个属性之间使用英文
,分隔。 - 方法是依附在对象中的函数。
- 方法名可以使用
""或''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等。 - 声明对象，并添加了若干方法后，可以使用，调用对象中函数，称之为方法调用。
- 也可以添加形参和实参。
- 注意：千万别忘记了给方法名后面加小括号。
遍历对象：
for遍历对象的问题
- 对象没有像数组一样的
length属性，所以无法确定长度。 - 对象里面是无序的键值对，没有规律，不像数组里面有规律的下标。
<title>对象-遍历对象</title> </head> <body> <script> //for in 我们不推荐遍历数组 // let arr = ['pink', 'red', 'blue'] // for (let k in arr) { // console.log(k) //数组的下标 索引号 但是是字符串'0' // console.log(arr[k]) //arr[k] // } //1.遍历对象 for in let obj = { uname: '雪碧宝宝', age: 18, gender: '女' } //2.遍历对象 for (let k in obj) { console.log(k) //属性名 'uname' 'age' 'gender' console.log(obj[k]) //输出属性值 obj[k] 'uname' === k } </script> </body>- 练习
<title>练习-遍历数组对象</title> </head> <body> <script> let students = [ { name: '小明', age: 18, gender: '男', hometown: '河北省' }, { name: '小红', age: 19, gender: '女', hometown: '河南省' }, { name: '小刚', age: 17, gender: '男', hometown: '山西省' }, { name: '小丽', age: 18, gender: '女', hometown: '山东省' } ] for (let i = 0; i < students.length; i++) { // console.log(i) //下标索引号 // console.log(students[i]) //每个对象 console.log(students[i].name) //对象名字 console.log(students[i].age) console.log(students[i].gender) console.log(students[i].hometown) } </script> </body>- 案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>练习-遍历数组对象-渲染学生信息表案例</title> <style> table { width: 600px; text-align: center; } table, th, td { border: 1px solid #ccc; border-collapse: collapse; } caption { font-size: 18px; margin-bottom: 10px; font-weight: 700; } tr { height: 40px; cursor: pointer; } table tr:nth-child(1) { background-color: #ddd; } table tr:not(:first-child):hover { background-color: #eee; } </style> </head> <body> <h2>学生信息</h2> <p>将数据渲染到页面中...</p> <table> <caption>学生列表</caption> <tr> <th>序列</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>家乡</th> </tr> <script> //1.数据准备 let students = [ { name: '小明', age: 18, gender: '男', hometown: '河北省' }, { name: '小红', age: 19, gender: '女', hometown: '河南省' }, { name: '小刚', age: 17, gender: '男', hometown: '山西省' }, { name: '小丽', age: 18, gender: '女', hometown: '山东省' } ] //2.渲染页面 for (let i = 0; i < students.length; i++) { document.write(` <tr> <td>${i + 1}</td> <td>${students[i].name}</td> <td>${students[i].age}</td> <td>${students[i].gender}</td> <td>${students[i].hometown}</td> </tr> `) } </script> </table> </body> </html>
内置对象：
- 内置对象是什么
- JavaScript内部提供的对象，包含各种属性和方法给开发者调用。
- 思考：我们之前用过内置对象吗？
document.write() console.log()- 内置对象-
Math
- 介绍：
Math对象是JavaScript提供的一个“数学”对象。 - 作用：提供了一系列做数学运算的方法。
Math对象包含的方法有：
random 生成0-1之间的随机数（包含0不包括1） ceil 向上取整 floor 向下取整 max 找最大数 min 找最小数 pow 幂运算 abs 绝对值 <title>内置对象-内置对象-Math</title> </head> <body> <script> //属性 console.log(Math.PI) //方法 //1.ceil 天花板 向上取整 console.log(Math.ceil(1.1)) //2 console.log(Math.ceil(1.5)) //2 console.log(Math.ceil(1.9)) //2 console.log('............') //2.floor 地板 向下取整 console.log(Math.floor(1.1)) //1 console.log(Math.floor(1.5)) //1 console.log(Math.floor(1.9)) //1 console.log('............') //3.四舍五入 round console.log(Math.round(1.1)) //1 console.log(Math.round(1.5)) //2 console.log(Math.round(1.9)) //2 console.log(Math.round(-1.1)) //-1 console.log(Math.round(-1.5)) //-1 console.log(Math.round(-1.51)) //-2 console.log(Math.round(-1.6)) //-2 console.log('............') // 取整函数 parseInt(1.2) //1 // 取整函数 parseInt('12px') //12 //4.找最大值 max console.log(Math.max(1, 2, 3, 4, 5)) //5 //5.找最小值 min console.log(Math.min(2, 4, 6, 8, 10)) //2 //6.生成0~1间的随机数 random 包含0，不包含1 console.log(Math.random()) //7.幂方法 pow console.log(Math.pow(4, 2)) // 求4的2次方 16 console.log(Math.pow(2, 3)) //求2的3次方 8 //8.平方根 sqrt console.log(Math.sqrt(16)) //求某数的平方根 4 </script> </body>- 内置对象-生成随机数
<title>内置对象-生成随机数</title> </head> <body> <script> //左闭右开 能取到0 但是取不到1 中间的一个随机小数 [0，1） // console.log(Math.random()) //1.生成0~10之间的整数随机数 console.log(Math.floor(Math.random() * 11)) let arr = ['red ', 'green', 'blue'] let random = Math.floor(Math.random() * arr.length) // console.log(random) console.log(arr[random]) //生成5~10的整数随机数 // 取到N~M的随机整数 function getRandom(N, M) { return Math.floor(Math.random() * (M - N + 1)) + N } console.log(getRandom(5, 10)) </script> </body>- 练习-随机点名案例
<title>练习-随机点名案例</title> </head> <body> <script> let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操'] //1.得到一个随机数，作为数组的索引号，这个随机数0~6 let random = Math.floor(Math.random() * arr.length) //2.输出 console.log(arr[random]) //改进随机点名案例 //3.splice(起始位置（下标)，删除几个元素 arr.splice(random, 1) console.log(arr) </script> </body>- 练习-猜数字游戏
<title>练习-猜数字游戏</title> </head> <body> <script> //1.随机生成一个数字 1~10 // 取到N~M的随机整数 function getRandom(N, M) { return Math.floor(Math.random() * (M - N + 1)) + N } let random = getRandom(1, 10) console.log(random) //需要不断的循环 while (true) { //2.用户输入一个值 let num = +prompt('请输入你猜的数字：') //3.判断输出 if (num > random) { alert('你猜大了') } else if (num < random) { alert('你猜小了') } else { alert('猜对了，你很棒') break //退出循环 } } </script> </body>- 练习-随机猜数字游戏设定次数
<title>练习-随机猜数字游戏设定次数</title> </head> <body> <script> //1.随机生成一个数字 1~10 // 取到N~M的随机整数 function getRandom(N, M) { return Math.floor(Math.random() * (M - N + 1)) + N } let random = getRandom(1, 10) //2.设定三次 三次没猜对就直接退出 let flag = true //开关变量 for (let i = 1; i <= 3; i++) { let num = +prompt('请输入1~10之间的数字：') if (num > random) { alert('你猜大了，继续') } else if (num < random) { alert('你猜小了，继续') } else { flag = false alert('猜对了，你很棒') break //退出循环 } } //写到for的外面 if (flag) { alert('次数已经用完') } </script> </body>- 案例-生成随机颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>案例-生成随机颜色</title> <style> div { width: 300px; height: 300px; } </style> </head> <body> <div></div> <script> //1.自定义一个随机颜色函数 function getRandomColor(flag = true) { if (flag) { //3.如果是true 则返回#ffffff let str = '#' let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'] //利用for循环随机抽6次 累加到str里面 for (let i = 1; i <= 6; i++) { //每次要随机从数组里面抽取一个 //random 是数组的索引号 是随机的 let random = Math.floor(Math.random() * arr.length) // str = str + arr[random] str += arr[random] } return str } else { //4.否则是false 则返回rgb(255,255,255) let r = Math.floor(Math.random() * 256) let g = Math.floor(Math.random() * 256) let b = Math.floor(Math.random() * 256) return `rgb(${r},${g},${b})` } } //2.调用函数 getRandomColor(布尔值) console.log(getRandomColor(false)) console.log(getRandomColor(true)) console.log(getRandomColor()) const div = document.querySelector('div') div.style.backgroundColor = getRandomColor() </script> </body> </html> -
相关阅读:
＜Altium Designer＞ 将.DSN文件导入并转换成SchDoc文件
【开源】基于Vue和SpringBoot的用户画像活动推荐系统
BGP高级特性——BGP路由控制
985测试工程师被吊打，学历和经验到底谁更重要？
【SSR服务端渲染+CSR客户端渲染+post请求+get请求+总结】三种开启服务器的方法总结
【计算机网络】HTTP协议以及无状态问题解决
Ci2454国产2.4GHz无线收发遥控SoC芯片
40_内部类
一个用java的get请求
构建高效的接口自动化测试框架思路
- 原文地址：https://blog.csdn.net/m0_64105917/article/details/139729029