【对象】JavaScript 全栈体系（八）

2023-09-10 22:19:57

JavaScript 基础

第十五章对象

对象是 JavaScript 数据类型的一种，之前已经学习了数值类型、字符串类型、布尔类型、undefined。对象数据类型可以被理解成是一种数据集合。它由属性和方法两部分构成。

一、什么是对象

对象（object）：JavaScript里的一种数据类型
可以理解为是一种无序的数据集合，注意数组是有序的数据集合

二、对象使用

1. 语法

声明一个对象类型的变量与之前声明一个数值或字符串类型的变量没有本质上的区别。

DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 对象语法title>
head>
<body><script>// 声明字符串类型变量let str = 'hello world!'// 声明数值类型变量let num = 199// 声明对象类型变量，使用一对花括号// user 便是一个对象了，目前它是一个空对象let user = {}script>
body>
html>

2. 属性和访问

数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。

属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔
多个属性之间使用英文 , 分隔
属性就是依附在对象上的变量
属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 对象语法title>
head>
<body><script>// 通过对象描述一个人的数据信息// person 是一个对象，它包含了一个属性 name// 属性都是成对出现的，属性名 和 值，它们之间使用英文 : 分隔let person = {name: '小明', // 描述人的姓名age: 18, // 描述人的年龄stature: 185, // 描述人的身高gender: '男', // 描述人的性别}script>
body>
html>

声明对象，并添加了若干属性后，可以使用 . 或 [] 获得对象中属性对应的值，我称之为属性访问。

DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 对象语法title>
head>
<body><script>// 通过对象描述一个人的数据信息// person 是一个对象，它包含了一个属性 name// 属性都是成对出现的，属性名 和 值，它们之间使用英文 : 分隔let person = {name: '小明', // 描述人的姓名age: 18, // 描述人的年龄stature: 185, // 描述人的身高gender: '男', // 描述人的性别};// 访问人的名字console.log(person.name) // 结果为 小明// 访问人性别console.log(person.gender) // 结果为 男// 访问人的身高console.log(person['stature']) // 结果为 185// 或者console.log(person.stature) // 结果同为 185script>
body>
html>

扩展：也可以动态为对象添加属性，动态添加与直接定义是一样的，只是语法上更灵活。

DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 对象语法title>
head>
<body><script>// 声明一个空的对象（没有任何属性）let user = {}// 动态追加属性user.name = '小明'user['age'] = 18// 动态添加与直接定义是一样的，只是语法上更灵活script>
body>
html>

3. 方法和调用

数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。

方法是由方法名和函数两部分构成，它们之间使用 : 分隔
多个属性之间使用英文 , 分隔
方法是依附在对象中的函数
方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 对象方法title>
head>
<body><script>// 方法是依附在对象上的函数let person = {name: '小红',age: 18,// 方法是由方法名和函数两部分构成，它们之间使用 : 分隔singing: function () {console.log('两只老虎，两只老虎，跑的快，跑的快...')},run: function () {console.log('我跑的非常快...')}}script>
body>
html>

声明对象，并添加了若干方法后，可以使用 . 或 [] 调用对象中函数，我称之为方法调用。

DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 对象方法title>
head>
<body><script>// 方法是依附在对象上的函数let person = {name: '小红',age: 18,// 方法是由方法名和函数两部分构成，它们之间使用 : 分隔singing: function () {console.log('两只老虎，两只老虎，跑的快，跑的快...')},run: function () {console.log('我跑的非常快...')}}// 调用对象中 singing 方法person.singing()// 调用对象中的 run 方法person.run()script>
body>
html>

扩展：也可以动态为对象添加方法，动态添加与直接定义是一样的，只是语法上更灵活。

DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 对象方法title>
head>
<body><script>// 声明一个空的对象（没有任何属性，也没有任何方法）let user = {}// 动态追加属性user.name = '小明'user.['age'] = 18// 动态添加方法user.move = function () {console.log('移动一点距离...')}script>
body>
html>

