js——对象篇

置顶帅气的花泽类

已于 2024-05-24 21:23:02 修改

阅读量1k

点赞数 27

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript 前端 css

于 2024-04-22 20:07:55 首次发布

本文链接：https://blog.csdn.net/qq_46642600/article/details/137957756

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

数组与对象

对象对象可以描述具体的事物
数组是“有序”的，针对的是他在内存中的位置是有序的；
对象同数组一样也是数据的集合，但是是无序的

在js中对象就是一组无序的键值对的集合对象由属性和方法组成

键值对就是冒号左边的内容称为属性，右边的内容称为值，故称为键值对
当右边的值为函数时，称为方法，方法相当于函数
是一种数据类型所以在定义时，使用let
集合用{} 称为对象字面量

案例一：对象属性和方法的定义

在对象里面称为属性，在对象外面称为变量

 <script>
        let singer = {
            uname: '唐嫣',
            ageage: 18,
            song: function (x, y) {
                console.log(x + y)
            }
        }
        singer.song(1, 5)
    </script>

对象本质也是数据集合，所以有增删改查
注意：在操作对象属性时，使用是“对象名称 .”,并且使用等号，在花括号内使用冒号
在查的时候，有两种方法，第二种不要忘记加上单引号查的两种方式
对象名.属性；
对象名[‘属性名’] 主要是针对于属性名起的是字符串形式的。

  <script>
        let students = {
            uname: 'andy',
            age: 18,
            gender: '女'
        }
        // 1.增
        students.hobby = '唱歌'
        console.log(students)
        // 2.删除
        delete students.uname
        console.log(students)
        // 3.改
        students.age = 20
        console.log(students)
        // 4.查
        console.log(students.gender)
        console.log(students['gender']);
    </script>

方法对象名.方法名方法相当于函数，所以自然涉及到参数在起名字的时候，一般不会嘉善引号，但是当遇到空格或者短横线，会加上引号

 <script>
        let singer = {
            uname: '唐嫣',
            'uname-gender': '女'
        }
        console.log(singer);
    </script>

**是个小小的难点：**如果加上console.log( perdon.song(1, 2)) 就会显示undefined
因为函数调用要是想要被打印出来，必须加上return 没有加上return显示undefined

遍历对象

使用for…in…循环，不适宜数组，因为遍历出的是字符串下标，不是数字下标 数组应该使用arr2的形式
可知k是字符串下标，更适合对象的遍历，因为对象的k相当于属性名，属性名就是字符串形式
**

死记硬背原理：

**
在这里插入图片描述

  <script>
        let arr = [43, 6, 8, 54, 43]
        for (let k in arr) {
            // 在数组中，k表示数组下标
            console.log(k)
            // 并且是字符串形式
            console.log(typeof k)
            console.log(arr[k])
        }

        let arr2 = [4, 56, 5, 534432]
        for (let i = 0; i < arr2.length; i++) {
            console.log(arr2[i])
        }
    </script>

遍历对象代码：

  <script>
        let person = {
            uname: 'andy',
            age: 25,
            gender: '女'
        }
        for (let k in person) {
        //当我们使用点表示法（.）来访问对象属性时，如 person.k，JavaScript 实际上是在查找一个名为 k 的属性，而不是 k 变量所持有的那个字符串作为属性名。这就是为什么 console.log(person.k) 不会按照预期工作，除非 person 对象真的有一个名为 k 的属性。
            // console.log(person.k)
            // k得出的是字符串形式的属性，相当于是加了引号的字符串，所以需要使用查的第二种方式
            console.log(person[k])
        }
    </script>

