Web前端系列技术之JavaScript基础（从入门开始）⑤

JavaScript基础学习五

前面四个章节主要学习了JS脚本语言的基本 循环结构 、语法结构 和 语句 ，也包括能让程序代码具有 “ 思考能力 ” 的流量控制，同时还有在很大程度上可以提高代码复用性的 函数 ；在这个前端项目开发学习过程中，JS的学习也逐渐开始充实，慢慢的或许就有了自己的体悟；那么在学习了前面内容的基础之上，今天所要解决的问题就是：如何使用对象数组数据渲染页面？

什么是数据渲染页面？为什么要数据渲染页面？

数据渲染页面 ：顾名思义是重在 数据渲染 之上，那什么是数据渲染？

简单理解：在前端项目的开发过程中，常常会把 HTML 中所要显示的数据通过 JS 来实现，进而直接替代了在 HTML 中输入数据的操作，这整个过程就叫数据渲染；

意义：提高了 代码的灵活性 和项目的 可维护性；

那么和数据渲染有关的 对象 就是今天主要学习的目标：
一、对象概念
二、对象使用
三、操作对象
四、遍历对象
五、内置对象

---

---

一、对象概念

什么是对象？🐶是恋爱的对象嘛？

哈哈哈，当然不是，此对象非彼对象啦，这里所谓的 对象 ，其实就是包含 相关属性 和 方法 的集合体，是一种无序的数据集合，也是一种数据类型，同数组、函数一样都属于 引用数据类型 ；

在JavaScript中，支持3种对象，分别是：内置对象，浏览器对象 和 自定义对象；

注意：对象 虽同 数组 一样，都属于引用数据类型，但是数组是有序的，对象是无序的；

作用：可以详细的描述描述某个事物，这也是对象的目的，例如描述一个人

1. 人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能；
2. 如果用多个变量保存则比较散，用对象就比较统一；

信息构成主要分为：静态特征 和 动态行为

1. 静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示；
2. 动态行为 (动作行为) => 使用函数表示；

---

二、对象使用

这里有一次需要强调，之所以使用对象，目的就是为了详细的描述描述某个事物；

基本语法结构：

let 对象名 = {}
1

1. 对象的组成

① 属性：信息或叫特征（名词）。 比如 手机尺寸、颜色、重量等…
② 方法：功能或叫行为（动词）。 比如 手机打电话、发短信、玩游戏…

语法结构：

let 对象名 = {
    属性名: 属性值,
    方法名: 函数
}
1
2
3
4

⭐注意：在对象中，用到的函数都是属于匿名函数

2. 对象的属性

数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的，都属于局部变量，只能在对象内使用；

代码样例：

let xiaochai = {
    usename: '小柴',
    age: 23,
    sex: '男'
}
1
2
3
4
5

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

⭐注意：对象里面的属性名是可以加引号，也可以不加的，但是在json文件中是一定要加的

3. 属性访问

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

简单理解：就是获得对象里面的属性值

方式一：

let xiaochai = {
    usename: '小柴',
    age: 23,
    sex: '男'
}
console.log(xioachai.usename)
console.log(xioachai.sex)
1
2
3
4
5
6
7

方式二：

let xiaochai = {
    usename: '小柴',
    age: 23,
    sex: '男'
}
console.log(xioachai['username'])
console.log(xioachai['sex'])
1
2
3
4
5
6
7

注意：这两种不同的方式，在面对不同的使用场景是会用到不同写法的

4. 对象的方法

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

代码样例：

let xiaochai = {
    usename: '小柴',
    //匿名函数
    sayHi: function() {
        document.write('hi~~~')
    }
}
1
2
3
4
5
6
7

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

5. 方法访问

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

代码样例：

let xiaochai = {
    usename: '小柴',
    //匿名函数
    sayHi: function() {
        document.write('hi~~~')
    }
}
//对象名.方法名()
xiaochai.sayHi()
1
2
3
4
5
6
7
8
9

⭐注意： 千万别忘了给方法名后面加小括号，对象方法可以传递参数，且和函数的使用方法基本一致

---

三、操作对象

对象本质是 无序 的数据集合, 操作数据无非就是 增、删、改 、查 语法；

❤️对象的 增 、删 、改 、查 对于项目的开发来说，是极为重要的❤️

1. 增