注：无论是属性或是方法，同一个对象中出现名称一样的，后面的会覆盖前面的。

DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
head><body><script>// 1.声明对象// let alex = {//   uname: 'alex',//   age: 18,//   gender: '女'// }// // console.log(alex)// // console.log(typeof alex)// // 改 把性别的女改为男// pink.gender = '男'// console.log(alex)// // 增// alex.hobby = '足球'// console.log(alex)// // 删 (了解)// delete pink.age// console.log(alex)// // let num = 10// num = 20// console.log(num)// 1. 声明// console.log(window.name)let obj = {'goods-name': '小米10青春版',num: '100012816024',weight: '0.55kg',address: '中国大陆'}obj.name = '小米10 PLUS'obj.color = '粉色'// console.log(obj.name)console.log(obj.num)console.log(obj.weight)console.log(obj.address)console.log(obj.color)// console.log(obj.goods - name)// 查的另外一种属性：// 对象名['属性名']console.log(obj['goods-name'])// 查总结：// (1) 对象名.属性名  obj.ageconsole.log(obj.num)// (2) 对象名['属性名']  obj['age']console.log(obj['num'])// // console.log(address)// // 2. 使用属性 查  对象名.属性名// console.log(obj.address)// console.log(obj.name)script>
body>html>

DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
head><body><script>let obj = {uname: '刘德华',// 方法sing: function (x, y) {// console.log('冰雨')console.log(x + y)},dance: function () { }}// 方法调用 对象名.方法名// console.log(obj.sing(1, 2))obj.sing(1, 2) // 3// document.write('123')script>
body>html>

4. null

null 也是 JavaScript 中数据类型的一种，通常只用它来表示不存在的对象。使用 typeof 检测它的类型时，结果为 object。

三、遍历对象

for 遍历对象的问题：

对象没有像数组一样的length属性,所以无法确定长度
对象里面是无序的键值对, 没有规律。不像数组里面有规律的下标

let obj = {uname: 'pink'
}
for(let k in obj) {// k 属性名  字符串  带引号    obj.'uname'     k ===  'uname'// obj[k]  属性值    obj['uname']   obj[k]
}

for in 不提倡遍历数组因为 k 是字符串
在这里插入图片描述

DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
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: 'alex',age: 18,gender: '男'}// 2. 遍历对象for (let k in obj) {console.log(k) // 属性名  'uname'   'age'// console.log(obj.uname)// console.log(obj.k) // undefined// console.log(obj.'uname')// console.log(obj['uname'])   'uname'  === kconsole.log(obj[k])  // 输出属性值  obj[k]}script>
body>html>

DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
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].hometown)}script>
body>html>

案例：打印学生信息

DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><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: '山东省' },{ name: '晓强', age: 16, gender: '女', hometown: '蓝翔技校' }]// 2. 渲染页面for (let i = 0; i < students.length; i++) {document.write(`${i + 1}${students[i].name}${students[i].age}${students[i].gender}${students[i].hometown}`)}script>table>body>html>

请添加图片描述

四、内置对象

回想一下我们曾经使用过的 console.log，console其实就是 JavaScript 中内置的对象，该对象中存在一个方法叫 log，然后调用 log 这个方法，即 console.log()。

除了 console 对象外，JavaScritp 还有其它的内置的对象

1. Math

Math 是 JavaScript 中内置的对象，称为数学对象，这个对象下即包含了属性，也包含了许多的方法。

介绍：Math对象是JavaScript提供的一个“数学”对象
作用：提供了一系列做数学运算的方法
Math对象包含的方法有：
- random：生成0-1之间的随机数（包含0不包括1）
- ceil：向上取整
- floor：向下取整
- max：找最大数
- min：找最小数
- pow：幂运算
- abs：绝对值

DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
head><body><script>// 属性console.log(Math.PI)// 方法// ceil 天花板  向上取整console.log(Math.ceil(1.1)) // 2 console.log(Math.ceil(1.5)) // 2 console.log(Math.ceil(1.9)) // 2 // floor 地板  向下取整console.log(Math.floor(1.1))  // 1console.log(Math.floor(1.5))  // 1console.log(Math.floor(1.9))  // 1console.log(Math.floor('12px'))  // 1console.log('----------------')// 四舍五入 roundconsole.log(Math.round(1.1))  // 1console.log(Math.round(1.49))  // 1console.log(Math.round(1.5))  // 2console.log(Math.round(1.9))  // 2console.log(Math.round(-1.1))  // -1 console.log(Math.round(-1.5))  // -1console.log(Math.round(-1.51))  // -2// 取整函数 parseInt(1.2)   // 1// 取整函数 parseInt('12px')   // 12console.log(Math.max(1, 2, 3, 4, 5))console.log(Math.min(1, 2, 3, 4, 5))console.log(Math.abs(-1));// null  类似 let obj = {}let obj = null script>
body>html>

2. 生成任意范围随机数

如何生成N-M之间的随机数
- Math.floor(Math.random() * (M - N + 1)) + N

DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
head><body><script>// 左闭右开 能取到 0 但是取不到 1 中间的一个随机小数// console.log(Math.random())// 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])// 取到 N ~ M 的随机整数function getRandom(N, M) {return Math.floor(Math.random() * (M - N + 1)) + N}console.log(getRandom(4, 8))script>
body>html>

3. 案例：随机点名

需求：请把 [‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中
分析：
①：利用随机函数随机生成一个数字作为索引号
②：数组[随机数] 生成到页面中
③：数组中删除刚才抽中的索引号

DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
head><body><script>let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']// 1. 得到一个随机数， 作为数组的索引号， 这个随机数 0~6let random = Math.floor(Math.random() * arr.length)// 2. 页面输出数组里面的元素 document.write(arr[random])// 3. splice(起始位置(下标), 删除几个元素)arr.splice(random, 1)console.log(arr)script>
body>html>

4. 案例：猜数字游戏

需求：程序随机生成 1~10 之间的一个数字，用户输入一个数字
①：如果大于该数字，就提示，数字猜大了，继续猜
②：如果小于该数字，就提示，数字猜小了，继续猜
③：如果猜对了，就提示猜对了，程序结束
分析：
①：利用随机数生成一个数字
②：需要一直猜，所以需要不断的循环
③：因为条件是结果猜对了，就是判断条件退出，用while循环合适
④：内部判断可以用多分支语句

DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
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>html>

DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
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 = falsealert('猜对了，真厉害')break}}// 写到for的外面来if (flag) {alert('次数已经用完')}script>
body>html>

5. 生成随机颜色

需求：该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式。
①：如果参数传递的是true或者无参数，则输出一个随机十六进制的颜色
②：如果参数传递的是false，则输出一个随机rgb的颜色
③：格式： function getRandomColor(flag){ }
console.log(getRandomColor(true)) //#ffffff
console.log(getRandomColor(false)) //rgb(255,255,255)
分析：
提示：16进制颜色格式为: ‘#ffffff’ 其中f可以是任意 0-f之间的字符
提示：rgb颜色格式为: ‘rgb(255,255,255) ’ 其中255可以是任意0-255之间的数字
步骤：
①：如果参数为true或者无参数，则处理16进制颜色，核心思想是循环6次，生成随机的6个数字（取值范围0-15），根据这个数字去找数组的值，然后和 # 拼接起来，并且返回值。
②：如果参数为false，随机生成一个0~255的数给三个变量，分别作为 r g b 三个颜色，之后拼接字符串rgb(255,255,255)格式

DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>div {width: 300px;height: 300px;}style>
head><body><script>// 1. 自定义一个随机颜色函数function getRandomColor(flag = true) {if (flag) {// 3. 如果是true 则返回 #fffffflet 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)  // 55let g = Math.floor(Math.random() * 256)  // 89let b = Math.floor(Math.random() * 256)  // 255return `rgb(${r},${g},${b})`}}// 2. 调用函数 getRandomColor(布尔值)console.log(getRandomColor(false))console.log(getRandomColor(true))console.log(getRandomColor())// let str = '#'// str = str + 'f'script>
body>html>

