Day05-对象

已于 2023-02-02 16:55:35 修改
阅读量134 收藏
点赞数
分类专栏： JavaScript基础 文章标签： javascript 前端 vue.js
于 2023-02-01 17:57:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45831040/article/details/128835339
版权
本文介绍了JavaScript中的对象概念，包括伪数组、对象的使用、操作对象的方法如增删改查，以及如何遍历对象。此外，还讲解了内置对象Math的应用，如生成随机数。文章通过示例代码详细阐述了对象的属性和方法访问，以及基本数据类型和引用数据类型的差异。
摘要由CSDN通过智能技术生成

Day05-对象

一、对象

1.1 伪数组

arguments（伪数组）：在函数内有效

**区别：**伪数组比真数组少了一些 pop() push() 等方法

<script>
        function fn() {
            console.log(arguments) // [1,2,3]
            let sum = 0
            for (let i = 0; i < arguments.length; i++) {
                sum += arguments[i]
            }
            console.log(sum)
        }
        fn(1,2,3)
    </script>

在这里插入图片描述

2.1 对象使用

对象声明
在这里插入图片描述
对象的属性和方法
在这里插入图片描述
例如：
在这里插入图片描述
对象中的属性访问
1.方法一：对象.属性名
在这里插入图片描述
2.方法二：对象[‘属性名’]
在这里插入图片描述
对象中的方法访问
在这里插入图片描述

 <script>
        // 声明人对象
        let person = {
            uname: '刘德华',
            age: 18,
            sex: '男',
            // 定义方法---方法名：function() {}
            sayHi: function() {
                console.log('hi~~~')
            },
            mtv: function(s) {
                console.log(s)
            }
        }
        // 1. 访问属性 得到值 对象.属性名
        console.log(person.uname)
        console.log(person.age)
        // 2. 访问属性 得到值 对象['属性名']
        console.log(person['sex'])
        // 调用方法 对象.方法名()
        person.sayHi()
        person.mtv('无间道')
    </script>

在这里插入图片描述

3.1 操作对象

增删改查：
在这里插入图片描述

<script>
        let obj = {
            uname: '小明',
            age: 18
        }
        console.log(obj.age)
        //  修改    对象.属性 = 新值
        obj.age = 81
        console.log(obj)
        //  新增一个属性    js可以非常方便地动态新增属性或者方法
        obj.sex = '男'
        //  会去对象里面找是否有 sex 这个属性，如果有则更新值，如果没有则新增这个属性
        obj.sing = function() {
            console.log('hi')
        }
        console.dir(obj)
        console.log(obj)
        // 删除
        delete obj.uname
        console.log(obj)
    </script>

4.1 遍历对象

用 for in 语句遍历对象
在这里插入图片描述
在这里插入图片描述

 <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++) {
            for (let key in students[i]) {
                console.log(key)
                console.log(students[i][key])
            }
        }
    </script>

在这里插入图片描述
案例—学生信息表