所谓的 增操作 ：就是可以动态为对象添加属性或方法，动态添加与直接定义是一样的，只是语法上更灵活；

1.1 增属性

基本语法结构：

//对象名.新属性名 = 新值
let xiaochai = {
    usename: '小柴',、
    age: 23,
}
xiaochai.sex = '男'
xiaochai.hobby = 'java'
1
2
3
4
5
6
7

原理：在新增属性方面，首先会去对象里面找是否有 新增属性 的这个属；如果有则更新值修改，相当于重新赋值；如果没有则新增这个属性；所以 JS 是可以非常方便的动态新增属性；

1.2 增方法

基本语法结构：

xiaochai.like = function () {
    document.write('写编程')
}
1
2
3

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

2. 删

所谓的 删操作 ：就是可以动态删除对象中已有的属性或方法；

基础语法结构：

//delete 对象名.属性名 or 方法名
let xiaochai = {
    usename: '小柴',、
    age: 23,
    like: function () {
        console.log('写编程')
    }  
} 
delete xiaochai.age
delete xiaochai.like
1
2
3
4
5
6
7
8
9
10

3. 改

所谓的 改操作 ：就是可以动态修改对象中已有的属性或方法，实际上就是重新赋值；

基础语法结构：

let xiaochai = {
    usename: '小柴',、
    age: 23,
    like: function () {
        console.log('写编程')
    }   
} 
//对象.属性 = 值
xiaochai.age = 18
//对象.方法 = function() {}
xaiochai.like = function() {
    console.log(13+14)
}
1
2
3
4
5
6
7
8
9
10
11
12
13

4. 查

所谓的 查操作 ：就是可以查找对象中已有的属性或方法的值，也可称为查询对象，主要分为两类：一类是查询某个属性或方法、还有一类是查询整个对象的所有内容；

4.1 查询属性/方法

基础代码结构：

let xiaochai = {
    usename: '小柴',、
    age: 23,
    like: function () {
        console.log('写编程')
    }   
} 
//查询属性：对象.属性 或者 对象[‘属性’]
console.log(xiaochai.age)
//查询方法：对象.方法()
console.log(xiaochai.like())
1
2
3
4
5
6
7
8
9
10
11

注意：这种查询方法是只能查询某个属性值或者方法

4.2 查询对象

在查询对象的结果时，可以采用 console.log(obj) 或者 console.dir(obj) ，但是二者的输出结果有很大区别，如图所示：

代码样例：

let xiaochai = {
    name: 'xiaochai',
    age: 23,
    sex: '男',
    like: function () {
        console.log('写编程')
    }
}
xiaochai.like()
console.log(xiaochai)
console.dir(xiaochai)
1
2
3
4
5
6
7
8
9
10
11

主要区别：
1、console.log() :
其一、主要表示：向 Web 控制台输出一条消息;
其二、而具体是什么信息就以传递的实参为准，然后就是在控制台就能显示自己传递参数的结果；


2、console.dir(object):
其一、主要表示：在控制台中显示指定 JavaScript 对象的属性，并通过类似文件树样式的交互列表显示;
其二、一般是：打印出该对象(object)的所有属性和属性值;
其三、该方法对于输出 DOM 对象 非常有用，因为会显示 DOM 对象 的所有属性 (特别是：输出节点属性和属性值时最好用);
其四、注意：该特性是非标准的，请尽量不要在生产环境中使用它（还是使用 console.log() 比较好）

---

四、遍历对象

之前有学习到遍历数组，那时可以根据数组的长度 length，定义与数组下标值相同的 i，经过 for循环 遍历，但是对于对象而言：
① 没有像数组一样的length属性，所以无法确定长度；
② 里面是无序的键值对，没有规律，不像数组里面存在有规律的下标；

那么，对象该如何被遍历呢?

基本结构语法：

let xiaochai = {
    name: 'xiaochai',
    age: 23,
    sex: '男',
    like: function () {
        console.log('写编程')
    }
}
//遍历对象
for (let k in xiaochai){
    console.log(k)//打印属性名
    console.log(xiaochai[k])//打印属性值
}
1
2
3
4
5
6
7
8
9
10
11
12
13

