JS04-对象

colorsZeroz

已于 2024-03-17 09:37:38 修改

阅读量941

点赞数 26

分类专栏： JavaScript基础文章标签： javascript 前端开发语言

于 2024-03-15 17:20:43 首次发布

本文链接：https://blog.csdn.net/colorsZeroz/article/details/136745482

版权

JavaScript基础专栏收录该内容

15 篇文章 0 订阅

订阅专栏

对象

使用对象

声明人对象
属性和方法都要写在对象里面

let person = {  
	  uname:'甘雨',

      age:2000,

      sex:'女',

      sayHi: function(){

        console.log('Hi~~~~~~~~~')

      }

    }

1.访问属性对象.属性名

console.log(person.uname)

console.log(person.age)

2.访问属性对象.[‘属性名’]

console.log(person['sex'])

调用方法对象.方法名()

person.sayHi()

对象操作

        let obj = {
            uname:'小明',
            age:18
        }
        console.log(obj.age)
        // 修改 对象.属性 = 新值
        obj.age = 81
        console.log(obj.age)
        // 新增一个属性
        obj.sex = '男'
        obj.simg = function() {
            document.write('hi')
        }
        console.dir(obj)
        obj.simg()
        // 删除
        (function () {
            delete obj.age
            console.dir(obj)
        }())

遍历对象

    <script>
        let obj = {
            uname:'小明',
            age:18
        }
        // for (let k in 对象) {}
        // k变量 k 或者 key value
        for (let k in obj) {
            console.log(k) //属性名
            console.log(obj[k]) //属性值
        }

数学Math对象

        console.log(Math.PI)//圆周率
        console.log(Math.random())//随机数
        console.log(Math.ceil(1.2))//向上去整
        console.log(Math.floor(1.2))//向下去整
        console.log(Math.round(1.2))//就近去整（负数往大取-1.5）
        console.log(Math.max(1,2,654,54,4))

案例

学生信息表

<!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: 8px;
            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: #ccc;
        }
    </style>
</head>
<body>
   
        
    
    <script>
        document.write(`
            <h2>学生信息</h2>
            <p>将数据渲染到页面中</p>
            <table>
                <caption>学生列表</caption>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>家乡</th>
                </tr>
            `)
        let student = [
            { name : '刻晴', age: '18',gender: '女', hometown:'璃月' },
            { name : '香菱', age: '18',gender: '女', hometown:'璃月' },
            { name : '凝光', age: '22',gender: '女', hometown:'璃月' },
            { name : '甘雨', age: '2000',gender: '女', hometown:'璃月' },
            { name : '钟离', age: '5000',gender: '男', hometown:'璃月' },
        ]
        // 遍历数组
        for (let i = 0; i < student.length; i++){
            document.write(`
            <tr>
                <th>${i + 1}</th>
                <th>${student[i].name}</th>
                <th>${student[i].age}</th>
                <th>${student[i].gender}</th>
                <th>${student[i].hometown}</th>
            </tr>
            `)
        }
        document.write(`
        </table>
        `)
    </script>
</body>
</html>

随机数

function getRandomIntInclusive(min, max) {
   min = Math.ceil(min);
   max = Math.floor(max);
   return Math.floor(Math.random() * (max - min + 1)) + min; 
    //含最大值，含最小值
}
let str = ['刻晴','香菱', '凝光','甘雨','钟离']
console.log(str[getRandomIntInclusive(0,str.length - 1)])

随机点名

function getRandomIntInclusive(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min; 
    //含最大值，含最小值
}
let arr = ['刻晴','香菱', '凝光','甘雨','钟离']
let random = getRandomIntInclusive(0,arr.length - 1)
console.log(arr[random]);
arr.splice(random,1)//arr.splice(初始位置,删几个)

猜数字

        function getRandomIntInclusive(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
        }
        let random = getRandomIntInclusive(1,10)
        while (true){
            let num = +prompt('输入一个数')
            if(random < num){
                alert('太大了')
            }
            if(random > num){
                alert('小了')
            }
            else{
                alert('正确')
                break
            }
        }

colorsZeroz

关注

26
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
1
评论
JS04-对象

在实际案例中，通过JavaScript动态生成学生信息表格，展示了数组遍历并将数据渲染到HTML页面的方法。另外，多次应用了获取随机数函数实现随机选取数组元素的案例，包括随机输出数组中的一个元素、随机点名（并从数组中移除已选元素）以及猜数字游戏。
复制链接

扫一扫