对象

1.1 什么是对象？

对象（object）：JavaScript里的一种数据类型。
可以理解为一种无序的集合，注意数组是有序的数据集合。
用来描述某个事物或者某个人。

1.2对象使用

1.对象声明语法

let 对象名 = {}            let 对象名 = new Object()

2.对象是由属性和方法组成的。

3.属性

属性是依附在对象上的变量。

对象本质是无序数据的集合，操作就是增删改查。

 d9f99b6b2e3d4fb9be1f9dc22449353f转存失败，建议直接上传图片文件

4.属性-查

语法：对象.属性名。

查的另外一种属性：对象名['属性名']

<script>
        let obj = {
            goods:'小米青春版',
            num:'10000000',
            weight:'0.55kg',
            address:'中国大陆'
        }

    //使用 对象 . 属性名
    console.log(obj.address);
    console.log(obj['adrress'])
    </script>

5.属性-改

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

//改 将性别的女改为男
    pink.gender = '男'
    console.log(pink);

6.属性-增

语法：同改（前面有这个属性就是改，前面没有这个属性就是增。

 let pink = {
        uname:'yyy',
        age : 18,
        gender : '女'
    }

    //改 将性别的女改为男
    pink.gender = '男'
    console.log(pink);
    pink.hobby = '足球'
    console.log(pink.hobby);

7.属性-删

语法;delete 对象名.属性名。

4.对象中的方法

方法是由方法名和函数两个部分组成，他们之间由：分隔。
多个方法之间有英文,隔开。

方法是依附在对象中的函数。

let obj = {
           uname:'留得花',
           //方法
           song:function(x,y){
               console.log(x + y);
               console.log('冰雨');
           },
           dance:function(){

           }
       }
       //方法的调用
       obj.song(1,2)

1.3遍历对象

k是属性值，获得对象属性值：

<script>
        // let arr = ['pink','red','blue']
        // for(let k in arr){
        //     console.log(k);//数组的下标 索引号 但是是字符串
        // }

        let obj = {
            uname:'pinK老师',
            age:18,
            gender:'男'

        }
        //2.遍历对象
        for(let k in obj){
            console.log(k);//属性名     'uname' 'age'
            console.log(obj.k);//undefined
            //上面相当于console.log(obj.'uname')

            //'uname'=== k
            console.log(obj[k]);
        }
    </script>

cursor 属性设置光标的类型（如果有），在鼠标指针悬停在元素上时显示相应样式。

联系：

<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 student = [
                { 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 < student.length;i++){
                document.write(`
                <tr>
                    <td>${i+1}</td>
                    <td>${student[i].name}</td>
                    <td>${student[i].age}</td>
                    <td>${student[i].gender}</td>
                    <td>${student[i].hometown}</td>
            </tr>
            `)
            }
        </script>


    </table>

</body>

1.4内置对象

1.内置对象是什么？

js中内部先前定义好的一些属性和方法。

2.内置对象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
        //round 四舍五入
        console.log(Math.round(1.2))
        console.log(Math.round(1.9))
        console.log(Math.round(-1.5));//-2

        //取整函数 parseInt(1.2)    //1
        //取整函数 parseInt(12px)    //12px

        console.log(Math.max(1,2,3,4,5));
        console.log(Math.min(1,2,3,4,5));
        console.log(Math.abs(-1));//绝对值
        console.log(Math.pow(2,2));
    </script>

3.生成任意范围的随机数

<script>
        //Math.random()随机函数，返回一个0~1之间，[0,1)
       // console.log(Math.random());
       //0~10 之间的整数
       //console.log(Math.floor(Math.random()* 11))
        //从N到M之间的整数
        //console.log(Math.floor(Math.random() * (M-N+1))) + N
        //从4到8
        //console.log(Math.floor(Math.random() * 5) + 4)

        let arr = ['red','green','blue']
        let random = Math.floor(Math.random() * arr.length)
        console.log(random)
        console.log(arr[random])


    </script>

JavaScript的对象理解|青训营

对象

1.1 什么是对象？

1.2对象使用

1.3遍历对象

1.4内置对象