JavaScript学习第五天

最新推荐文章于 2024-07-19 15:16:23 发布
最新推荐文章于 2024-07-19 15:16:23 发布
阅读量328 收藏 5
点赞数
文章标签： 学习 前端 javascript ecmascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58791266/article/details/130890398
版权

1.对象

1.1 什么是对象

1.1.1 定义

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

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

1.1.2 特点

  • 无序的数据的集合
  • 可以详细的描述描述某个事物

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

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

比如描述 班主任 信息：

  1. 静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示
  2. 动态行为 (点名, 唱, 跳, rap) =>

1.2 对象使用

1.2.1对象声明语法

1.2.2 对象由属性和方法组成

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

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

1.2.3 属性

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

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

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

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

1.2.5 属性-查

语法： 对象名 . 属性

1.2.6 属性-改

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

1.2.7 属性-增

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

1.2.8 属性-删 

语法：delete  对象名 . 属性

1.2.9 上面练习进行修改——查的另外一种写法

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


        // 查总结：
        // // (1) 对象名.属性名  obj.age
        // console.log(obj.num)
        // // (2) 对象名['属性名']  obj['age']
        // console.log(obj['num'])
    </script>

1.2.10 对象中的方法

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

        // document.write()
    </script>

1.3 遍历对象

1.3.1 用法

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

1.3.2 案例：数据中的对象打印出来

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

1.3.3 案例：渲染学生信息表

<!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: '山东省' },
                { name: '晓强', age: 16, 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>

1.4 内置对象

1.4.1 内置对象是什么

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

  • document.write()
  • console.log()

1.4.2 内置对象-Math

  • 介绍：Math对象是JavaScript提供的一个“数学”对象
  • 作用：提供了一系列做数学运算的方法 l Math对象包含的方法有：
  1. random：生成0-1之间的随机数（包含0不包括1）
  2. ceil：向上取整
  3. floor：向下取整
  4. round：四舍五入
  5. max：找最大数
  6. min：找最小数
  7. pow：幂运算
  8. abs：绝对值
  9. Math对象在线文档
<script>
        // 属性
        console.log(Math.PI)
        // 方法
        // ceil 天花板  向上取整
        console.log(Math.ceil(1.1)) // 2 
        console.log(Math.ceil(1.5)) // 2 
        console.log(Math.ceil(1.9)) // 2 
        // floor 地板  向下取整
        console.log(Math.floor(1.1))  // 1
        console.log(Math.floor(1.5))  // 1
        console.log(Math.floor(1.9))  // 1
        console.log(Math.floor('12px'))  // 1
        console.log('----------------')
        // 四舍五入 round
        console.log(Math.round(1.1))  // 1
        console.log(Math.round(1.49))  // 1
        console.log(Math.round(1.5))  // 2
        console.log(Math.round(1.9))  // 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, 5))
        console.log(Math.min(1, 2, 3, 4, 5))
        console.log(Math.abs(-1));

        // null  类似 let obj = {}
        let obj = null 
    </script>

1.4.3 内置对象-生成任意范围随机数

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

<script>
        // 左闭右开 能取到 0 但是取不到 1 中间的一个随机小数
        console.log(Math.random())  //0 ~ 1

        // 0~ 10 之间的整数  (max - min + 1)
        console.log(Math.floor(Math.random() * 11)) //0 ~ 10
        let arr = ['red', 'green', 'blue']
        let random = Math.floor(Math.random() * arr.length)
        console.log(random) // 0 1 2 
        console.log(arr[random])    //red green blue
        // 取到 N ~ M 的随机整数
        function getRandom(N, M) {
            return Math.floor(Math.random() * (M - N + 1)) + N
        }
        console.log(getRandom(4, 8))    //4 ~ 8
    </script>

2.综合案例

2.1 随机点名

<script>
        let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
        // 1. 得到一个随机数， 作为数组的索引号， 这个随机数 0~6
        let random = Math.floor(Math.random() * arr.length)
        document.write(arr[random])

        // 2. 页面输出数组里面的元素 
        // document.write(arr[random])

        // 3. splice(起始位置(下标), 删除几个元素)
        arr.splice(random, 1)
        console.log(arr)
    </script>

2.2 猜数字游戏

 <script>
        // 1. 随机生成一个数字 1~10
        // 取到 N ~ M 的随机整数
        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之间的数字：')
            // 3. 判断输出
            if (num > random) {
                alert('你猜大了，继续')
            }
            else if (num < random) {
                alert('你猜小了，继续')
            }
            else {
                flag = false
                alert('你猜对了，真厉害！')
                break
            }
        }
        // 写到for的外面来
        if (flag) {
            alert('次数已经用完')
        }
    </script>

