【前端-初阶-JS】JS对象

1.对象

1.1 什么是对象？

现实生活中：万物皆对象，对象是一个具体地事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是对象，一个数据库、一张网页、一个与远程服务器的连接也可以是对象。

对象在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

• 对象是由属性和方法组成的

• 属性：事物的特征，在对象中用属性来表示（常用名词）

• 方法：事物的行为，在对象中常用方法来表示（常用动词）

1.2 为什么需要对象？

保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。如果要保存一个人的完整信息呢？

例如，将“张三疯”的个人信息保存在数组中的方式为：

 var arr=['张三疯','男',128,154];

JS中的对象表达结构更清晰，更强大。张三疯的个人信息在对象中的表达结构如下：

个人信息	对应表结构
张三疯.姓名='张三疯';	person.name='张三疯';
张三疯.性别='男';	person.sex='男';
张三疯.年龄=128;	person.age=128;
张三疯.身高=154;	person.height=154;

2.创建对象的三种方式

2.1 利用字面量创建对象

对象字面量：就是花括号{}里面包含了表达这个具体事物（对象）的属性和方法。

 <script>
     //var obj = {};//创建了一个空的对象
     var obj = {
         uname: '张三疯',
         age: 18,
         sex: '男',
         sayHi: function () {
             console.log('hi~');
         }
     }
 </script>

• 里面的属性或者方法，我们采取键值对的形式 键 属性名：值 属性值

• 多个属性或者方法之间用逗号隔开

• 方法冒号后面跟的是一个匿名函数

2.2.1 使用对象

1、调用对象的属性 我们采取 对象名.属性名，这个点我们可以理解为 的

console.log(obj.uname);

2、调用对象属性还有一种方法 对象名['属性名']

console.log(obj['age']);

3、调用属性的方法sayHi 对象名.方法名() 千万别忘记添加小括号

obj.sayHi();

练习：按照要求写出对象

请用对象字面量的形式创建一个名字为可可的狗对象

具体信息如下：

• 姓名：可可

• 类型（type）：阿拉斯加

• 年龄：5岁

• 颜色：棕红色

• 技能：汪汪汪（bark）、演电影（showFilm）

 <script>
     var dog = {
         dname: '可可',
         type: '阿拉斯加',
         age: '5岁',
         color: '棕红色',
         skill: '汪汪汪，演电影'
     }
 </script>

2.2.2 变量、属性、函数、方法总结：

①变量：单独声明赋值，单独存在

②属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征。

③方法：方法是对象的一部分，函数不是对象的一部分，函数是单独封装操作的容器。对象里面的函数称为方法，方法不需要声明，使用"对象.方法名()"的方式就可以调用，方法用来描述该对象的行为和功能。

④函数：单独存在的，通过"函数名()"的方式就可以调用。

2.2 利用new Object创建对象

跟我们前面学的new Array()原理一致

 <script>
     var obj = new Object();
     obj.uname = '张三疯';
     obj.age = 18;
     obj.sex = '男';
     obj.sayHi = function () {
         console.log('hi~');
     }
     console.log(obj.uname);
     console.log(obj['sex']);
     obj.sayHi(); // 调用对象中的sayHi()
 </script>

• 利用等号=赋值的方法 添加对象的属性和方法

• 每个属性和方法之间用 分号结束

2.3 利用构造函数创造对象

• 前面两种创建对象的方法一次只能创建一个对象

• 可以利用函数的方法，重复这些相同的代码 我们就把这个函数称为构造函数，这个函数不一样，封装的不是普通代码，而是对象，构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装但函数里面去

• 构造函数的封装格式：

     function 构造函数名(形参1，形参2，形参3...) {
     this.属性名1 = 参数1;
     this.属性名2 = 参数2;
     this.属性名3 = 参数3;
     this.方法名 = 函数体;
   }
   new 构造函数名();

