学习Javascript中的对象

1.什么是对象

对象（Object）：Javascript里面的一种数据类型（引用类型），也是用于存储数据的。

好处：可以用来详细的描述某个事物，是用键值对形式存储语义更明了。

特点：对象数据是无序的，数组是有序的。

注意：声明对象要使用大括号{}，大括号就是对象字面量。

2.对象组成

属性：事物的描述信息，比如身高，年龄等

方法：事物的行为性成为方法。跑步，唱歌等

let student1 = {
    sname:'张三',
    age:18,
    sex:'男',
    className:'软件工程'
}

let student1 = {
    study: function(){
        console.log('正在学习~~~~');
    }
}

3.对象使用-属性

1.定义对象属性：属性都是成对出现的，包括属性名和属性值。

2.访问对象属性：访问对象属性可以得到里面的值。

let student1 = {
            sname: '张三',
            sage: 20,
            sgender: '男',
            sclass: '101',
            sgrade: 10
        }
        console.log(student1.sname); // 张三
        console.log(student1.sage); // 20
        console.log(student1.sgender); // 男
        console.log(student1.sclass); // 101
        console.log(student1.sgrade); // 10

        // 给对象添加属性
        student1.saddress = '北京市海淀区';
        console.log(student1.saddress); // 北京市海淀区

        // 修改对象属性
        student1.sage = 21;
        console.log(student1.sage); // 21

        // 删除对象属性
        delete student1.saddress;
        console.log(student1.saddress); // undefined

        // 遍历对象属性
        for (let key in student1) {
            console.log(key); // sname, sage, sgender, sclass, sgrade, saddress
        }

4.对象使用-方法

1.定义对象方法：方法时成对出现的，包括方法名和匿名函数。

2.调用对象方法：通过对象.方法（），可以调用方法。

 <script>
        let student1 = {
            sname: '张三',
            sage: 20,
            sgender: '男',
            sclass: '101',
            sgrade: 10,
            study:function(){
                console.log('正在学习');
            }
        }
        console.log(student1.sname); // 张三
        console.log(student1.sage); // 20
        console.log(student1.sgender); // 男
        console.log(student1.sclass); // 101
        console.log(student1.sgrade); // 10

        // 给对象添加属性
        student1.saddress = '北京市海淀区';
        console.log(student1.saddress); // 北京市海淀区

        // 修改对象属性
        student1.sage = 21;
        console.log(student1.sage); // 21

        // 删除对象属性
        delete student1.saddress;
        console.log(student1.saddress); // undefined

        // 遍历对象属性
        for (let key in student1) {
            console.log(key); // sname, sage, sgender, sclass, sgrade, saddress
        }
        //调用方法
        student1.study();
    </script>

5.操作对象-增删改查

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

1.查询对象：对象.属性

2.修改对象：对象.属性=新值

3.增加对象内容：对象.新属性=新值 对象.新方法名=function(){}

4.删除对象内容：delete 对象名.属性名

 <script>
        //对象操作
        let person = {
            name: "张三",
            age: 20,
            gender: "男",
            
            run:function(){
                console.log(this.name + "正在奔跑...");
            }
        }

        //1.查找对象属性
        console.log(person.name); //张三
        console.log(person.age); //20
        console.log(person.gender); //男
        person.run(); //张三正在奔跑...

        //2.修改对象属性
        person.age = 21;
        console.log(person.age); //21
        console.log(person); //{name: "张三", age: 21, gender: "男", run: ƒ}

        //3.添加对象属性
        person.city = "北京";
        console.log(person.city); //北京
        console.log(person); //{name: "张三", age: 21, gender: "男", run: ƒ, city: "北京"}

        //4.删除对象属性
        delete person.age;
        console.log(person.age); //undefined
        console.log(person); //{name: "张三", gender: "男", run: ƒ, city: "北京"}
    </script>

6.对象操作-[]

查的另一种写法

对于多词属性比如中横线分割的属性，点操作就不能用了。

可以使用：对象[‘属性’]的方法，单引号双引号都可以。

<script>
    let person = {
        'student-name':"张三",
    }
    //获取属性
    console.log(person['student-name']); //张三
</script>

多词属性或者需要解析变量的时候使用[]语法，其余直接使用点语法。

7.遍历对象

for遍历对象会有问题，因为对象没有长度。

所以需要采用 for in遍历对象.

语法：

for(let 变量 	in 对象){
    console.log(变量);
    console.log(对象[变量])
}

 <script>
        // 创建对象
        let obj = {
            name: "John",
            age: 30,
            city: "New York"
        }

        // 遍历对象
        for (let key in obj) {
            // 输出对象属性和值
            //只能使用[]访问属性，不能使用.访问属性，因为key是字符串，而.只能访问对象属性
            console.log(key + " : " + obj[key]);// name : John age : 30 city : New York
        }
    </script>

for in 语法中的k是一个变量，子啊循环的过程中依次代表对象的属性名。

由于k是变量，所以必须使用[]语法解析

