对象实例练习

最新推荐文章于 2024-10-22 09:03:22 发布

奶粉罐没粉

最新推荐文章于 2024-10-22 09:03:22 发布

阅读量2.1k

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_62089165/article/details/126581702

版权

这篇博客探讨了JavaScript中的对象实例创建，包括产品信息对象的声明与操作，如增删改查和遍历。此外，还介绍了如何遍历数组对象以生成表格。在内置对象部分，讲解了如何实现随机点名功能，包括基本版和不允许重复显示的改进版。最后，文章提出了猜数字游戏的实现思路，涉及到随机数生成和循环判断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

要求：

1. 对象是一个产品信息可以命名为： goods

2. 商品名称命名为： name

3. 商品编号： num

4. 商品毛重： weight

5. 商品产地： address

6.进行增删改查

7.遍历对象

     let goods = {
        name:'小米小米10 青春版',
        num:100012816024,
        weight:'0.55kg',
        address:'中国大陆',
    }
    //查
    console.log(goods.name)
    console.log(goods['num']) 
    //增
    goods.cost = 1000
    //删
    delete goods.num
    //改
    goods.weight = '0.77kg'
    //遍历对象 k为一个遍历  k === 'uname' === 'num' === 'weight'
    for (let k in goods){
        document.write(goods[k])
    }

二、遍历数组对象

// 定义一个存储了若干学生信息的数组
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>
<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;
            font-weight: bold;
        }

        table tr:not(:first-child):hover {
            background-color: #eee;
        }
</style>
<body>
    <h2>学生信息</h2>
    <p>将数组中存储的学生信息,以表格的形式输出到网页中</p>
    
        <!-- <tr>
            <td>1</td>
            <td>小明</td>
            <td>18</td>
            <td>男</td>
            <td>河北省</td>
        </tr>
        <tr>
            <td>1</td>
            <td>小明</td>
            <td>18</td>
            <td>男</td>
            <td>河北省</td>
        </tr>
        <tr>
            <td>1</td>
            <td>小明</td>
            <td>18</td>
            <td>男</td>
            <td>河北省</td>
        </tr>
        <tr>
            <td>1</td>
            <td>小明</td>
            <td>18</td>
            <td>男</td>
            <td>河北省</td>
        </tr> -->
    
    <script>
    //打印表头     
    document.write(`
        <table>
            <caption>学生列表</caption>
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>家乡</td>
        </tr>
        `)
    // 定义一个存储了若干学生信息的数组
    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: '广东省'} ]
    //遍历数组
    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>

三、内置对象

1.随机点名

需求：请把 [‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中

分析：①：利用随机函数随机生成一个数字作为索引号

②：数组[随机数]生成到页面中

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

2.随机点名案例改进

需求：请把 [‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’]，随机显示一个名字到页面中，但是不允许重复显示

分析： ①：利用随机函数随机生成一个数字作为索引号

②：数组[随机数] 生成到页面中

③：数组中删除刚才抽中的索引号

    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)

3.猜数字游戏

需求：程序随机生成 1~10 之间的一个数字，用户输入一个数字

①：利用随机数生成一个数字

②：需要一直猜，所以需要不断的循环

③：因为条件是结果猜对了，就是判断条件退出，用while循环合适

④：内部判断可以用多分支语句

    function getRandom(min,max){
        return Math.floor(Math.random() * (max - min + 1)) +  min
    }
    let random = getRandom(1,10)
    while(true){
        let num = prompt(`请您输入1~10中任意一个数字: `)
        if(num > random){
            alert('不好意思，您猜大了！')
        }else if(num < random){
            alert('差一点，您猜小了！')
        }else if (random = num){
            alert('恭喜您!猜对啦')
            break
        }
}