⭐注意：
① 常用变量名为 k 或者 key 、 value 使用，会更专业一些
② 如果用 xiaochai.k 是会报错的，因为 xiaochai.k 意思是 xiaochai 里面的 k 属性；同理，xiaochai.['k']也会报错，因为k是变量，变量加上引号就又代表了属性名；所以只能使用 xiaochai[k] 且使用场景只能是对象遍历；


③ 一定记住： k 是获得对象的属性名， 对象名[k] 是获得 属性值

场景使用：遍历数组对象，生成表格

JS样例代码：

// 定义一个存储了若干学生信息的数组
let students = [
   { name: '小明', age: 18, gender: '男', hometown: '河北省' },
   { name: '小红', age: 19, gender: '女', hometown: '河南省' },
   { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
   { name: '小丽', age: 18, gender: '女', hometown: '山东省' },
   { name: '小强', age: 18, gender: '男', hometown: '山东省' }
]
// 第一步 打印表格的头部和尾部
document.write(`
   `)// 中间遍历行数  原则就是有几条数据，我就遍历几次for(let i =0; i < students.length; i++){
   document.write(`
      `)}// 尾部
document.write(`
   

      
学生列表
      

          
序号
          
姓名
          
年龄
          
性别
          
家乡
     


   

          
${i + 1}
          
${students[i].name}
          
${students[i].age}
          
${students[i].gender}
          
${students[i].hometown}
     
   


`)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

效果样式：

---

五、内置对象

官方概念：JavaScript内置对象主要指的是在程序执行前存在全局作用域里的由JS定义的一些全局值属性、函数和用来实例化其他对象的构造函数对象；

简单理解：JavaScript内部提供的对象，包含各种属性和方法给开发者调用，例如一直在用的document.write() 和 console.log() ， 都是属于内置对象

那么在JS中包含了很多内置对象，但是在项目开发的过程里，用到最常用的就是 内置对象Math ；

1. 内置对象Math

Math对象是JavaScript提供的一个“数学高手”对象，它提供了一系列做数学运算的方法；

常用的方法有：
① random：生成0-1之间的随机数（包含0不包括1）
②ceil：向上取整
③ floor：向下取整
④ max：找最大数
⑤ min：找最小数
⑥ pow：幂运算
⑦ abs：绝对值

当然还有很多，可以点击Math对象在线文档进行查看；

2. 生成任意范围的随机数

生成随机数用到的是：random方法，但是random原生方法是只能生成 0-1 之间的随机数（包含0不包括1），所以这里就需要改造了：

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

⭐注意：
为了方便使用，在项目开发的过程中，常将其封装成函数，进行随调随用，如下所示：
function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min }

---

六、拓展

对于拓展的知识；分为两点：

1. script的写法（拓展）

script是可以放到标签里面的，只要简单的代码就可以，如样例所示：

<div class="box">
    <script>
        document.write(`你好`)
    script>
div>
1
2
3
4
5

2. 术语解释

3. 数据类型

数据类型，主要分为 基本数据类型 和 引用数据类型 ，其中基本数据类型也叫做简单类型，同时又可以叫做 值类型 ，引用数据类型叫做复杂类型，同时也可以叫做 引用类型 ；

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

4. 数据类型与堆/栈

堆栈空间分配区别：
1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；简单数据类型存放到栈里面
2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收；引用数据类型存放到堆里面

4.1 简单类型的内存分配

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

4.2 复杂类型的内存分配

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

过程：地址是存在栈里面，对象内容是存在堆中，调用的时候，是通过找栈里面的地址，再找到堆中的对象；

⭐注意：因为栈只能存储比较简单一些的数据，而堆里面可以存比较复杂的数据；

---

总结

今天又是继续学习JS的一天，内容不多，但练习极为重要，今天所总结出来的所有知识，希望对大家有用，同时也希望这篇文章可以有一个好的展现量和得到更多人的支持，谢谢每一位浏览文章的人，要相信小柴码文，必是好文，欢迎各位 点赞+收藏+关注 啦! ! !

---

以上就是所要介绍的JavaScript基础学习的第五节内容，后续即将更新移动Web的学习目标。感谢关注和支持，让我们一起成长！

有兴趣可回顾一下Java系列技术之JavaScript基础（从入门开始）②的文章内容，再结合之前所介绍的CSS基础学习以及HTML基础学习，大脑里的内容会更加丰富而充实的，毕竟综合性复习和学习是更会加深印象的哟！！！