当前位置:首页 » 《随便一记》 » 正文

七天学完JavaScript基础语法 (day07)_程序员在线炒河粉的博客

15 人参与  2022年03月27日 11:26  分类 : 《随便一记》  评论

点击全文阅读


JavaScript基础语法 07

目录

• 遍历对象
• 内置对象

•综合案例

一.遍历对象

语法:
在这里插入图片描述
一般不用这种方式遍历数组、主要是用来遍历对象
一定记住: k 是获得对象的属性名, 对象名[k] 是获得 属性值

举例子

<!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>
</head>
<body>
    <script>
        let person = {
            name : '小明',
            age : 18,
            sex : '男',
            hobby : '打代码'
        }
        //遍历对象
        for (let k in person){
            console.log(k)          //  打印属性名
            console.log(person[k])  //打印属性值
        }
    </script>
</body>
</html>

控制台输出结果
在这里插入图片描述
遍历数组对象:

把下面数据中的对象打印出来:

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

<!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>
</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: '山东省'}        
        ]
        // 遍历数组
        for (let i = 0; i < students.length; i++) {
        // 控制台打印数组的元素
        // 对象名.属性名  或者 对象名['属性名']
        console.log(students[i].name, students[i].age,students[i].gender,students[i].hometown)
      }
    </script>
</body>
</html>

控制台输出结果
在这里插入图片描述

二.内置对象

掌握内置对象,调用JavaScript为我们准备好的功能

内置对象是什么?
JavaScript内部提供的对象,包含各种属性和方法给开发者调用

举例子;内置对象Math
Math对象是JavaScript提供的一个“数学高手”对象
提供了一系列做数学运算的方法
方法有:
random:生成0-1之间的随机数(包含0不包括1)
ceil:向上取整
floor:向下取整
max:找最大数
min:找最小数
pow:幂运算
abs:绝对值
可以网上查询Math对象在线文档

运用内置对象Math的random生成随机数
在这里插入图片描述
用random实现随机点名
把 [‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中,但是不
允许重复显示
分析:
①:利用随机函数随机生成一个数字作为索引号
②:数组[随机数] 打印输出
③:数组中删除刚才抽中的索引号

<!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>
</head>
<body>
    <!--  通过src属性引入js文件 -->
<script src="./random.js" ></script>

    <script>
        //准备数组
        let arr = ['赵云','黄忠','关羽','张飞','马超','刘备','曹操']
        //在通过随机函数,得到一个随机数
        //数组的最大下标=数组长度-1
        let random = getRandom(0,arr.length - 1)
        //把随机数作为数组下标,控制台输出被点名的
        console.log(arr[random])
        //前面讲过的删除数组元素:数组名.splice(起始位置,删除个数)
        arr.splice(random,1)
        //浏览器看看被点名的删除了没
        document.write(arr)
    </script>
</body>
</html>

结果图
在这里插入图片描述

三.综合案例

随机生成数字,猜数字

需求:程序随机生成 1~10 之间的一个数字,用户输入一个数字
①:如果大于该数字,就提示,数字猜大了,继续猜
②:如果小于该数字,就提示,数字猜小了,继续猜
③:如果猜对了,就提示猜对了,程序结束

分析:
①:利用随机数生成一个数字
②:需要一直猜,所以需要不断的循环
③:因为条件是结果猜对了,就是判断条件退出,用while循环合适
④:内部判断可以用多分支语句

<!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>
</head>

<body>
    <script>
        // 随机数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        // 生成 1~10 之间的随机数
        let random = getRandom(1, 10)
        // console.log(random)
        // 3. 用户输入 不断的弹框直到输入正确为止
        while (true) {
            let num = +prompt('请您输入一个数字:')
            // 如果输入的大于随机数就提示猜大了
            if (random < num) {
                alert('猜大了')
            // 如果输入的小于随机数就提示猜小了
            } else if (random > num) {
                alert('猜小了')
            // 如果输入的正好就提示正确
            } else {
                alert('正确')
                break   // break 退出循环  return 退出函数
            }
        }
    </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


点击全文阅读


本文链接:http://zhangshiyu.com/post/36826.html

对象  随机数  数组  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 京圈佛子破戒后,我改嫁京圈纨绔(沈墨渊,白晶晶)
  • 前世被闺蜜害死,重生后我让她从太子妃变疯女苏婉儿,清歌完本_前世被闺蜜害死,重生后我让她从太子妃变疯女(苏婉儿,清歌)
  • 全书浏览七零军嫂太彪悍,带三宝上军区离婚(沈清落,陈桂花,陆有为)_七零军嫂太彪悍,带三宝上军区离婚(沈清落,陈桂花,陆有为)全书结局
  • 今天也没变成昨天(周扬陈默)全书免费_(周扬陈默)今天也没变成昨天后续(周扬陈默)
  • 重生后,秦总非要父以子贵(许沐晴,秦越泽)全书浏览_重生后,秦总非要父以子贵全书浏览
  • 他嫌弃我喝两块钱豆浆上不了台面,我结婚后他又哭又闹全书万照,白青青在线
  • 昭然若梦前尘烬列表_昭然若梦前尘烬(温昭然方池雲)
  • 导师借我股票账号,我倒欠五十万(孟潇潇,宁薇)_导师借我股票账号,我倒欠五十万孟潇潇,宁薇
  • 拒绝把外卖券给舍友,竹马送我到迪拜捡垃圾(周钰泽,蒋清清,思源)全书浏览_拒绝把外卖券给舍友,竹马送我到迪拜捡垃圾全书浏览
  • 我的人生,你已出局(程森凌古楚文)_我的人生,你已出局程森凌古楚文
  • 穿书成病娇女配,睁眼就签下离婚协议书(朱楼)_穿书成病娇女配,睁眼就签下离婚协议书
  • 老婆逼我给白月光捐肾,我死后她悔疯了(宋逸晨沈墨白)全书浏览_老婆逼我给白月光捐肾,我死后她悔疯了全书浏览

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1