<!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>
        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>
        <script>
            let students = [
            {name: '小明', age: 18, gender: '男', hometown: '河北省'},
            {name: '小红', age: 19, gender: '女', hometown: '河南省'},
            {name: '小刚', age: 17, gender: '男', hometown: '山西省'},
            {name: '小丽', age: 18, gender: '女', hometown: '山东省'}
            ]
            // 打印表格的头部
            document.write(`
                <table>
                <caption>学生列表</caption>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>家乡</th>
                </tr>
             `)
             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>
                `)
             }
            // 尾部
            document.write(`
            </table>
            `)
        </script>
    </body>
</html>

在这里插入图片描述

5.1 内置对象Math

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

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

随机点名案例

<script>
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操','刘星纯']

        //  生成一个随机数，作为数组的索引号
        let random = getRandom(0, arr.length - 1)
        document.write(arr[random])

        //  之后删除这个人的名字
        arr.splice(random, 1)
        console.log(arr)
    </script>

在这里插入图片描述
猜数字游戏案例

<script>
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        let random = getRandom(1, 10)
        while(true) {
            let num = +prompt('请您输入一个数字:')
            if (random < num) {
                alert('你猜大了')
            } else if (random > num) {
                alert('你猜小了')
            } else {
                alert('正确！')
                break
            }
        }
    </script>

二、综合案例-学成在线首页

* {
    margin: 0;
    padding: 0;
}
.w {
    width: 1200px;
    margin: auto;
}
body {
    background-color: #f3f5f7;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }
  .clearfix {
     *zoom:1;
  }   
 
.header {
    height: 42px;
    /* background-color: pink; */
    /* 注意此地方会层叠 w 里面的margin */
    margin: 30px auto;
}
.logo {
    float: left;
    width: 198px;
    height: 42px;
}
.nav {
    float: left;
    margin-left: 60px;
}
.nav ul li {
    float: left;
    margin: 0 15px;
}
.nav ul li a {
    display: block;
    height: 42px;
    padding: 0 10px;
    line-height: 42px;
    font-size: 18px;
    color: #050505;   
}
.nav ul li a:hover {
    border-bottom: 2px solid #00a4ff;
    color: #00a4ff;
}
/* search搜索模块 */
.search {
    float: left;
    width: 412px;
    height: 42px;
    margin-left: 70px;
}
.search input {
    float: left;
    width: 345px;
    height: 40px;
    border: 1px solid #00a4ff;
    border-right: 0;
    color: #bfbfbf;
    font-size: 14px;
    padding-left: 15px;
}
.search button {
    float: left;
    width: 50px;
    height: 42px;
    /* 按钮button默认有个边框需要我们手动去掉 */
    border: 0;
    background: url(images/btn.png);
}
.user {
    float: right;
    line-height: 42px;
    margin-right: 30px;
    font-size: 14px;
    color: #666;
}
/* banner区域 */
.banner {
    height: 421px;
    background-color: #1c036c;
}
.banner .w {
    height: 421px;
    background: url(images/banner2.png) no-repeat top center;
}
.subnav {
    float: left;
    width: 190px;
    height: 421px;
    background: rgba(0,0,0, 0.3);
}
.subnav ul li {
    height: 45px;
    line-height: 45px;
    padding: 0 20px;
}
.subnav ul li a {
    font-size: 14px;
    color: #fff;
}
.subnav ul li a span {
    float: right;
}
.subnav ul li a:hover {
    color: #00a4ff;
}
.course {
    float: right;
    width: 230px;
    height: 300px;
    background-color: #fff;
    /* 浮动的盒子不会有外边距合并的问题 */
    margin-top: 50px;
}
.course h2 {
    height: 48px;
    background-color: #9bceea;
    text-align: center;
    line-height: 48px;
    font-size: 18px;
    color: #fff;
}
.bd {
    padding: 0 20px;
}
.bd ul li {
    padding: 14px 0;
    border-bottom: 1px solid #ccc;
}
.bd ul li h4 {
    font-size: 16px;
    color: #4e4e4e;
}
.bd ul li p {
    font-size: 12px;
    color: #a5a5a5;
}
.bd .more {
    display: block;
    height: 38px;
    border: 1px solid #00a4ff;
    margin-top: 5px;
    text-align: center;
    line-height: 38px;
    color: #00a4ff;
    font-size: 16px;
    font-weight: 700;
}
/* 精品推荐模块 */
.goods {
    height: 60px;
    background-color: #fff;
    margin-top: 10px;
    box-shadow: 0 2px 3px 3px rgba(0,0,0, 0.1);
    /* 行高会继承， 会继承给3个孩子 */
    line-height: 60px;
}
.goods h3 {
    float: left;
    margin-left: 30px;
    font-size: 16px;
    color: #00a4ff;
}
.goods ul {
    float: left;
    margin-left: 30px;
}
.goods ul li {
    float: left;
}
.goods ul li a {
    padding: 0 30px;
    font-size: 16px;
    color: #050505;
    border-left: 1px solid #ccc;
}
.mod {
    float: right;
    margin-right: 30px;
    font-size: 14px;
    color: #00a4ff;
}
.box {
    margin-top: 30px;
}
.box-hd {
    height: 45px;
}
.box-hd h3 {
    float: left;
    font-size: 20px;
    color: #494949;
}
.box-hd a {
    float: right;
    font-size: 12px;
    color: #a5a5a5;
    margin-top: 10px;
    margin-right: 30px;
}
/* 把li 的父亲ul 修改的足够宽一行能装开5个盒子就不会换行了 */
.box-bd ul {
    width: 1225px;
}
.box-bd ul li {
    position: relative;
    top: 0;
    float: left;
    width: 228px;
    height: 270px;
    background-color: #fff;
    margin-right: 15px;
    margin-bottom: 15px;
    transition: all .3s;
   
}
.box-bd ul li:hover {
    top: -8px;
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,.3);
}
.box-bd ul li img {
    width: 100%;
}
.box-bd ul li h4 {
    margin: 20px 20px 20px 25px;
    font-size: 14px;
    color: #050505;
    font-weight: 400;
}
.box-bd .info {
    margin: 0 20px 0 25px;
    font-size: 12px;
    color: #999;
}
.box-bd .info span {
    color: #ff7c2d;
}
/* footer 模块 */
.footer {
    height: 415px;
    background-color: #fff;
}
.footer .w {
    padding-top: 35px;
}
.copyright {
    float: left;
}
.copyright p {
    font-size: 12px;
    color: #666;
    margin: 20px 0 15px 0;
}
.copyright .app {
    display: block;
    width: 118px;
    height: 33px;
    border: 1px solid #00a4ff;
    text-align: center;
    line-height: 33px;
    color: #00a4ff;
    font-size: 16px;
}
.links {
    float: right;
}
.links dl {
    float: left;
    margin-left: 100px;
}
.links dl dt {
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
}
.links dl dd a {
    color: #333;
    font-size: 12px;
}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学车在线首页</title>
    <link rel="stylesheet" href="style.css">
    <style>

    </style>
</head>

<body>

    <!-- 4. box核心内容区域开始 -->
    <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>
                            <img src=${data[i].src} alt="">
                            <h4>
                                ${data[i].title}
                            </h4>
                            <div class="info">
                                <span>高级</span> • <span>${data[i].num}</span>人在学习
                            </div>
                        </li>
                    `)
                    }
                </script>

            </ul>
        </div>
    </div>

