javascript对象的核心用法是通过键值对存储和组织数据，支持创建、访问、修改、添加、删除及遍历属性；最常用创建方式为对象字面量{}，属性可通过点操作符（.）或方括号操作符（[]）访问和修改，其中方括号适用于动态属性名；删除属性使用delete操作符；遍历方式包括for…in循环（需配合hasownproperty避免原型链干扰）、object.keys()获取键数组、object.values()获取值数组、object.entries()获取键值对数组；与数组的核心区别在于：对象为无序的命名属性集合，适合通过描述性键名访问数据，而数组为有序的数值索引集合，适合按位置访问和操作序列化数据；动态添加或访问属性依赖方括号操作符，允许属性名由变量决定，广泛应用于配置处理、表单操作等灵活场景；推荐使用object.keys()、object.values()和object.entries()进行安全且语义清晰的遍历操作，它们仅作用于对象自身可枚举属性，是现代javascript开发中的首选方法。
JavaScript对象，说白了，就是用来存储和组织数据的，它最核心的用法就是通过“键值对”的形式来存放信息。你可以把它想象成一个贴满标签的盒子，每个标签（键）对应着一个物品（值）。所以，它的基本操作无非就是创建这个盒子，往里放东西，取东西，改东西，或者把东西拿走。
解决方案
JS对象的基本用法，我们可以从几个关键点来展开：
创建对象：最常用、我个人觉得也最直观的方式就是对象字面量（
{}
）。比如：
const myProfile = { name: "张三", age: 30, city: "北京", isStudent: false};
你也可以用
new Object()
，或者构造函数、ES6的类来创建，但对于日常快速定义，字面量简直是神来之笔。
访问属性：有两种主要方式：
点操作符（
.
）： 当你知道属性名时，这是最直接的。
console.log(myProfile.name); // 输出: 张三
方括号操作符（
[]
）： 当属性名是变量、包含特殊字符，或者你需要动态访问时，这个就派上用场了。
const key = "age";console.log(myProfile[key]); // 输出: 30console.log(myProfile["is-active"]); // 假设有这么个属性
这里有个小技巧，如果尝试访问一个不存在的属性，JavaScript不会报错，而是返回
undefined
，这在很多时候非常方便，但也需要注意空值检查。
修改属性：直接通过点操作符或方括号操作符赋值即可。
myProfile.age = 31; // 修改年龄myProfile["city"] = "上海"; // 修改城市
添加属性：和修改属性类似，如果你赋值的属性名之前不存在，它就会被添加进去。
myProfile.occupation = "工程师"; // 添加新属性myProfile["email"] = "zhangsan@example.com"; // 再次添加
删除属性：使用
delete
操作符可以从对象中移除一个属性。
delete myProfile.isStudent;console.log(myProfile); // myProfile中不再有isStudent属性
需要注意的是，
delete
操作符只是移除了属性，并不会影响变量本身。
遍历属性：当你想查看对象里所有东西时，有几种方式：
for...in
循环：会遍历对象自身以及原型链上可枚举的属性。
for (let prop in myProfile) { console.log(`${prop}: ${myProfile[prop]}`);}
Object.keys()
：返回一个包含对象自身所有可枚举属性的键名数组。
const keys = Object.keys(myProfile);console.log(keys); // 例如: ["name", "age", "city", "occupation", "email"]
Object.values()
：返回一个包含对象自身所有可枚举属性的值的数组。
const values = Object.values(myProfile);console.log(values); // 例如: ["张三", 31, "上海", "工程师", "zhangsan@example.com"]
Object.entries()
：返回一个包含对象自身所有可枚举属性的键值对数组（每个键值对又是一个数组）。
const entries = Object.entries(myProfile);console.log(entries); // 例如: [["name", "张三"], ["age", 31], ...]
JavaScript对象与数组有什么核心区别？
在我看来，JavaScript对象和数组，虽然都能用来存储数据，但它们的“设计理念”和“使用场景”是截然不同的。最核心的区别在于它们的数据组织方式和访问机制。
对象，本质上是一个无序的键值对集合。它的“键”（key）通常是字符串（或者Symbol），用来给“值”（value）一个有意义的名字。比如，
{ name: "Alice", age: 25 }
，你通过
name
这个“标签”去取
Alice
这个值。这种结构非常适合表示一个实体的属性，或者说，当你的数据需要通过描述性名称来访问时，对象是首选。它没有固定的顺序，你不能指望
name
总是在
age
前面，因为它们的顺序并不重要，重要的是那个唯一的键。
数组则是一个有序的元素集合。它的“键”是隐式的、从零开始的数字索引。
[ "apple", "banana", "cherry" ]
，你通过
0
取到
apple
，通过
1
取到
banana
。数组的强项在于数据的顺序性，以及通过索引快速访问和遍历。它非常适合存储列表、序列化的数据，或者当你需要对数据进行排序、筛选等操作时。
简单来说，如果你需要给数据贴上“名字标签”，用对象；如果你需要给数据排队、编号，用数组。它们就像工具箱里的螺丝刀和扳手，各有所长，不可替代。当然，实际开发中，对象里可以嵌套数组，数组里也可以包含对象，它们常常是组合使用的。
如何在JavaScript对象中动态添加或访问属性？
动态操作对象属性，这可是JavaScript灵活性的一个体现。说白了，就是属性名不是写死的，而是根据程序运行时的某些条件或变量来确定的。实现这一点，核心就是前面提到过的方括号操作符
[]
。
当属性名是一个变量，或者你需要从外部（比如用户输入、API响应）获取一个字符串作为属性名时，点操作符就无能为力了。这时，方括号就成了你的好帮手。
动态添加属性：假设你想根据用户的选择，给一个
user
对象添加不同的权限。
const user = { id: 101, username: "coder_cat"};const permissionType = "adminAccess"; // 这个值可能是从表单或配置中来的const isActive = true; // 另一个动态值user[permissionType] = isActive; // 动态添加 'adminAccess: true'user["lastLoginDate"] = new Date().toISOString(); // 甚至可以这样添加console.log(user);// 输出: { id: 101, username: "coder_cat", adminAccess: true, lastLoginDate: "2023-10-27T..." }
你看，
permissionType
这个变量的值，直接变成了对象的键。这比你写一堆
if/else
去判断然后写死属性名要优雅得多。
动态访问属性：同样，当你不知道具体要访问哪个属性，但知道它的“名字”存储在一个变量里时：
const userProfile = { firstName: "Jane", lastName: "Doe", email: "jane.doe@example.com"};const propertyToDisplay = "email"; // 假设这是用户选择要显示的信息console.log(userProfile[propertyToDisplay]); // 输出: jane.doe@example.com// 甚至可以用来遍历未知属性function displayInfo(obj, propName) { if (obj[propName] !== undefined) { console.log(`The ${propName} is: ${obj[propName]}`); } else { console.log(`Property '${propName}' not found.`); }}displayInfo(userProfile, "firstName"); // 输出: The firstName is: JanedisplayInfo(userProfile, "phone"); // 输出: Property 'phone' not found.
这种动态性在处理表单数据、配置对象、或者需要高度灵活的数据结构时显得尤为重要。它让你的代码能够适应变化，而不是为每个可能的属性都写死逻辑。
JavaScript对象属性的几种遍历方式及适用场景？
遍历对象属性，就像是打开一个装满各种资料的档案柜，你需要知道哪些资料是你的，以及如何高效地把它们都过一遍。在JavaScript中，有几种主要的遍历方式，它们各有特点和适用场景。
for...in
循环：这是最传统的遍历方式之一。它会遍历对象自身以及其原型链上所有可枚举的属性。
const car = { brand: "Tesla", model: "Model 3", year: 2023};// 假设原型链上有一个方法Object.prototype.greet = function() { console.log("Hello from prototype!");};for (let key in car) { // 强烈建议加上hasOwnProperty检查，避免遍历到原型链上的属性 if (car.hasOwnProperty(key)) { console.log(`${key}: ${car[key]}`); }}// 输出:// brand: Tesla// model: Model 3// year: 2023// 如果没有hasOwnProperty，还会输出 greet: function...
适用场景： 当你需要遍历对象的所有可枚举属性，并且可能需要处理原型链上的属性时（虽然通常不推荐，所以
hasOwnProperty
很重要）。它在一些老旧代码库中比较常见。
Object.keys()
：这个方法返回一个数组，包含了对象自身所有可枚举属性的键名。它不会去管原型链上的属性。
const settings = { theme: "dark", fontSize: "16px", language: "en"};Object.keys(settings).forEach(key => { console.log(`${key}: ${settings[key]}`);});// 输出:// theme: dark// fontSize: 16px// language: en
适用场景： 这是最常用且推荐的遍历方式之一。当你只需要获取并处理对象自身的属性名时，比如生成一个属性列表，或者需要基于属性名进行一些操作。
Object.values()
：与
Object.keys()
类似，但它返回的是一个数组，包含了对象自身所有可枚举属性的值。
const product = { id: "P001", name: "Laptop", price: 1200, inStock: true};const productValues = Object.values(product);console.log(productValues); // 输出: ["P001", "Laptop", 1200, true]productValues.forEach(value => console.log(value));
适用场景： 当你只关心对象里存储的数据值，而不需要知道对应的键时，比如对所有值进行某种汇总计算，或者仅仅想把所有值提取出来作为一个列表。
Object.entries()
：这个方法返回一个数组，其中每个元素又是一个包含键值对的数组（
[key, value]
）。这在我看来，是处理对象属性最全面的方式，因为它同时提供了键和值。
const student = { id: "S001", name: "Alice", grade: "A"};Object.entries(student).forEach(([key, value]) => { // 使用解构赋值 console.log(`Key: ${key}, Value: ${value}`);});// 输出:// Key: id, Value: S001// Key: name, Value: Alice// Key: grade, Value: A
适用场景： 当你需要同时访问键和值，并且可能需要进行映射、过滤或转换操作时。例如，将对象转换为一个键值对的列表，或者在处理API响应时，需要根据键来决定如何处理值。
选择哪种遍历方式，很大程度上取决于你的具体需求：是只需要键？只需要值？还是键值都需要？
Object.keys()
、
Object.values()
、
Object.entries()
这三兄弟是ES6之后非常推荐的用法，它们比
for...in
更安全、更直观，尤其是在现代JavaScript开发中。
以上就是JS对象的基本用法是什么的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1515991.html
微信扫一扫 
支付宝扫一扫 
