JavaScript入门——（6）对象

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>