一定记住：k是获取对象的属性名，对象名[k]是获取属性值

一般不使用这种方式遍历数组，主要是用来遍历对象。

8.遍历对象数组-渲染数据

<!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>
</head>

<body>
    <!-- 渲染表格 -->

    <table border="1">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>籍贯</th>
        </tr>
        <!-- 遍历对象数组 -->
        <script>
            // 定义一个对象数组
            var arr = [
                { name: '张三', age: 20, sex: '男', hometown: '北京' },
                { name: '王五', age: 30, sex: '男', hometown: '广州' },
                { name: '赵六', age: 35, sex: '女', hometown: '深圳' },
            ]
            // 遍历对象数组
            for (var i = 0; i < arr.length; i++) {
                document.write("<tr>")
                document.write("<td>" + (i + 1) + "</td>")
                document.write("<td>" + arr[i].name + "</td>")
                document.write("<td>" + arr[i].age + "</td>")
                document.write("<td>" + arr[i].sex + "</td>")
                document.write("<td>" + arr[i].hometown + "</td>")
                document.write("</tr>")
            }
        </script>
    </table>
</body>

</html>

9.内置对象

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

比如Math对象，是js提供的一个数学对象

var x = Math.PI; // 返回 PI
var y = Math.sqrt(16); // 返回 16 的平方根

Math 对象方法

方法	描述
abs(x)	返回 x 的绝对值。
acos(x)	返回 x 的反余弦值。
asin(x)	返回 x 的反正弦值。
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)	对数进行上舍入。
cos(x)	返回数的余弦。
exp(x)	返回 Ex 的指数。
floor(x)	对 x 进行下舍入。
log(x)	返回数的自然对数（底为e）。
max(x,y,z,…,n)	返回 x,y,z,…,n 中的最高值。
min(x,y,z,…,n)	返回 x,y,z,…,n中的最低值。
pow(x,y)	返回 x 的 y 次幂。
random()	返回 0 ~ 1 之间的随机数。
round(x)	四舍五入。
sin(x)	返回数的正弦。
sqrt(x)	返回数的平方根。
tan(x)	返回角的正切。
tanh(x)	返回一个数的双曲正切函数值。
trunc(x)	将数字的小数部分去掉，只保留整数部分。

<!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>
</head>
<body>
    <script>
        // Math对象
        console.log(Math.PI); // 3.141592653589793
        console.log(Math.E); // 2.718281828459045
        console.log(Math.round(3.14)); // 3
        console.log(Math.floor(3.14)); // 3
        console.log(Math.ceil(3.14)); // 4
        console.log(Math.random()); // 0.12345678901234567  

  
        console.log(Math.max(1, 2, 3, 4, 5)); // 5
        console.log(Math.min(1, 2, 3, 4, 5)); // 1
        console.log(Math.pow(2, 3)); // 8
        console.log(Math.sqrt(16)); // 4
        console.log(Math.abs(-3)); // 3
        console.log(Math.sin(Math.PI/2)); // 1
        console.log(Math.cos(Math.PI/2)); // 6.123233995736766e-17
        console.log(Math.tan(Math.PI/4)); // 0.9999999999999999

        console.log(Math.asin(1)); // 1.5707963267948966
        console.log(Math.acos(0)); // 1.5707963267948966
        console.log(Math.atan(1)); // 0.7853981633974483
        console.log(Math.atan2(1, 2)); // 0.4636476090008061

        console.log(Math.exp(1)); // 2.718281828459045
        console.log(Math.log(2)); // 0.6931471805599453
        console.log(Math.log10(10)); // 1
        console.log(Math.log2(8)); // 3

        console.log(Math.pow(2, 3)); // 8
        console.log(Math.sqrt(16)); // 4
        console.log(Math.cbrt(27)); // 3
        console.log(Math.hypot(3, 4)); // 5

    </script>
</body>
</html>

Math随机数

Math.random()随机数，返回0–1之间，并且是包括0，但是它不包括1的随机小数。

 <script>
        // 生成随机数
        function randomNum() {
            return Math.random();
        }

        // 调用函数生成随机数
        console.log(randomNum());

        // 随机整数
        function randomInt(min, max) {
            // 随机数范围为 [min, max]
            // 因此需要生成 [min, max] 之间的随机整数
            // 因此需要生成 [0, max - min] 之间的随机数
            // 然后加上 min 即可得到 [min, max] 之间的随机整数
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        //5-15之间的随机数

        console.log(randomInt(5, 15));

        
        // 调用函数生成随机整数
        console.log(randomInt(1, 100));
    </script>

10.demo 随机显示名字案例

 <script>
        //请把['张三', '李四', '王五', '赵六']随机显示一个名字到页面中
        //创建数组
        let names = ['张三', '李四', '王五', '赵六', '田七'];
        //生成随机数
        // Math.floor(Math.random() * (3 + 1));
        let random = Math.floor(Math.random() * names.length);
        //随机生成名字
        document.write(names[random]);
    </script>