五、拓展

1. 基本数据类型和引用数据类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型 string ，number，boolean，undefined，null
引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

2. 堆栈空间分配区别

2.1 栈（操作系统）

由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；
简单数据类型存放到栈里面

2.2 堆（操作系统）

存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
引用数据类型存放到堆里面
在这里插入图片描述

3. 简单类型的内存分配

值类型（简单数据类型）： string ，number，boolean，undefined，null
值类型变量的数据直接存放在变量（栈空间）中

在这里插入图片描述

4. 复杂类型的内存分配

引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

在这里插入图片描述

第十六章综合案例：学成在线页面渲染

需求：根据数据渲染列表页面

DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>学成在线首页title><link rel="stylesheet" href="./css/style.css"><style>style>
head><body><div class="box w"><div class="box-hd"><h3>精品推荐h3><a href="#">查看全部a>div><div class="box-bd"><ul class="clearfix"><script>let data = [{src: 'images/course01.png',title: 'Think PHP 5.0 博客系统实战项目演练',num: 1125},{src: 'images/course02.png',title: 'Android 网络动态图片加载实战',num: 357},{src: 'images/course03.png',title: 'Angular2大前端商城实战项目演练',num: 22250},{src: 'images/course04.png',title: 'AndroidAPP实战项目演练',num: 389},{src: 'images/course05.png',title: 'UGUI源码深度分析案例',num: 124},{src: 'images/course06.png',title: 'Kami2首页界面切换效果实战演练',num: 432},{src: 'images/course07.png',title: 'UNITY 从入门到精通实战案例',num: 888},{src: 'images/course08.png',title: 'Cocos 深度学习你不会错过的实战',num: 590},{src: 'images/course04.png',title: '自动添加的模块',num: 1000}]for (let i = 0; i < data.length; i++) {document.write(`${data[i].src} title="${data[i].title}">${data[i].title}
高级 • ${data[i].num}人在学习`)}script>ul>div>div>body>html>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！

标签：技术

Duilib中list控件支持ctrl和shif多行选中的实现

[ICML2015]Batch Normalization:Accelerating Deep Network Training by Reducing Internal Covariate Shif

win10系统微软输入法于eclipse ctrl+shif+f冲突间接处理办法

Codeforces Round #259 (Div. 2) B. Little Pony and Sort by Shif

读LDD3，内存映射与DMA--PAGE_SHIF…

VMware虚拟机安装XP【要先分区，再设置BOOT 启动CD，shif+上移】

更换iBus五笔的左与右Shif

sublime ctrl+shif+f 没用解决办法

idea 对 ctrl + z 的撤销是 ctrl + shif + z

计算机最早的设计师应用于,计算机应用基础选择题doc.doc

win10自带截图神器：Win+Shift+S

Python基础之文件目录操作

python简述目录_Python基础之文件目录操作(示例代码)

tp5 如何做数据采集

任务2-7(服务器字体+阿里巴巴矢量库)

html标签（1)：h1~h6,p,br,pre,hr

TI 电量计介绍与芯片选型指南

几款TI电源芯片简介

TI DSP芯片C2000系列读取FLASH数据

德州仪器(Ti)平台嵌入式开发基础

TI三相电机智能栅极驱动芯片特点分类

省选模拟（12.08） T3 圈圈圈圈圈圈圈圈

Hadoop生态圈技术栈（上）

大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之6.Impala交互式查询

小猿圈之Linux下Mysql 操作命令

大数据Hadoop生态圈常用面试题

大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之4.Hive DDL、DQL和数据操作

备战Noip2018模拟赛11（B组）T3 Monogatari 物语

【智能优化算法-圆圈搜索算法】基于圆圈搜索算法Circle Search Algorithm求解单目标优化问题附matlab代码

NYOJ 78 圈水池

递归问题跑道汽车绕圈问题 Python实现

Hadoop生态圈（三）：MapReduce