JS-对象

6次阅读
没有评论

共计 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 >`)

正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-20发表,共计2135字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码