渲染学生信息表格案例

 <style>
        table {
            width: 700px;
            text-align: center;
        }

        caption {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 15px;
        }

        table,
        th,
        td {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        tr {
            height: 40px;
        }
    </style>

 <h2>学生信息</h2>
    <p>将数据渲染到页面中</p>
    <table>
        <caption>学生列表</caption>
        <tr>
            <th>序号</th>
            <th>学生</th>
            <th>年龄</th>
            <th>性别</th>
            <th>家乡</th>
        </tr>

<script>
            let students =
                [
                    { uname: 'andy', age: 18, gender: '女', hometown: '山东省' },
                    { uname: 'mike', age: 19, gender: '男', hometown: '河南省' },
                    { uname: 'andy', age: 18, gender: '女', hometown: '河北省' },
                    { uname: 'amy', age: 19, gender: '男', hometown: '山西省' }
                ]
            for (let i = 0; i < students.length; i++) {
                document.write(
                    `<tr>
                    <td>${i + 1}</td>
                    <td>${students[i].uname}</td>
                    <td>${students[i].age}</td>
                    <td>${students[i].gender}</td>
                    <td>${students[i].hometown}</td>
                </tr>
            `)
            }
        </script>

内置对象

直接封装好的对象，包括属性和方法，直接使用

问题：什么时候使用Math.floor和Math.random嵌套使用？在需要求范围的时候 Math.floor（）本身是向下取整

<script>
        console.log(Math.PI)
        console.log(Math.max(43, 56, 657, 432, 321))
        console.log(Math.min(45, 65, 5677, 6534, 2))
        console.log(Math.random())
        console.log(Math.ceil(5.3))
        console.log(Math.floor(7.8))
        console.log(Math.pow(5, 2))
        console.log(Math.abs(-6))
        // 0-10
        console.log(Math.floor(Math.random() * 11))
        // N-M   5-10    Math.floor(Math.random()*(M-N+1))+N
        console.log(Math.floor(Math.random() * (10 - 5 + 1)) + 5);
    </script>

问题： Math.floor(Math.random()*(M-N+1))+ N
什么时候加N呢；死记硬背：如果范围是从0开始，那么不用加上N；范围不从0开始，需要加上N 并且乘以M-N+1`实际上就是乘以长度
下面这个数组范围从0开始

<script>
        let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
        console.log(arr[Math.floor(Math.random() * arr.length)]);
        
         // N-M   5-10    Math.floor(Math.random()*(M-N+1))+N
        console.log(Math.floor(Math.random() * (10 - 5 + 1)) + 5);
    </script>

随机数字小游戏小案例

 <script>
        // 1.准备一个随机的数字1-10
        let random = Math.floor(Math.random() * 10) + 1
        flag = true
        // console.log(random);
        // 2.用户输入一个数字
        // 4.限定输入次数
        for (let i = 1; i <= 3; i++) {
            let num = +prompt("请输入一个数字：")
            // 3.语句判断
            if (num > random) {
                alert('您输入大了')
            } else if (num < random) {
                alert('您输入小了')
            } else {
                // 7.这是为了避免在次数还没用完，执行完for循环还需要执行下面的if语句
                flag = false
                // 5.满足条件  break终止条件
                alert('正确')
                break
            }
        }
        // 6.显示次数用完了
        if (flag) {
            alert('您的次数用完了')
        }
    </script>

渲染案例——改变的是数据，不改变的是结构（完整案例资料见链接）

注意点：准备好数据；for循环要卸载document.write外面；使用模板字符串

 <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
                        },
                        {
                            src: 'images/course01.png',
                            title: '自动间的',
                            num: 80654376
                        }
                    ]
                    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>1${data[i].num}</span>人在学习
                        </div>
                    </a>
                </li>
                    `)
                    }
                </script>

简单类型和复杂类型
五种基本数据类型和三种引用数据类型
五：分别是整数类型、字符串类型、浮点型、null、underfined
三：对象、数组、函数
数据存放在内存中，分为堆和栈
内存空间的划分：
在这里插入图片描述

简单数据类型和复杂数据类型的综合比较：简单数据类型num会在栈中开辟一个空间用来存放10；复杂数据类型obj会在堆中开辟一个空间用来存放对象，在栈中开辟一个空间用来存放对象在堆中的地址

在这里插入图片描述

简单数据类型案例：
可以看到每声明一个变量，就会开辟一个空间，改变的是num2中的内容，因此num1还是10

<script>
        let num1 = 10
        let num2 = num1
        num2 = 20
        console.log(num1);
    </script>

在这里插入图片描述

复杂数据类型案例：

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