js项目中常见的数据结构 （数组 对象）

本文档对标微软 MSDN 官方技术文档规范，针对前端项目最核心两种原生数据结构：数组 Array、普通对象 Object 进行完整解析。。

说明

JavaScript 中所有引用类型均继承自 Object；Array 是特殊 Object，二者支撑 90% 以上前端业务数据存储场景。

一、Object 普通对象

1.1 底层数据结构

核心特性约束

1.2 对象创建标准写法

javascript

运行

// 推荐：字面量创建（性能最优，工程通用）
const userInfo = {
id: 1001,
username: "admin",
age: 26,
roles: ["editor", "admin"],
address: { city: "郑州", area: "高新区" }
};

// 不推荐：构造函数创建，仅用于空对象初始化
const emptyObj = new Object();

1.3 增删改查完整示例

javascript

运行

const user = { name: "小李" };

// 1. 查询属性
// 点语法：键名合法、无特殊字符时使用
console.log(user.name);

// 方括号语法：动态键、特殊字符、数字键必备
const key = "name";
console.log(user[key]);

// 2. 修改属性：键存在则覆盖
user.name = "小张";

// 3. 新增属性：键不存在直接赋值
user.phone = "13800138000";

// 4. 删除属性：delete 关键字
delete user.phone;

// 5. 批量获取键/值/键值对
const keys = Object.keys(user); // ["name"]
const values = Object.values(user); // ["小张"]
const entries = Object.entries(user); // [["name", "小张"]]

// 6. 遍历对象（过滤原型链属性）
for (const k in user) {
if (user.hasOwnProperty(k)) {
console.log(k, user[k]);
}
}

// 7. Symbol 隐藏键（不会被 Object.keys 枚举）
const secretKey = Symbol("token");
user[secretKey] = "abc123xyz";
console.log(Object.keys(user)); // 仅显示 name，隐藏 Symbol

1.4 业务使用场景

二、Array 数组

2.1 底层数据结构

核心特性约束

2.2 数组创建标准写法

javascript

运行

// 推荐：字面量创建
const list = [1, "文本", false, null, { id: 1 }];

// 构造函数两种用法（谨慎使用）
const arr1 = new Array(5); // 长度5的稀疏空数组 [empty × 5]
const arr2 = new Array(10, 20, 30); // [10,20,30]

2.3 增删改查完整示例

javascript

运行

const data = [10, 20, 30, 40];

// 1. 索引读取
console.log(data[0]); // 10
console.log(data.length); // 4

// 2. 修改指定下标元素
data[1] = 200;

// 3. 尾部增删（性能最优，推荐优先使用）
data.push(50); // 尾部添加 50
data.pop(); // 删除末尾元素

// 4. 头部增删（性能差，大量数据避免）
data.unshift(0); // 头部插入
data.shift(); // 删除头部

// 5. 中间删除/插入 splice
data.splice(1, 1); // 从下标1删除1个元素
data.splice(2, 0, 99); // 下标2插入99

// 6. 遍历数组
data.forEach((item, index) => {
console.log(index, item);
});

// 7. 常用高阶函数（业务筛选、转换）
const filterArr = data.filter(item => item > 10); // 过滤大于10的数据
const mapArr = data.map(item => item * 2); // 批量转换每一项

2.4 数组特殊底层特性示例

javascript

运行

// 1. 稀疏数组（空位会降级性能）
const sparse = [1, , 3];
console.log(sparse[1]); // undefined
console.log(sparse.length); // 3

// 2. 手动修改 length 截断数组
const testArr = [1, 2, 3, 4];
testArr.length = 2;
console.log(testArr); // [1, 2]

// 3. 数组本质是 Object，typeof 判断失效
console.log(typeof []); // "object"
// 精准判断数组必须使用
console.log(Array.isArray([])); // true

2.5 业务使用场景

三、Object vs Array 核心对比表

表格

四、工程开发规范与性能优化

4.1 Object 优化规范

4.2 Array 优化规范

五、综合业务实战示例

场景：用户列表（数组套对象，项目最常用组合）

javascript

运行

// 数组存储多条用户，对象存储单用户信息
const userList = [
{ id: 1, name: "张三", age: 22 },
{ id: 2, name: "李四", age: 25 },
{ id: 3, name: "王五", age: 23 }
];

// 1. 遍历渲染列表
userList.forEach(item => {
console.log(`用户：${item.name}，年龄：${item.age}`);
});

// 2. 根据id查找指定用户（数组遍历查找 O(n)）
const target = userList.find(u => u.id === 2);
console.log(target.name);

// 3. 转为id为key的对象字典，快速查询 O(1)
const userMap = {};
userList.forEach(u => {
userMap[u.id] = u;
});
console.log(userMap[2].name); // 直接按键取值，无需循环

六、文档总结