前端学习笔记-JS篇-05

MarisolHu

于 2024-08-21 13:19:26 发布

阅读量463

点赞数 13

分类专栏：前端学习文章标签：前端学习笔记

本文链接：https://blog.csdn.net/Yvonne_hjj/article/details/141389113

版权

前端学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

对象

什么是对象

对象（object）：JavaScript里的一种数据类型，可以理解为是一种无序的数据集合，注意数组是有序的数据集合，用来描述某个事物

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

比如描述班主任信息：静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示；动态行为 (点名, 唱, 跳, rap) => 使用函数表示。

1. 对象是什么？

对象是一种数据类型；无序的数据的集合

2. 对象有什么特点？

无序的数据的集合；可以详细的描述描述某个事物

对象使用

对象声明语法：let 对象名 = {} let 对象名 = new object（）

例如：

let person = {}

实际开发中，很多使用的都是花括号{}，{}是对象字面量

对象有属性和方法组成

属性：信息或叫特征（名词）。比如手机尺寸、颜色、重量等…

方法：功能或叫行为（动词）。比如手机打电话、发短信、玩游戏...

let 对象名 = {
    属性名：属性值，
    方法名：函数
}

属性

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

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

let obj = {
    uname :'pink老师,
    age: 18，
    gender:'女’
}

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

	解释	使用方式
查	查询对象	对象.属性
改	重新赋值	对象.属性=值
增	对象添加新的数据	对象名.新属性名 = 新值
删	删除对象中属性	delete 对象名.属性名

查

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

语法：对象名.属性【简单理解就是获得对象里面的属性值】

let person ={
    uname:'pink老师'，
    age: 18，
    gender:'女'
}
console.log(person.uname)
console.log(person.age)
console.log(person.gender)

查的另外一种写法

对于多词属性或则 - 等属性，点操作就不能用了。

可以采取：对象[‘属性’] 方式，单引号和双引号都阔以

1.对象[‘属性’] 方式，单引号和双引号都阔以

2.也可以用于其他正常属性，比如：

let person ={
    user-name':'pink老师'，
    age: 18,
    gender:'女'，
}
console.log(person['user-name'])//pink老师
console.log(person['age'])// 18

3.[]语法里面的值如果不添加引号默认会当成变量解析

总结： 没有必要的时候直接使用点语法, 在需要解析变量的时候使用 [] 语法

改

语法：对象名.属性 = 新值

let person ={
    uname:'pink老师'，
    age: 18，
    gender:'女'
}
person.gender = '男'
console.log(person.gender)//修改性别为男
console.log(person)

增

语法：对象名.新属性 = 新值

let person ={
    uname:'pink老师'，
    age: 18，
    gender:'女'
}
person.address = '中国北京'
console.log(person)

删

语法：delete 对象名.属性

let person ={
    uname:'pink老师'，
    age: 18，
    gender:'女'
}
delete person.gender//删除性别属性
console.log(person)

改和增语法一样，判断标准就是对象有没有这个属性，没有就是新增，有就是改

对象中的方法

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

let person = {
    name :'andy',
    sayHi: function(){
        document.write('hi~~')
    }
}

1. 方法是由方法名和函数两部分构成，它们之间使用 : 分隔

2. 多个属性之间使用英文 , 分隔

3. 方法是依附在对象中的函数

4. 方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

对象中的方法

声明对象，并添加了若干方法后，可以使用 . 调用对象中函数，称之为方法调用。也可以添加形参和实参。

1. 对象访问方法是如何实现的？

对象.方法()
person.sayHi()

2. 对象方法可以传递参数吗？

可以，跟函数使用方法基本一致

遍历对象

for 遍历对象的问题：

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

一般不用这种方式遍历数组、主要是用来遍历对象
for in语法中的 k 是一个变量, 在循环的过程中依次代表对象的属性名
由于 k 是变量, 所以必须使用 [ ] 语法解析
一定记住： k 是获得对象的属性名， 对象名[k] 是获得属性值

1. 遍历对象用那个语句？

for in

2. 遍历对象中, for k in obj,获得对象属性是那个，获得值是那个？

获得对象属性是 k
获得对象值是 obj[k]

案例

需求：请把下面数据中的对象打印出来：

// 定义一个存储了若干学生信息的数组

let students = [

{name: '小明', age: 18, gender: '男', hometown: '河北省'},

{name: '小红', age: 19, gender: '女', hometown: '河南省'},

{name: '小刚', age: 17, gender: '男', hometown: '山西省'},

{name: '小丽', age: 18, gender: '女', hometown: '山东省'}

]

需求：根据以上数据渲染生成表格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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写到这里 -->
        <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(`
                <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内部提供的对象，包含各种属性和方法给开发者调用

Math

介绍：Math对象是JavaScript提供的一个“数学”对象

作用：提供了一系列做数学运算的方法

Math对象包含的方法有：

random：生成0-1之间的随机数（包含0不包括1）Math.random() - JavaScript | MDN (mozilla.org)

如何生成0-10的随机数呢？ Math.floor(Math.random() * (10 + 1))

如何生成5-10的随机数？ Math.floor(Math.random() * (5 + 1)) + 5

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

随机点名案例

需求：请把 [‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中，但是不允许重复显示

分析： ①：利用随机函数随机生成一个数字作为索引号 ②：数组[随机数] 生成到页面中 ③：数组中删除刚才抽中的索引号

<body>
  <script>
    let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
    // 1. 得到一个随机数， 作为数组的索引号， 这个随机数 0~6
    let random = Math.floor(Math.random() * arr.length)
    // 2. 页面输出数组里面的元素 
    document.write(arr[random])
    // 3. splice(起始位置(下标), 删除几个元素)
    arr.splice(random, 1)
    console.log(arr)
  </script>
</body>

猜数字游戏

需求：程序随机生成 1~10 之间的一个数字，用户输入一个数字

①：如果大于该数字，就提示，数字猜大了，继续猜
②：如果小于该数字，就提示，数字猜小了，继续猜
③：如果猜对了，就提示猜对了，程序结束

<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>

ceil：向上取整
floor：向下取整
round:四舍五入
max：找最大数
min：找最小数
pow：幂运算
abs：绝对值Math.abs() - JavaScript | MDN (mozilla.org)

Math - JavaScript | MDN (mozilla.org)

拓展

术语解释

术语	解释	举例
关键字	在JavaScript中有特殊意义的词汇	let、var、function、if、else、 switch、case、break
保留字	在目前的JavaScript中没意义，但未来可能会具有特殊意义的词汇	int、short、long、char
标识（标识符）	变量名、函数名的另一种叫法	无
表达式	能产生值的代码，一般配合运算符出现	10 + 3、age >= 18
语句	一段可执行的代码	If () for(）

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

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

值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型 string ，number，boolean，undefined，null

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

堆栈空间分配区别：

1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；

简单数据类型存放到栈里面

2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

引用数据类型存放到堆里面

1. 简单类型的内存分配

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

2.复杂类型的内存分配

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

MarisolHu

关注

13
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记-JS篇-05

对象（object）：JavaScript里的一种数据类型，可以理解为是一种无序的数据集合，注意数组是有序的数据集合，用来描述某个事物例如描述一个人：人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能；如果用多个变量保存则比较散，用对象比较统一。比如描述班主任信息：静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示；动态行为 (点名, 唱, 跳, rap) => 使用函数表示。1. 对象是什么？对象是一种数据类型；无序的数据的集合2. 对象有
复制链接

扫一扫