js学习日记第五天

对象(一种数据类型)

1. 对象使用

1. 声明对象

let product = {
            name: '小米10青春版' ,
            num: 10086,
            weight: '0.55kg',
            address: '西安草堂'
        }

2. 使用属性(对象名.属性名)

product.name = '小米10plus'//改
product.color = 'pink'//增
console.log(product.name)//查的法一
console.log(product['name'])//查的法二

3. 使用方法

let star = {
            uname: '刘德华',
            song: function () {
                console.log('冰雨');
            },
            dance: function () {
                console.log('拉丁');
            }
        }
        star.song()
        star.dance()

4. 遍历对象

// 遍历对象
for(let k in obj) {
    console.log(k)//输出属性名
    console.log(obj[k])//输出属性值
}

// 遍历数组对象
let students = [
{name: '小王',age: 18, gender: '男',address:'山东菏泽曹县牛逼666'},
{name: '小丽',age: 18, gender: '男',address:'山东菏泽曹县牛逼666'},
{name: '小明',age: 18, gender: '男',address:'山东菏泽曹县牛逼666'},
{name: '小张',age: 18, gender: '男',address:'山东菏泽曹县牛逼666'}
]
for(i = 0; i < students.length; i++){
console.log(students[i])//输出每个对象
console.log(students[i].address)//输出对象的属性值
}

// 渲染表格
let students = [
        {name: '小王',age: 18, gender: '男',address:'山东菏泽曹县牛逼666'},
        {name: '小丽',age: 18, gender: '男',address:'山东菏泽曹县牛逼666'},
        {name: '小明',age: 18, gender: '男',address:'山东菏泽曹县牛逼666'},
        {name: '小张',age: 18, gender: '男',address:'山东菏泽曹县牛逼666'}
        ]
        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].address}</td>
                </tr>
            `)
            
        }

5. 内置对象

1. Math对象

1. Math.random()===在0-1之间随机生成一个数字，可以等于0，但一定小于1

2. Math.ceil()===向上取整

3. Math.floor()===向下取整

4. Math.max()===最大值

5. Math.min()===最小值

    // 生成任意范围随机整数
    function getRandom(min,max) {
        let random = Math.floor(Math.random() * (max - min + 1) + min)
        console.log(random);
    }
    getRandom(1,100)

// 猜数字游戏
    // 生成1-10的随机数
    function getRandom(min,max) {
        return Math.floor(Math.random() * (max - min + 1) + min)
    }
    let random = getRandom(1,10)
    console.log(random)
    while(true){
        // 用户输入
        let num = +prompt('请猜一个1-10的数字')
        // 判断输入是否正确
        if(num === random){
            alert('恭喜你猜对了')
            break
        }else if (num > random){
            alert('你猜大了,请继续猜')
        }else{
            alert('你猜小了,请继续猜')
        }
    }

    // 生成随机颜色
    function getRandomColor(flag){
        if(flag === true){
            // 生成16进制颜色
            let str = '#'
            let arr = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']
            for(i = 1; i <= 6; i++){
                let random = Math.floor(Math.random() * arr.length)
                str += arr[random] 
            }
            return str

        }else {
            // 生成rgb格式颜色
            let r = Math.floor(Math.random() * 256) 
            let g = Math.floor(Math.random() * 256) 
            let b = Math.floor(Math.random() * 256)
            return `rgb(${r},${b},${b})`
        }
    }
    getRandomColor(false)
    getRandomColor(true)

综合案例

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(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>
                    `)
                }