理解JavaScript中的对象-js教程-PHP中文网

理解JavaScript中的对象

碧海醫心

发布： 2025-02-06 09:16:01

原创

1089人浏览过

理解javascript中的对象

JavaScript对象是八种基本数据类型中的一种。不同于数字、字符串、布尔值等只存储单个值的原始数据类型，对象可以存储多个值，这些值以键值对的形式组织成属性。键通常是字符串或Symbol类型，值可以是任何数据类型。

对象初始化

const myObj = new Object();
const myObj = {}; // 更常用

登录后复制

访问对象属性

主要有两种方法：点表示法和方括号表示法。

立即学习“Java免费学习笔记（深入）”；

点表示法

用于访问字面量属性名。点表示法更简洁易读，但仅适用于有效的JavaScript标识符（例如，不能包含空格或特殊字符）。

let user = { name: "john", age: 30 };
console.log(user.name); // john

登录后复制

方括号表示法

允许动态访问属性，尤其在以下情况下：

属性名包含空格或特殊字符：例如 myObj["我的电脑"]
使用变量或表达式访问属性值：

let user = { name: "john", age: 30 };
let key = prompt("你想了解用户的什么信息？", "name");
alert(user[key]); // 如果输入 "name"，则输出 john

登录后复制

动态创建属性

方括号表示法也可以用于动态创建属性：

let fruit = prompt("你想买什么水果？", "apple");
let bag = {
    [fruit]: 5 // 属性名来自变量 fruit
};
alert(bag.apple); // 如果 fruit="apple"，则输出 5

登录后复制

这等效于：

let fruit = prompt("你想买什么水果？", "apple");
let bag = {};
bag[fruit] = 5;

登录后复制

原始值与对象

原始值和对象的主要区别在于存储和复制方式：

原始值

按值存储。赋值或传递参数时，会复制值本身。

let message = "hello";
let greeting = message;
message = message + " world!";
console.log(message); // hello world!
console.log(greeting); // hello

登录后复制

对象

按引用存储。复制时，复制的是对象的引用，而不是对象本身。两个变量都指向内存中的同一个对象。

let user = { name: 'john' };
let admin = user;
admin.name = 'pete'; // 通过 "admin" 引用修改
alert(user.name); // 'pete'，"user" 引用也看到了变化

登录后复制

克隆对象

可以使用循环逐个复制属性，但更有效的方法是 Object.assign()：

Object.assign(dest, ...sources)

登录后复制

dest：目标对象，用于复制属性。 sources：要复制属性的对象。

let user = { name: "john", age: 30 };
let clone = Object.assign({}, user);
alert(clone.name); // john
alert(clone.age); // 30

登录后复制

深克隆

当对象包含其他对象时，需要进行深克隆（结构化克隆），确保创建完全独立的副本。JavaScript 提供了 structuredClone() 方法：

let user = {
    name: "john",
    sizes: {
        height: 182,
        width: 50
    }
};
let clone = structuredClone(user);
alert(user.sizes === clone.sizes); // false，不同的对象

user.sizes.width = 60; // 修改一个属性
alert(clone.sizes.width); // 50，两者互不影响

登录后复制

检查属性是否存在

使用 in 运算符：

let user = { name: "John", age: 30 };
alert("age" in user); // true，user.age 存在
alert("blabla" in user); // false，user.blabla 不存在

登录后复制

JavaScript 对象还有许多其他方面值得探索，例如原型和类。掌握基础知识是进一步学习的关键。

以上就是理解JavaScript中的对象的详细内容，更多请关注php中文网其它相关文章！