JavaScript 对象基础笔记

📅 2026/7/12 10:32:58 👁️ 阅读次数 📝 编程学习
JavaScript 对象基础笔记

一、对象的创建方式(2种核心)

1. 构造函数方式(new Object())

语法:let 对象名 = new Object();

说明:创建一个空对象,需后期手动添加属性和方法。

示例:let obj1 = new Object(); // 空对象

2. 字面量方式(推荐)

语法:let 对象名 = {};

说明:底层依然调用 new Object(),写法更简洁,可创建时直接定义属性/方法。

示例1(空对象):let obj2 = {};

示例2(带属性):let obj3 = { name: "tina", age: 18 };

二、对象属性的操作(4种核心操作)

核心:无论哪种创建方式,都可后期添加、修改、删除、读取属性。

1. 添加属性(2种语法)

语法1:对象.属性名 = 属性值(最常用)

示例:obj1.name = "jack"; // 给obj1添加name属性,值为jack

obj3.address = "合肥"; // 给已创建的obj3后期添加address属性

语法2:对象[属性名] = 属性值(需注意引号)

注意:属性名需为字符串类型(纯数字可省略引号)。

示例:obj3["name"] = "dana"; // 给obj3添加name属性

2. 修改属性

语法:对象.属性名 = 新值 / 对象[属性名] = 新值

规则:若对象中已有该属性,就是修改;若没有,就是新增。

示例:obj3.name = "tim"; // 修改obj3的name属性值为tim

3. 删除属性

语法:delete 对象.属性名 / delete 对象[属性名]

示例:delete obj3.name; // 删除obj3的name属性

4. 读取属性

语法:对象.属性名 / 对象[属性名]

注意:读取对象中不存在的属性,不会报错,返回 undefined。

示例:console.log(obj3.gender); // 读取存在的属性,返回对应值

console.log(obj3.abc); // 读取不存在的属性,返回 undefined

三、必须使用 [] 操作属性的2种情况(重点易错)

1. 属性名包含特殊字符(如数字、@、-等)

示例:obj3["123"] = 456; // 属性名是纯数字,需用[]

obj3["abc@123"] = "test"; // 属性名含@,需用[]

2. 属性名是变量(动态属性名)

说明:属性名由变量决定,此时不能用.语法,也不能给变量加引号。

示例:let att = prompt("请输入属性名"); // 变量att存储用户输入的属性名

obj3[att] = 456; // 用变量作为属性名,添加属性

四、练习题(巩固应用)

需求:完成对象的创建、添加、读取、修改、删除操作

  1. 用new Object()创建对象obj;

  2. 给obj添加name、gender、age三个属性;

  3. 读取并输出obj的name属性;

  4. 将obj的name属性修改为"jack";

  5. 删除obj的age属性。

答案:

let obj = new Object(); // 1. 创建对象

obj.name = "张三"; obj.gender = "男"; obj.age = 20; // 2. 添加属性

console.log(obj.name); // 3. 读取属性

obj.name = "jack"; // 4. 修改属性

delete obj.age; // 5. 删除属性

五、核心记忆点

  • 创建对象:new Object() 或 {}(字面量优先);

  • 属性操作:新增/修改(=赋值)、删除(delete)、读取(.或[]);

  • []语法的特殊用途:特殊字符属性名、变量属性名;

  • 读取不存在的属性 → 返回 undefined。