【JavaScript】对象 ① ( 对象概念 | 对象使用场景 | 使用字面量创建对象 | 空对象字面量 | 小括号 / 中括号 / 大括号作用 )

韩曙亮

发布于 2024-04-20 08:43:20

530

发布于 2024-04-20 08:43:20

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

一、JavaScript 对象

1、对象概念

在 JavaScript 中 , 对象是一种复杂的数据类型 , 是一组无序的相关属性和方法的集合 , 这些属性值允许存储各种数据类型值 ;

对象由属性和方法组成 :

属性 : 事物特征 , 具体就是对象中的变量 ;
方法 : 事物行为 , 具体就是对象中的函数 ;

JavaScript 对象可以理解为由键值对组成 ;

键是字符串 , 表示属性的名称 ;
值是任何数据类型 , 表示属性的值 ;

2、对象使用场景

对象的使用场景 :

保存单个值 , 使用变量即可 ;
保存多个值 , 使用数组即可 ;
保存多个值并表示不同的信息 , 使用对象 ;

数组也可以保存多个不同类型的值 , 如 :

var arr = ['Tom', 18];

只能知道数组中有一个字符串和一个 number 类型的值 ;

如果想要表示 , 第一个字符串元素是姓名 name , 第二个数字类型是年龄 age , 这就是两个键值对了 , 此时需要使用对象进行保存 ;

JavaScript 对象的结构要比数组结构更清晰 , 强大 ;

下面的 person 对象就是将 ['Tom', 18] 数组的数据转为对象进行存储 ;

var person = {  
    name: "Tom",  
    age: 18,  
    hello: function() {  
        return this.name+ " is " + this.age + " years old";  
    }  
};

上述为 person 变量赋值的是一个对象字面量 ;

二、使用字面量创建对象

JavaScript 中有 3 种创建对象的方式 :

使用字面量创建对象 ;
使用 new 关键字创建对象 ;
使用构造函数创建对象 ;

1、使用字面量创建对象

对象字面量是花括号 {} 中定义多个键值对表示对象的属性和方法 , 键值对之间使用逗号 , 隔开 ,

下面就是一个对象字面量 , name 和 age 分别是属性变量名称 , 'Tom' 和 18 分别是属性变量值 , hello 是对象方法的名称后面的函数表达式就是函数的具体内容 ;

{  
    name: "Tom",  
    age: 18,  
    hello: function() {  
        return this.name+ " is " + this.age + " years old";  
    }  
};

将上述对象字面量赋值给一个 var 声明的变量 , 就是创建了一个对象 ;

var person = {  
    name: "Tom",  
    age: 18,  
    hello: function() {  
        return this.name+ " is " + this.age + " years old";  
    }  
};

如果对象字面量的大括号中为空 , 则创建了一个空的字面量 , 后期使用 . 运算符为对象填充属性和方法 ;

        // 创建一个空对象
        var person = {};

        // 后期逐渐为空对象填充属性和方法
        person.name = 'Tom';
        person.age = 18;
        person.hello = function() {
            console.log(this.name + " is " + this.age + " years old");
        };

2、小括号 / 中括号 / 大括号作用

JavaScript 中小括号 / 中括号 / 大括号作用 :

小括号是结合运算符 , 是拥有最高的优先级的运算符 ;
中括号是数组字面量的标志 , 如 : ['Tom', 18] 这是一个数组字面量 ;
大括号是对象字面量的标志 , 使用字面量创建对象中 , 就是使用大括号构造了一个对象字面量 ;

3、代码示例 - 使用字面量创建对象

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 创建对象

        var person = {
            name: "Tom",
            age: 18,
            hello: function() {
                console.log(this.name + " is " + this.age + " years old");
            }
        };

        // 访问对象中的属性
        console.log("name : " + person.name + " , age : " + person.age);

        // 调用对象中的方法
        person.hello();
    </script>
</head>

<body>
</body>

</html>

执行结果 :

4、代码示例 - 使用字面量创建空对象

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 创建对象

        // 创建一个空对象
        var person = {};

        // 后期逐渐为空对象填充属性和方法
        person.name = 'Tom';
        person.age = 18;
        person.hello = function() {
            console.log(this.name + " is " + this.age + " years old");
        };

        // 访问对象中的属性
        console.log("name : " + person.name + " , age : " + person.age);

        // 调用对象中的方法
        person.hello();
    </script>
</head>

<body>
</body>

</html>

执行结果 :