对象数组的创建与操作
🎯 引言
通过学习这篇文章，你将掌握 JavaScript 中对象和数组的核心操作技巧，理解如何创建、访问、修改以及遍历这些数据结构。不仅如此，还能学会实用的方法来处理日常开发中常见的数据操作问题，帮助你写出更简洁高效的代码，为后续学习更复杂的前端知识打下坚实基础。
📦 对象的基础操作
JavaScript 中对象是存储各种键值对（key-value）的容器。对象的键一般是字符串，值可以是任意类型。
创建对象
创建对象的方法有好几种，最常用的是字面量写法：
var person = {
name: '小明',
age: 20,
city: '北京',
};
也可以使用 new Object()：
var person = new Object();
person.name = '小明';
person.age = 20;
person.city = '北京';
访问对象属性
访问对象的属性有两种方式：
console.log(person.name); // 直接用点语法
console.log(person['age']); // 用中括号语法
修改和添加属性
修改属性很简单，直接赋值即可。如果属性不存在，则是添加。
person.city = '上海'; // 修改已有属性
person.gender = '男'; // 新增属性
删除属性
用 delete 关键字可以删除对象的属性。
delete person.age;
console.log(person);
遍历对象
使用 for...in 可以遍历对象的所有可枚举属性。
for (var key in person) {
console.log(key, person[key]);
}
for...in 会遍历包括继承的属性，如果只想遍历对象自身的属性，推荐用 hasOwnProperty 检查：for (var key in person) {
if (person.hasOwnProperty(key)) {
console.log(key, person[key]);
}
}
🧩 数组的基础操作
数组是有序的数据集合，存储一系列数值、字符串或者其他对象。
创建数组
常见创建方式：
var arr1 = [10, 20, 30];
var arr2 = new Array(3); // 创建长度为3的空数组
访问数组元素
通过索引访问，索引从 0 开始。
console.log(arr1[0]); // 10
console.log(arr1[2]); // 30
修改数组元素
直接赋值即可：
arr1[1] = 25;
console.log(arr1); // [10, 25, 30]
数组常用方法介绍
数组方法是前端开发中最常用的部分，理解这些方法能极大提升工作效率。
✨ 数组添加和删除元素
JavaScript 数组提供了多种方法添加和删除元素。
var fruits = ['苹果', '香蕉', '橙子'];
push： 在数组末尾添加元素
fruits.push('葡萄');
console.log(fruits); // ['苹果', '香蕉', '橙子', '葡萄']
pop： 删除并返回数组最后一个元素
var lastFruit = fruits.pop();
console.log(lastFruit); // '葡萄'
console.log(fruits); // ['苹果', '香蕉', '橙子']
unshift： 在数组开头添加元素
fruits.unshift('草莓');
console.log(fruits); // ['草莓', '苹果', '香蕉', '橙子']
shift： 删除并返回数组第一个元素
var firstFruit = fruits.shift();
console.log(firstFruit); // '草莓'
console.log(fruits); // ['苹果', '香蕉', '橙子']
🔍 查找元素和判断
indexOf：查找元素位置，找不到返回 -1
var pos = fruits.indexOf('香蕉');
console.log(pos); // 1
includes：判断元素是否存在，返回布尔值
var hasApple = fruits.includes('苹果');
console.log(hasApple); // true
🔄 遍历数组
传统 for 循环：
for (var i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
forEach 方法：
fruits.forEach(function (item, index) {
console.log(index, item);
});
for 和 forEach，之后可以慢慢接触更高级的遍历方法。💡 结合对象和数组：数组中存储对象
实际项目中，数组里往往存放的是对象，比如用户列表：
var users = [
{ id: 1, name: '小张' },
{ id: 2, name: '小李' },
{ id: 3, name: '小王' },
];
查找对象
假设想找 id 为 2 的用户，我们可以用循环：
var user = null;
for (var i = 0; i < users.length; i++) {
if (users[i].id === 2) {
user = users[i];
break;
}
}
console.log(user); // { id: 2, name: '小李' }
修改对象
修改 id 为 3 的用户名称：
for (var i = 0; i < users.length; i++) {
if (users[i].id === 3) {
users[i].name = '小王子';
break;
}
}
console.log(users);
🔧 实用小技巧
合并数组
使用 concat 合并两个数组：
var arrA = [1, 2];
var arrB = [3, 4];
var combined = arrA.concat(arrB);
console.log(combined); // [1, 2, 3, 4]
数组转字符串
用 join 把数组元素用指定字符连接成字符串：
var str = fruits.join('，');
console.log(str); // 苹果，香蕉，橙子
🧾 小节总结
- JavaScript 对象是一组键值对，通过点语法或中括号访问和修改属性。
- 数组提供丰富的方法，能方便地增删改查元素，遍历数组也很简单。
- 结合对象和数组，可以管理复杂数据，适合存储列表数据。
- 常用数组方法如
push、pop、shift、unshift，还有排序sort和遍历forEach，是前端开发的基础利器。
❓ 知识问答（Q&A）
Q：如何给对象动态添加属性？
A：直接用赋值语句给不存在的属性赋值即可，比如 obj.newProp = value;。
Q：数组的 pop 和 shift 有什么区别？
A：pop 删除并返回数组末尾元素，shift 删除并返回数组开头元素。
Q：遍历对象时，如何避免遍历继承属性？
A：使用 hasOwnProperty 判断属性是否是对象自身的。
🧪 小练习
请根据以下模板代码，完成两个操作：
- 向数组
students末尾添加一个新学生对象，包含name和score属性。
- 向数组
- 遍历
students，打印所有学生的姓名和成绩。
- 遍历
var students = [
{ name: '小红', score: 90 },
{ name: '小刚', score: 85 },
];
// 在这里添加代码
🎉 恭喜你已经掌握了 JS 对象和数组的基础操作、遍历、修改和实用方法啦！继续练习，你会发现它们在前端开发中的强大和灵活。