js第n+4天

对象

什么是对象

保存网站用户信息，比如姓名，年龄，电话号码… 用以前学的数据类型方便吗？不方便，很难区分

我们需要学习一种新的数据类型，可以详细的描述某个事物

对象（object）：JavaScript里的一种数据类型，可以理解为是一种无序的数据集合

语法：let 对象名 = {}

    <script>
        let person = {}
    </script>

对象有属性和方法组成

属性：信息或叫特征（名词）。 比如 手机尺寸、颜色、重量等… 方法：功能或叫行为（动词）。 比如 手机打电话、发短信、玩游戏…

    <script>
        let person = {
            属性名：属性值,
            方法名：函数
        }
    </script>

    <script>
        //对象属性没有顺序,属性和值是用冒号隔开，多个属性用逗号隔开
        let person = {
            uname:'andy',
            sex:'男',
            age:18
        }
    </script>

对象中属性

两种方式进行属性访问

    <script>
        let person = {
            uname:'andy',
            sex:'男',
            age:18
        }
        console.log(person.uname)
        console.log(person.sex)
        console.log(person['age'])
    </script>

对象中方法

    <script>
        let person = {
            uname:'andy',
            //方法是由方法名和匿名函数组成,由冒号分隔
            sayHi:function(){
                document.write('hi')
            }
        }
    </script>

方法访问

    <script>
        let person = {
            uname:'andy',
            //方法是由方法名和匿名函数组成
            sayHi:function(){
                document.write('hi')
            }
        }
        //对象名+.+方法名+（）
        person.sayHi()
    </script>

操作对象

查询对象：就是查询对象的属性和方法

增加新数据：添加新的属性名

    <script>
        let person = {
            uname:'andy',
            age:18
        }
        person.hobby = '足球'
        person['sex'] = '男'
        console.log(person)
    </script>

重新赋值:对已有的属性进行修改

    <script>
        let person = {
            uname:'andy',
            sex:'女',
            age:18
        }
        person.uname = 'sondy'
        person.age = '22'
        person.sex = '男'
        console.log(person)
    </script>

删除属性:delete加属性名就能删除

    <script>
        let person = {
            uname:'andy',
            sex:'女',
            age:18
        }
        delete person.uname
        delete person.age 
        delete person.sex 
        console.log(person)
    </script>

新增方法

对象名+.+方法名+（）

无论是属性或是方法，同一个对象中出现名称一样的，后面的会覆盖前面的。

    <script>
        let person = {
            uname:'andy',
            sayHi:function(){
                document.write('hi')
            }
        }
        person.move = function(){
            document.write('移动一点')
        }
        person.sayHi()
        person.move()
    </script>

遍历对象

能够遍历输出对象里面的元素 对象没有像数组一样的length属性,所以无法确定长度 对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标

for in 语法

for in语法一般用来遍历对象

    <script>
        let person = {
            uname:'andy',
            sex:'男',
            age:18
        }
        //key获得对象的属性名，person对应的是对象名
        for (let key in person) {
            console.log(key) //输出key为属性的名称
            console.log(person[key])//输出person[key]为属性的值
        }
    </script>

案例1

请把下面数据中的对象打印出来

    <script>
        let students = [
            {
                name: '小明', age: 18, gender: '男', hometown: '河北省'
            },
            {
                name: '小红', age: 19, gender: '女', hometown: '河南省'
            },
            {
                name: '小刚', age: 17, gender: '男', hometown: '山西省'
            },
            {
                name: '小丽', age: 18, gender: '女', hometown: '山东省'
            }
        ]

        let content = `<table>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>地址</th>
    </tr>`
        //一排上，序号+对象里面的所有属性，形成一行，循环四次。
        for (let index = 0; index < students.length; index++) {
            content += `<tr><td>${index + 1}</td>`
            for (let key in students[index]) {
                let num = students[index]
                content += `<td> ${num[key]} </td>`

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

内置对象

JavaScript内部提供的对象，包含各种属性和方法给开发者调用

之前使用过的有 document.write() console.log()

内置对象Math

    <script>
        //随机数0~1，包含0，不包含1
        Math.random
        //四舍五入
        Math.round
        //向上取整
        Math.ceil(0.3)
        console.log(Math.ceil(1.3))
        //向下取整
        Math.floor(0.4)
        console.log(Math.floor(1.4))
        //求最大值
        console.log(Math.max(1, 2, 45, 6, 3, 6))
        //求最小值
        console.log(Math.min(2, 4, 1, 4, 5, 6, 32))
        //幂运算，平方，立方
        //第一个2是值，第2个3是乘的次数
        Math.pow(2, 3)//2*2*2
        console.log(Math.pow(2,3))
        //绝对值 -1=1，-3=3
        console.log(Math.abs(-12))
    </script>

案例2

如何生成0-10的随机数呢？

    <script>
        //先取整，再取0~1的随机数*10
        Math.round(Math.random()*10)
        console.log(Math.round(Math.random()*10))
    </script>

推导公式

    <script>
        //求一个数与另一个数的随机数
        function getRandom(min,max) {
            console.log(Math.round(Math.random()*(max - min)+min))
        }
        getRandom(3,10)
    </script>

案例3

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

    <script>
    let name = ['张飞', '曹操', '黄盖', '周瑜', '吕布', '赵云']
    //0到5的随机数
    function getRandom(min,max) {
            return(Math.round(Math.random()*(max - min)+min))
        }
    let num = getRandom(0,name.length - 1)//0到5
    console.log(name[num])   
    </script>

案例4

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

      <script>
        let name = ['张飞', '曹操', '黄盖', '周瑜', '吕布', '赵云']
        //0到5的随机数
        function getRandom(min, max) {
            return(Math.round(Math.random() * (max - min) + min))
        }
    
        while (name.length > 0) {
            //随机选出0到5的一个数字
            let num = getRandom(0, name.length - 1)
            //输出随机数字的数组下标
            console.log(name[num])
            //删除出现的数组下标
            name.splice(num,1)
        }
    </script>

案例5

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

如果大于该数字，就提示，数字猜大了，继续猜 如果小于该数字，就提示，数字猜小了，继续猜 如果猜对了，就提示猜对了，程序结束

    <script>
        let num = Math.round(Math.random() * 9 + 1)
        while (true) {
            let num1 = +prompt('猜数字')
            if (num1 > num) {
                alert('猜大了')
            }else if(num1 < num){
                alert('猜小了')
            }else{
                alert('猜对了')
                break
            }
        }

    </script>

数据类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型 string ，number，boolean，undefined，null

引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型 通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

基本数据类型

栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；简单数据类型存放到栈里面

引用数据类型

堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收；引用数据类型存放到堆里面