JS-对象

对象

对象是一个具体的事物
在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 >`)