JavaScript入门——（6）对象

再快一步`

已于 2023-10-11 19:23:46 修改

阅读量651

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2023-10-10 20:46:26 首次发布

本文链接：https://blog.csdn.net/weixin_48719464/article/details/133744511

版权

JavaScript 专栏收录该内容

32 篇文章 4 订阅

订阅专栏

1、什么是对象

对象（object）：JavaScript里的一种数据类型

可以理解为是一种无序的数据集合，注意数组是有序的数据集合

用来详细的描述某个事物，例如描述一个人

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

比如描述班主任信息：

静态特征（姓名、年龄、身高、性别、爱好）=>可以使用数字，字符串，数组，布尔类型等表示
动态行为（点名，唱，跳，rap）=> 使用函数表示

2、对象使用

2.1 对象声明语法

let 对象名 = {}

let 对象名 = new Object()

2.2 对象有属性和方法组成

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

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

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

2.3 属性

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

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

    <script>
        // 1.声明对象
        let teacher = {
            uname : '小黄老师',
            age : 18,
            gender : '女'
        }
        console.log(school);
    </script>

练习：请声明一个产品对象，里面包如下信息：

要求：

商品对象名字：goods

商品名称命名为：name

商品编号：num

商品毛重：weight

商品产地：address

    <script>
        let obj = {
            name : '小米10青春版',
            num : '100012816024',
            weight : '0.55kg',
            address : '中国大陆'
        }
    </script>

2.4 对象使用

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

2.4.1 属性 - 查

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

语法：对象名.属性

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

    <script>
        // 1. 声明
        let obj = {
            name : '小米10青春版',
            num : '100012816024',
            weight : '0.55kg',
            address : '中国大陆'
        }
        // 2. 使用属性 查 对象名.属性名
        console.log(obj.address);
        console.log(obj.name);
    </script>

2.4.2 属性-改

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

    <script>
        // 1.声明对象
        let teacher = {
            uname : '小黄老师',
            age : 18,
            gender : '女'
        }
        // 把性别女改为男
        teacher.gender = '男'
        console.log(teacher);
    </script>

2.4.3 属性-增

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

    <script>
        // 1.声明对象
        let teacher = {
            uname : '小黄老师',
            age : 18,
            gender : '女'
        }
        // 2.增加一个属性
        teacher.hobby = '排球'
        console.log(teacher)
    </script>

2.4.4 属性-删（了解）

语法：delete 对象名.属性

    <script>
        // 1.声明对象
        let teacher = {
            uname : '小黄老师',
            age : 18,
            gender : '女'
        }
        // 2.删除属性
        delete teacher.age
        console.log(teacher);
    </script>

2.4.5 练习

要求：

请将商品名称里面的值修改为：小米 10 PLUS
新增一个属性颜色 color 为‘粉色’
请以此页面打印输出所有的属性值

使用2.3属性里面的练习来修改

    <script>
        // 1. 声明
        let obj = {
            uname : '小米10青春版',
            num : '100012816024',
            weight : '0.55kg',
            address : '中国大陆'
        }
        // 商品名称修改
       obj.uname = '小米10PLUS'
       // 新增一个颜色属性
       obj.color = 'green'
       // 打印输出所有的属性值
       console.log(obj.uname);
       console.log(obj.num);
       console.log(obj.weight);
       console.log(obj.address);
       console.log(obj.color);
    </script>

2.4.6 属性-查的另外一种写法

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

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

    <script>
        // 1. 声明
        let obj = {
            'good - name' : '小米10青春版',
            num : '100012816024',
            weight : '0.55kg',
            address : '中国大陆'
        }
        // 查的另外一种属性
        // 对象名['属性名']
        console.log(obj['good - name']);
    </script>

2.5 对象中的方法

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

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

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

    <script>
        let obj = {
            unmae : '刘德华',
            // 方法
            song: function (x,y) {
          
                console.log(x + y);
            }
        }
        // 方法调用 对象名.方法名
        obj.song(1,2)

        // document.write()
    </script>

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

也可以添加形参和实参
let person = {
    name : 'andy',
    sayHi : function (){
        document.write('hi~~')
    }
}
// 对象名.方法名()
person.sayHi()
注意：千万别忘了给方法名后面加小括号

练习：给对象增加唱歌和跳舞的方法，并打印输出

    <script>
        let obj = {
            uname : '小明老师',
            // 方法一
            sing : function(){
                document.write('起床歌')
            },
            // 方法二
            dance : function(){
                document.write('天鹅湖')
            }
        }
        console.log(obj.dance);
        console.log(obj.sing);
    </script>

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

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

3、遍历对象

for遍历对象的问题：

对象没有像数组一样的length属性。所有无法确定长度

对象里面是无序的键值对，没有规律。不像数组里面有规律的下标

注意：for in不提倡遍历数组，因为k是字符串

    <script> 
      // 1.遍历对象 for in
        let obj = {
            uname : '小明老师',
            age : 18,
            gender : '男'
        }
        // 2.遍历对象
        for (let k in obj){
            // console.log(k); // 属性名  'uname' 'age' 'gender'
            // console.log(obj.uname);  // 小明老师
            // console.log(obj.k); // undefined
            // console.log(obj.'uname') //undefined
            // console.log(obj['uname']) // uname   'uname' === k
            console.log(obj[k])  // 输出属性值 obj[k]
        }
    </script>

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

3.1 遍历数组对象

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

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

let students = [
{ name: '小明', age: 18, gender: '男', hometown: '河北省' },
{ name: '小红', age: 19, gender: '女', hometown: '河南省' },
{ name: '小刚', age: 17, gender: '男', hometown: '山西省' },
{ name: '小丽', age: 18, gender: '女', hometown: '山东省' }
]

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

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

<!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: '山东省' }
            ]
            //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>

4、内置对象

4.1 内置对象是什么

JavaScript内部提供的对象，包含各种属性和方法给开发者调用

例如：document.write()、console.log()

4.2 内置对象Math

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

属性

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

Math对象包含的方法有：

Math.PI：获取圆周率 console.log(Math.PI)
random：生成0-1之间的随机数（包含0不包括1）
ceil：向上取整
floor：向下取整
max：找最大数
min：找最小数
pow：幂运算 Math.pow(4,2) // 求 4 的 2 次方
abs：绝对值
sqrt：平方根 Math.sqrt(16)
Math - JavaScript | MDN (mozilla.org)

    <script>
        console.log(Maht.PI);
        // ceil 向上取整  舍弃小数部分，整数部分加1
        console.log(Math.ceil(1.1)) // 2
        console.log(Math.ceil(1.5)) // 2
        // floor 地板 向下取整 舍弃小数部分，整数部分不变
        console.log(Math.floor(1.1)) // 1
        console.log(Math.floor(1.5)) // 1
        // 四舍五入原则 round
        console.log(Math.round(1.1));// 1
        console.log(Math.round(1.5));// 2
        console.log(Math.round(-1.1));// -1
        console.log(Math.round(-1.5));// -1
        console.log(Math.round(-1.51));// -2

        // 取整函数parseInt(1.2) // 1
        // 取整函数 parseInt('12px') // 12

        console.log(Math.max(1,2,3,4))  // 4
        console.log(Math.min(1,2,3,4))  // 1
        console.log(Math.abs(-1))  // 1
    </script>

4.3生成任意范围随机数

Math.random()随机数函数，返回0-1之间，并且包括0不包括1的随机小数[0,1)

如何生成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

4.4 随机点名案例

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

分析：

①：利用随机函数随机生成一个数字作为索引号

②：数组[随机数]生成到页面中

③：数组中删除刚才抽中的索引号

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

4.5 猜数字案例

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

分析：

①：如果大于该数字，就提示，数字猜大了，继续猜

②：如果小于该数字，就提示，数字猜小了，继续猜

③：如果猜对了，就提示猜对了，程序结束

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
    <script>
        // 1.随机生成一个数字1-10
        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 name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.随机生成一个数字1-10
        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
            }
        }
        if(flag){
                alert('次数已经用完')
            }
    </script>
</body>
</html>

4.6 生成随机颜色

需求：该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式。

分析：

提示：16进制颜色格式为：‘#ffffff'其中f可以是任意0-f之间的字符，需要用到数组，

let arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']

提示：rgb颜色格式为：’rgb(255,255,255)‘其中255可以是任意0-255之间的数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <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())

    </script>
    
</body>
</html>

5、学成在线页面数据渲染列表页面

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

分析：根据数据来渲染页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <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: 'Android APP 实战项目演练',
                            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
                        },
                    ]

                    for(let i = 0;i <= data.length; i++){
                        document.write(`
                        <li>
                            <a href="#">
                                <img src=${data[i].src} title="${data[i].title}">
                                <h4>
                                    ${data[i].title} 
                                </h4>
                                <div class="info">
                                    <span>高级</span> • <span>${data[i].num} </span>人在学习
                                </div>
                            </a>
                        </li>
                        `)
                    }
                </script>
            </ul>
        </div>    
    </div>
</body>
</html>

6、拓展

6.1 术语解释

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

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

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

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

堆栈空间分配区别：

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

2、堆（操作系统）：存储复杂类型（对象），一般由程序员分配释放，由垃圾回收机制回收。引用数据类型存放到堆里面

6.2.1 简单类型的内存分配

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

6.2.2 复杂类型的内存分配

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

    <script>
        let num1 = 10
        let num2 = num1
        num2 = 20
        console.log(num1) // 结果是？   10


        let obj1 = {
            age : 18
        }
        let obj2 = obj1
        // 修改属性
        obj2.age = 20
        console.log(obj1.age);  // 20
    </script>