对象

1.对象的基本认识

什么是对象

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

对象的组成

对象包含属性跟方法（函数）

2.对象的使用

1.声明对象语法

1648870655462

1648870669396

代码展示

    <script>
        let person = {}
    </script>

2.对象的组成

对象由属性跟方法组成

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

代码展示

    <script>
        let num = {
            uname: '艺人',
            age: 30,
            sex: '男',
            hobby: function (msg) {
                document.write('演戏<br/>')
                document.write('唱歌<br/>')
                return '长不大的小屁孩'
            }
        }
        document.write(num.hobby())
    </script>

属性

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

1648870883779

代码展示

    <script>
        // 创建商品的对象并使用
        let good = {
            goods: '笔记本',
            price: 6999,
            number: 20
        }

        // 输出函数的属性
        document.write(good.goods)
        document.write(good['number'])
        // console.log(typeof good.price);

    </script>

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

3.属性访问（2种方式）

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

对象名.属性名
对象名[‘属性名’] —— 注意要加引号

1648871139875

1648871160822

代码展示

    <script>
        // 创建商品的对象并使用
        let good = {
            goods: '笔记本',
            price: 6999,
            number: 20
        }

        // 输出函数的属性
        document.write(good.goods)
        document.write(good['number'])
    </script>

对象（object）：JavaScript里的一种数据类型
可以理解为是一种无序的数据集合
用来描述某个事物，例如描述一个人
- 人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能
- 如果用多个变量保存则比较散，用对象比较统一

4.对象中的方法

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

1648899861265

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

方法访问

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

1648899925410

注意：千万别忘了给方法名后面加小括号

3.操作对象

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

查询对象
- 对象.属性或者对象[‘属性’]
- 对象.方法()
重新赋值
- 对象.属性 = 值
- 对象.方法 = function() {}
对象添加新的数据
- 对象名.新属性名 = 新值
删除对象中属性
- delete 对象名.属性名

1.增加属性

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

1648900072628

代码展示

    <script>
        let person = {}
        person.username = '阿良';
        person.age = 18;
        person.age = 17;
        console.log(person);

    </script>

1648944905513

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

4.遍历对象for in

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

1648945030099

一般不用这种方式遍历数组、主要是用来遍历对象
一定记住： k 是获得对象的属性名，对象名[k] 是获得属性值

代码展示

    <script>
        let num = {
            uname: '阿良',
            age: 18,
            sex: '男'
        }
        // 遍历对象  for in
        for (let k in num) {
            console.log(k); //输出属性名
            console.log(num[k]); //输出值
        }
    </script>

案例

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

// 定义一个存储了若干学生信息的数组 let students = [ {name: '小明', age: 18, gender: '男', hometown: '河北省'}, {name: '小红', age: 19, gender: '女', hometown: '河南省'}, {name: '小刚', age: 17, gender: '男', hometown: '山西省'}, {name: '小丽', age: 18, gender: '女', hometown: '山东省'} ]

1648945182921

代码展示

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        table {
            width: 800px;
            margin: 100px auto;
            border-collapse: collapse;
        }

        td {
            height: 50px;
            text-align: center;
        }

        thead {
            background-color: #f0eff1;
        }
    </style>
</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: '山东省' }
        ]

        let tabltHTML = `    <<table border="1" >
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>住址</th>
            </tr>
        </thead>
        <tbody>`

        for (let index = 0; index < students.length; index++) {
            tabltHTML += ` <tr><td>${index + 1}</td>`;
            for (let k in students[index]) {
                tabltHTML += `<td>${students[index][k]}</td>`
            }
        }


        tabltHTML += `  </tr></tbody></table>`
        document.write(tabltHTML)
    </script>
</body>

</html>

5.内置对象

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

今天我们主要学习一下Math

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

方法有：

random：生成0-1之间的随机数（包含0不包括1）
ceil：向上取整
floor：向下取整
max：找最大数
min：找最小值
pow：幂运算
abs：绝对值

代码展示

    <script>
        console.log(Math.random()); //生成0-1之间的随机数,包含0,不包含1

        console.log(Math.ceil(.1));//向上取整

        console.log(Math.floor(1.9));//向下1取整
        console.log(Math.max(1, 3, 4535, 565, 7));  //取最大值
        console.log(Math.min(213, 5467, 678, 8));//取最小值
        console.log(Math.pow(2, 5));//进行幂运算,第二个是指数幂
        console.log(Math.abs(-34.1)); //绝对值
    </script>

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

基本概念

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

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

空间分配

堆栈空间分配区别：

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

简单数据类型存放到栈里面
堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

引用数据类型存放到堆里面
具体分析
- 值类型（简单数据类型）： string ，number，boolean，undefined，null
- 值类型变量的数据直接存放在变量（栈空间）中
- 引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
- 引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

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

JS之对象

对象

1.对象的基本认识

什么是对象

对象的组成

2.对象的使用

1.声明对象语法

2.对象的组成

对象由属性跟方法组成

属性

3.属性访问（2种方式）

4.对象中的方法

方法访问

3.操作对象

1.增加属性

4.遍历对象for in

案例

5.内置对象

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

基本概念

空间分配