2.3 生成随机颜色

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

2.4学成在线页面渲染

<!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="./css/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">
                <!-- <li>
                    <a href="#">
                        <img src="images/course01.png" alt="">
                        <h4>
                            Think PHP 5.0 博客系统实战项目演练
                        </h4>
                        <div class="info">
                            <span>高级</span> • <span>1125</span>人在学习
                        </div>
                    </a>
                </li> -->
                <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: 'AndroidAPP实战项目演练',
                            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/course04.png',
                            title: '自动添加的模块',
                            num: 1000
                        }
                    ]
                    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>

3. 拓展

3.1 术语解释

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

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

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

堆栈空间分配区别：

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

简单数据类型存放到栈里面

2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

引用数据类型存放到堆里面

3.3 简单类型的内存分配

3.4 复杂类型的内存分配

励志做一名码农_
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对象实例练习
qq_62089165的博客
08-30 1938
随机点名、猜数字游戏
动态创建表格【渲染学生信息案例】
KXJ
04-27 805
需求：点击录入按钮，可以增加学生信息 分析： 不管添加还是删除，都是操作的数据（数组），然后从新渲染页面 需求①：添加数据 点击录入按钮，把表单里面的值都放入数组里面 学号自动生成，是数组最后一个数据的学号+1 需求②：渲染 把数组的数据渲染到页面中，同时清空表单里面的值，下拉列表的值复原 注意，渲染之前，先清空以前渲染的内容 因为多次渲染，最好封装为函数 需求③：删除数据 为了提高性能，最好使用事件委托方式，找到点击的是链接 e.target.tagName 根据当前的删除链接，找到这条数据 需
渲染学生信息表
qq_42938698的博客
06-02 445
【代码】渲染学生信息表。
js实现学生信息表案例--详细教程
qq_180494790的博客
10-26 4301
2.点击链接，要删除的是对应数组里面的这个数据，而不是删除dom节点，如何找到这个数据？遍历数组，动态生成tr，里面填写对应的td数据，并追加给tbody。： 这个案例，减少了dom操作，采取操作数据的形式，增加和删除都是针对于数组的操作，然后根据数据渲染页面。3.注意书写的位置，应该放到新增数据的前面，阻止默认行为的后面。2.创建新的对象，里面存储 表单获取过来的数据。2.点击录入，根据相关数据，生成对象，追加到数组里面。4.点击删除按钮，删除的是对应数组里面的数据。5.再次根据数组的数据，渲染页面。
js基础day5
m0_52372037的博客
04-05 194
删了解一下即可，因为最新的语法严格格式里面，删是不允许这么直接去删的 3.遍历对象 4.内置对象 笔记里面的 综合案例 扩展-术语解释 简单数据类型里面存的是值，复杂数据类型里面存的是地址，复杂数据类型的结果存在堆里面（js里面其实没有堆和栈，我们只是借助来理解）
JavaScript学习的第十天
hw2948502143的博客
03-25 1053
属性节点讲解 文章目录属性节点讲解一、属性节点讲解attributes 获取所有的属性获取删除二、属性操作的方法访问获取设置删除修改总结三、元素节点之间的关系父节点子节点节点集合第一个子节点和最后一个子节点兄弟四、节点操作的方法创建添加删除修改克隆 一、属性节点讲解 元素的几个属性 来获取属性值 innerHTML innerText tagName d获取id值 classsName获取class属性值 title获取对对应的title属性值 input元素 对应存在 name属性值 v
JavaScript学习第三天
yidianyebukun的博客
10-21 158
js基础
JavaScript学习第一天.md
06-16
学习H5前端过程中的一些笔记和心得，记录Javascript的一些知识点，以及自己的一些体会和心得，愿未来每一天，都能学有所成，学有所获，再此记录自己每一天的努力与收获！
JavaScript权威指南（第五版）
07-22
这本《JaVaｓｃｒｉｐｔ权威指南》连续印刷5次，销售数十万册，成为很多Javaｓｃｒｉｐｔ学习者的必备宝典。由于其封面上是一只“爪哇犀牛”（封面上印上动物是原书出版公司O'Reilly一贯的风格），读者亲切地称其为...
JavaScript学习指南 高清 PDF
10-20
这份"JavaScript学习指南"高清PDF，无疑为想要深入理解JavaScript的初学者或有一定基础的开发者提供了宝贵的资源。下面，我们将深入探讨JavaScript的一些关键知识点。 1. **基础语法**：JavaScript的基础包括变量、...
JavaScript DOM 学习第五章 表单简介
12-01
因为每一个表单的检测项都不同，所以我也不能给你一...Forms & JavaScript Living Together in Harmony局限性 首先，你需要了解当用户提交了表单之后JavaScript的检测代码会做什么： 1、JavaScript检测表单时可能会像下
js 渲染学生个人信息表
2203_75410429的博客
05-09 196
Js渲染学生信息代码分析
前端程序媛_Ying博客
12-05 542
分析思考：准备好后端的数组数据 1.先获取父元素tbody、表单元素 和录入按钮 2.封装函数render()渲染。 因为我们用的是追加渲染，所以函数要先清空tbody的tr内容。 然后根据数据的条数来渲染增加tr，使用for 循环。 创建tr，tr里放内容 tr.innerHTML = `` 把tr 追加给tbody。tbody.appendChild(tr)
NumPy库学习之np.random.rand函数
qq_46396470的博客
07-15 313
是 NumPy 库中的一个函数，用于生成随机数。这些随机数是从均匀分布 [0, 1) 中抽取的，即每个数都在0到1之间，但不包括1。
kubernetes学习日志（七）
qq_47037022的博客
07-18 438
本文记录了service管理，ingress管理，Dashboard管理插件，集群鉴权策略，角色与全局角色，赋权与全局角色赋权。
手写简易版Spring IOC容器02【学习】
最新发布
weixin_44794897的博客
07-19 362
其中applyPropertyValues用于从beanDefinition中读取属性的配置信息然后通过BeanUtil(hutool-all中提供的类)为其赋值@Overridetry {// 创建bean实例Class<?if (null!break;// 设置属性值try {// 从beanDefinition中获取property通过Resource获取文件流。
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 258
【代码】博客前端项目学习day03——框架页。
python 语法学习 day 7
2303_79973545的博客
07-15 321
-----元组之间可以进行比较，比较的规则是逐个比较元组中的元素。首先比较第一个元素，如果相等，则比较第二个元素，以此类推。如果所有元素都相等，那么元组相等；否则，比较的结果取决于第一个不相等元素的比较结果。题意:统计单词的种类以及数量(忽略大小写)，最终以降序输出（出现次数相同的单词根据单词的大小升序输出）-------掌握如何将一个英语句子中的单词拆出来,并且去掉标点符号。EOF，输入后产生异常-->>捕获异常，结束输入。第一次提交的答案是：先把所有输入值放在列表里面。------字典排序。
钓鱼攻击 - 基础学习
Reset
07-16 709
钓鱼攻击是一种典型的欺诈式攻击手段，攻击者通过伪装成可以信任的角色，利用电子邮件或其他通信渠道向被攻击者发送植入了木马的文档或恶意链接，并诱骗被攻击者点击执行，从而实现对被攻击者计算机的远程控制或恶意程序感染。
ECMAScript 6版JavaScript学习指南
"JavaScript学习指南，作者Ethan Brown，第三版，涵盖了ECMAScript 6的新特性" 在《JavaScript学习指南》第三版中，作者Ethan Brown深入浅出地介绍了JavaScript这一广泛应用于Web开发的脚本语言。这本书是为那些...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值