</body>

</html>

在这里插入图片描述

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

在这里插入图片描述

简单数据类型：tring ，number，boolean，undefined，null
简单数据类型存放到栈里面
在这里插入图片描述
复杂数据类型：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date
复杂（引用）数据类型存放到堆里面
在这里插入图片描述

<script>
        //  传值
        let num = 10
        let num2 = num
        num = 20
        console.log(num2)

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

在这里插入图片描述

纯纯不会写代码
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
day05-集合1
08-04
在Java编程语言中，集合框架是处理对象组的重要工具，其中`Collection`是所有单元素集合的顶级接口。本文将详细讲解`Collection`集合的相关知识点。 1. **集合体系结构**： Java集合框架主要由两个核心接口构成：`...
JavaScript随机点名案例
LuShanGuoQiLin的博客
08-17 479
JavaScript随机点名案例。
随机点名案例
weixin_48846123的博客
04-24 1632
最近学习了随机函数，今天就利用随机函数来做一个随机点名的案例吧。
day07-面向对象 java
06-11
day07-面向对象 java
Java入门基础学习资料day05-06
10-22
day06【类与对象、封装、构造方法】 day07【Scanner类、Random类、ArrayList类】 day08【String类、static关键字、Arrays类、Math类】 day09【继承、super、this、抽象类】 day10【接口、多态】 day11【final、权限...
Week05-Day05
03-22
在文件"Week05-Day05-main"中，可能包含了相关的代码示例、教程文档或者练习题，供你进一步学习和实践。通过结合理论和实践，你可以更好地掌握这一阶段的知识点。 总结起来，周05-天05的学习重点是JavaScript的实战...
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 495
【代码】springboot网上商品订单转手系统bootpf
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 1145
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
Nuxt3【内置的工具函数】2024最新版
最新发布
朝阳39的博客
08-20 742
用于在Vue应用程序或API路由中进行HTTP请求，详见。
React学习笔记，从入门到砸门
留白声的博客
08-20 738
react详细自我学习笔记，内容包括JSX、Redux、Router等
CSS的:defined伪类：选择已定义元素的新选择器
2401_85743969的博客
08-17 640
在CSS中，伪类用于选择元素的不同状态或行为。:defined伪类是CSS4的一个特性，用于选择已经在文档中定义的元素。
Vue3项目-Cesium地图初始化
StupidlyGrass的博客
08-19 171
将node_modules中cesium/Build/Cesium文件夹拷贝至public目录下。3、index.html配置。一、安装、配置Cesium。1、安装Cesium。二、使用Cesium。
Vue :class 绑定可以结合多个判断维度来动态设置类
u010865136的专栏
08-19 154
二、:class="[isMute && 'disabled', env.isH5 && 'TUIChat-H5-footer']"一、数组语法允许你根据条件动态添加多个类名。数组中的每个元素可以是一个类名的字符串，或者是一个对象。对象中的键是类名，值是布尔值。
vue3 @antv/x6 使用画布滚动条以后的几个问题的解决
jwbabc的专栏
08-20 100
通过设置@antv/x6的插件scroller的options，来达到基本上满足项目的原型要求。
基于vue框架的爱看电影网站v4o92（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-15 1028
项目功能：用户,电影分类,电影信息,电影评分基于Vue框架的爱看电影网站项目功能丰富多样，旨在为用户提供一个集电影浏览、信息查询、观影体验、互动交流于一体的综合性平台。
基于vue框架的班级网站的设计与实现vg66m（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-20 717
本研究旨在设计并实现一个基于Vue框架的班级网站，通过现代化的前端技术和用户体验设计，为班级成员提供一个便捷、高效、美观的在线交流空间。随着互联网技术的普及，越来越多的班级开始尝试建立自己的在线平台，以实现信息的快速传递和资源的有效共享。本系统采用前后端分离的开发模式，前端使用Vue.js框架构建用户界面，后端使用Node.js或Spring Boot等框架开发RESTful API，数据库采用MySQL或MongoDB等数据库进行数据存储和查询。每个步骤都需要仔细配置和测试，以确保系统的稳定性和高效性。
一些有趣的XSS注入GAME
qq_67758645的博客
08-17 1000
如果我们不经过前面的javascript:将其变成字符串，那么传进去后时候就会带两个引号，那么就算setTimeout可以将字符串当作代码执行，但是，里面还是一层字符串，执行不了。我理解的是javascript：将后面的alert字符串替换成alert js代码，类似于eval的作用，传进setTimeout的时候就不是字符串，而是js代码。将%编码试试，%25，这样到后端以后就会变成%28 %29，如果js能够解码的话，最后传到页面的时候在解码%28，%29为（），这样不就实现了嘛。
Bootstrap 附加导航（Affix）插件
2402_83140078的博客
08-17 607
附加导航（Affix）插件允许指定 固定在页面的某个位置。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 会锁定在某个位置，不会随着页面其他部分一起滚动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

纯纯不会写代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值