例:

 <script>
     function Star(uname, age, sex) {
         this.name = uname;
         this.age = age;
         this.sex = sex;
         this.sing = function (sang) {
             console.log(sang);
         }
     }
     var ldh = new Star('刘德华', 18, '男');
     console.log(ldh.name);
     console.log(ldh['sex']);
     console.log(ldh['age']);
     ldh.sing('冰雨');
 </script>

• 构造函数名字首字母要大写

• 我们构造函数不需要return就可以返回结果

• 调用构造函数必须使用new

• 我们只要new Star() 调用函数就创建一个对象ldh{}

• 我们的属性和方法前面必须添加this

2.4 构造函数和对象的区别

<script>     
     //1、构造函数 名称：Star-明星 泛指的某一大类
     function Star(uname, age, sex) {
         this.name = uname;
         this.age = age;
         this.sex = sex;
         this.sing = function (sang) {
             console.log(sang);
         }
     }
     //2、对象 特指 是一个具体的事物 
     var ldh = new Star('刘德华', 18, '男');//调用函数返回的是一个对象
     //3、利用构造函数创建对象的过程我们也称为对象的实例化
</script>

• 构造函数：如Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class）

• 创建对象：如new Stars()，特指某一个，通过new关键字创建对象的过程我们也称为对象实例化

3.new关键字

new关键字的作用：

• 1.在构造函数代码开始执行之前，创建一个空对象；

• 2.修改this的指向，把this指向创建出来的空对象；

• 3.执行构造函数内的代码，给这个新对象添加属性和方法

• 4.在函数完成之后，返回这个创建出来的新对象(所以构造函数里面不需要return)

<script>
     function Star(uname, age, sex) {
         this.name = uname;
         this.age = age;
         this.sex = sex;
         this.sing = function (sang) {
             console.log(sang);
         }
     }
     var ldh = new Star('刘德华', 18, '男');
</script>

4.遍历对象

for...in语句对数组或者对象的属性进行循环操作。

语法格式：

for（变量 in 对象）{

}

    <script>
        var obj = {
            name: 'pink',
            age: 18,
            sex: '男',
            fn: function () { }
        }
        // console.log(obj.name);
        // console.log(obj.age);
        // console.log(obj.sex);
        //for in 遍历我们的对象
        for (var k in obj) {
            console.log(k);//得到的是属性名
            console.log(obj[k]);//得到的是里面的属性值 方法也可以遍历出来
        }
    </script>

• 我们使用for in里面的变量 我们喜欢写k或者key

小结：

1. 对象可以让代码结构更清晰

2. 对象复杂数据类型object

3. 本质：对象就是一组无序的相关属性和方法的集合。

4. 构造函数泛指的是指某一大类，比如苹果，不管是红色苹果还是绿色苹果，都统称为苹果。

5. 对象实例特指一个事物，比如这个苹果，正在给你们讲课的pink老师等。

6. for in语句用于对对象的属性进行循环操作。

作业：

1.创建一个电脑对象，该对象要有颜色、重量、品牌、型号、可以看电影、听音乐、打游戏和敲代码。

    <script>
        var computer = {
            color: '红色',
            weight: '5kg',
            logo: '机械革命',
            model: '1.2.1',
            skill: function () {
                console.log('movie');
                console.log('sing');
                console.log('play game');
                console.log('code');
            }
        }
    </script>

函数：

①写一个函数，实现翻转任意数组。

    <script>
        var arr = [5, 4, 3, 2, 1];
        function reverse() {
            var arr1 = [];
            for (var i = arr.length - 1; i >= 0; i--) {
                arr1[arr1.length] = arr[i]
            }
            console.log(arr1);
        }
        reverse();
    </script>

②写一个函数，实现对数字数组的排序。

    <script>
        var arr = [5, 4, 3, 2, 1];
        function bubble() {
            for (var i = 0; i <= arr.length - 1; i++) {
                for (var j = 0; j <= arr.length - (i + 1); j++) {
                    if (arr[j] > arr[j + 1]) {
                        var temp = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = temp;
                    }
                }
            }
            console.log(arr);
        }
        bubble();
    </script>