JS-对象

共计 2135 个字符，预计需要花费 6 分钟才能阅读完成。

对象

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

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

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

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

创建对象的三种方式

利用字面量创建对象

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

{ } 里面采取键值对的形式表示

键：相当于属性名

值：相当于属性值，可以是任意数据类型（数字、字符串、布尔、函数类型等）

    // 创建了一个空的对象
    let obj = { };

    // 多个属性或方法用逗号隔开
    // 方法冒号后面跟的是一个匿名函数
    let obj = {
        uname: '张三',
        age: 18,
        sex: '男',
        sayHi: function() {
            console.log('Hi');
        }
    }

    // 调用对象的属性，第一种方法：采取对象名.属性名
    console.log(obj.uname);
    // 调用对象的属性，第二种方法：采取对象名.['属性名']
    console.log(obj['uname']);
    // 调用对象的方法，对象名.方法名()
    obj.sayHi();

利用 new Object 创建对象

    // 创建了一个空的对象
    let obj = Object();
    // 添加属性
    obj.uname = '张三';
    obj.age = 18;
    obj.sex = '男';
    obj.sayHi = function() {
        console.log('Hi');
    }
    // 调用对象属性
    console.log(obj.uname);
    // 调用对象的属性，第二种方法：采取对象名.['属性名']
    console.log(obj['uname']);
    // 调用对象的方法，对象名.方法名()
    obj.sayHi();

利用构造函数创建对象

构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用
我们可以把对象中一些公共属性和方法抽取出来，然后封装到这个函数里面

构造函数名首字母大写

    // 创建构造函数
    funciton 构造函数名() {
        this.属性 = 值;
        this.方法 = function() {

        }
    }
    // 调用构造函数
    new 构造函数名();

    function Star(uname, sex, age) {
        this.uname = uname;
        this.sex = sex;
        this.age = age;
        this.sayHi = function (say) {
            console.log(say);
        }
    }
    // 构造函数不需要return就可以返回结果
    // 调用构造函数必须使用new
    let zs = new Star('张三', '男', 18);
    // 调用对象属性
    console.log(zs.uname);
    // 调用对象的属性，第二种方法：采取变量.['属性名']
    console.log(zs['uname']);
    // 调用对象的方法，变量名.方法名()
    zs.sayHi('Hi');

new 关键字

new 关键字执行过程：

1. 在内存中创建了一个新的空对象
2. 让 this 指向这个新的对象
3. 执行构造函数里面的代码，给这个新对象添加属性和方法
4. 返回这个新对象（所以构造函数里面不需要 return）

操作对象

增

对象添加新的数据

对象名.新属性名 = 新值

删

删除对象中的属性

delete 对象名.属性名

改

重新赋值

对象.属性 = 值
对象.方法 = function() { }

查

查询对象

对象.属性
对象.['属性']
对象.方法()

遍历对象属性

    for (let 变量 in 对象) {

    }

    for (let k in obj) {
        // k变量，输出得到的是属性名
        console.log(k);
        // obj[k]得到的是属性值
        console.log(obj[k]);
    }
    // k === ''uname' === 'age' ==='sex'
    // 代入到   obj['uname']

小案例

    let students = [
        { name: '小明', age: 18, gender: '男', hometown: '河北省' },
        { name: '小红', age: 19, gender: '女', hometown: '河男省' },
        { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
        { name: '小丽', age: 16, gender: '女', hometown: '山东省' },
        { name: '小明', age: 18, gender: '男', hometown: '河北省' },
    ]
    document.write(`
        <table>
            <caption>学生列表</caption>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>家乡</th>
            </tr>
    `)
    for (let i = 0; i < students.length; i++) {
        document.write(`
            <tr>
                <td>${i + 1}</td>
                <td>${students[i].name}</td>
                <td>${students[i].age}</td>
                <td>${students[i].gender}</td>
                <td>${students[i].hometown}</td>
            </tr>
        `)
    }

    document.write(`</table >`)