JS基础第七节

65 阅读1分钟

对象

1.什么是对象?

对象(object):JavaScript里的一种数据类型

无序的数据集合

2.对象怎么使用?
<script>
        let obj = {
         // 属性名 : 属性值 用 , 号隔开
            name : '小明',
            age : 18,
        // 方法名 :函数
            color : function name() {
                
            }
        }
 // 使用对象
        // 方法一
        console.log(obj.age);
        // 方法二 一定要加分号
        document.write(obj['name'])
    </script>
对象中方法的访问
 <script>
        let arr = {
            sayHello:function () {
                document.write('我就不打招呼')
            }
        }
    //记得一定要加()
        arr.sayHello()
    </script>
拓展小知识
 <script>
       
        let name = 'color'
        let person = {
            name:'路飞',
            color:'yellow'
        }

        console.log(person.name); //输出:路飞
        console.log(person['name']);//输出:路飞
        console.log(person[name]);//输出:yellow 当没有''时,里面的东西表示变量
        console.log(person[color]); //报错

        

    </script>

新增对象的属性和方法

 <script>
        let person = {
            name : '牛牛'
        }
        // 如果没有name这个属性名,那就是新增,如果有,那就是修改
        person.name = '三三'
        // 新增
        person.sum = function () {
            document.write('你真好')
        }
    </script>

删除对象中的属性

<script>
        let person ={
            name: '海贼王'
        }
        delete person.name
        console.log(person.name); //输出:undefine
    </script>

遍历对象

<script>
        let person = {
        name: '芳芳',
        age: 20,
        height:166
    }

    for (let  k in person) {
        document.write(`属性名:${k}`)
        document.write(`属性值:${person[k]}`) 
    }

    //注意,输出属性值的写法是固定的 对象名[key],不要加字符串!!!!
    </script>
案例学生列表
<style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        table{
            margin: 100px auto;
           border-collapse: collapse;

        }
        th,td{
            width: 100px;
            height: 50px;
            text-align: center;
        }
        th{
            background-color: #ccc;
        }
    </style>
</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: '山东省'}
                ]
         
        let trHtml = `<table border="1">
        <caption>学生列表</caption>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>家乡</th>
        </tr>`

          for (let index = 0; index < students.length; index++) {
                  
            trHtml += ` <tr>
            <td>${index + 1}</td>`
             for (let k in students[index]) {
                trHtml += `<td>${students[index][k]}</td>`
             }

            trHtml += ` </tr>`
          }    
          
          trHtml += `</table>`
          document.write(trHtml)
    </script>

内置对象

 <script>
        // 随机生成0-1的数,包括0,不包括1
    console.log(Math.random()); //0.4341014536610355

    // 向上取整
    console.log(Math.ceil(0.7)); //1
      
    //   向下取整
    console.log(Math.floor(1.8)); //1
    // 最大值
      console.log(Math.max(1,3,5,7,99)); // 99
      
    //   四舍五入
    console.log(Math.round(4.7)); //5
    //   最小值
    console.log(Math.min(2,4,1,6)); //1
    //   幂运算,平方,立方,n次方
    console.log(Math.pow(2,3)); //8
    console.log(Math.pow(2,2)); //4
      
    // 绝对值 
    console.log(Math.abs(-6));//6
      

    </script>

生成随机数

<script>
        //  0-10
     Math.floor(Math.random() * 11)   
     Math.round(Math.random() * 10)   

    //  5-10 

    Math.round(Math.random() * 5)  + 5
     </script>

案例,随机点名

 let num = ['赵云','黄忠','关羽','张飞','马超','刘备','曹操']

       function getRandom(max,min) {

        return    Math.round(Math.random() * (max - min))  + min  
           
       }

        

       while(num.length > 0){
        let num1 = getRandom(num.length - 1,0)
         console.log(num[num1]);
         num.splice(num1,1)
       }
       




    //  for (let i = 0; i <= 6; i++) {
    //      let arr = Math.round(Math.random() * (6 - i))
    //      document.write(num[arr])
    //      num.splice((arr),1)    
        
    //  }

引用数据类型

1.数组

2.对象

3.函数