当前位置：首页 > news >正文

JavaScript》》JS》》ES6》》数组自定义属性

news 2025/9/4 13:47:12

自定义属性数组是特殊的对象

给数组添加自定义属性是一种利用了“数组也是对象”这一语言特性的技巧。

在这里插入图片描述

const myArray = ['a', 'b', 'c']; // 一个普通数组// 添加自定义属性
myArray.customProperty = 'I am a custom property';
myArray.metadata = { createdBy: 'Alice', creationDate: '2023-10-27' };
myArray.description = 'This array contains some letters';

自定义属性应用场景

给数组添加自定义属性通常用于存储与整个数组相关的元数据（metadata）或状态信息，而不是数组本身要存储的数据项。

1. 存储元数据（Metadata）

这是最常见的用途。将关于数组的描述信息、来源、状态等与数组数据本身捆绑在一起。

// 模拟从API获取的用户列表数据
const users = ['Alice', 'Bob', 'Charlie'];// 为这个数据数组添加元数据
users.totalCount = 105; // 服务器上的总用户数，不止当前返回的3个
users.page = 2; // 当前是第几页
users.pageSize = 3; // 每页大小
users.apiEndpoint = '/api/users';console.log(users);
// 输出: ['Alice', 'Bob', 'Charlie', totalCount: 105, page: 2, pageSize: 3, apiEndpoint: '/api/users']

2. 缓存计算结果（Memoization）

存储一个计算成本高的结果，避免重复计算。

const numbers = [1, 5, 3, 9, 2, 8];// 计算并缓存最大值
numbers.getMax = function() {if (this._cachedMax === undefined) { // 如果还没缓存this._cachedMax = Math.max(...this); // 计算并保存}return this._cachedMax; // 返回缓存的值
};console.log(numbers.getMax()); // 9 (第一次计算)
console.log(numbers.getMax()); // 9 (第二次直接返回缓存，无需计算)// 注意：如果数组内容变了，缓存会失效，需要清除或更新
numbers.push(20);
numbers._cachedMax = undefined; // 手动清除缓存
console.log(numbers.getMax()); // 20 (重新计算)

3. 添加自定义方法

const todoList = ['Buy milk', 'Write report', 'Call mom'];// 添加一个自定义方法
todoList.markAsComplete = function(index) {if (this[index]) {// 可以在这里添加逻辑，比如修改样式或更新状态对象console.log(`Task "${this[index]}" is now complete!`);}
};todoList.markAsComplete(1); // 输出: Task "Write report" is now complete!

4. 标记或状态管理

const dataQueue = ['job1', 'job2', 'job3'];
dataQueue.isProcessing = false; // 标记这个队列是否正在被处理
dataQueue.lastProcessed = null; // 记录最后一个被处理的项目

自定义属性的陷阱

1. 不会被数组方法迭代

最重要的警告：所有数组的迭代方法（如 forEach, map, filter, for…of, reduce 等）只会遍历数字索引的元素，会完全忽略自定义属性。 for in 可以，
在这里插入图片描述

2. 会被 for…in 循环迭代

for…in 循环会遍历对象所有可枚举属性，包括自定义属性。这就是为什么不建议用 for…in 遍历数组的主要原因。

3. JSON 序列化问题

JSON.stringify() 会忽略自定义属性和方法，只序列化数字索引的元素。

更好的替代方案：使用包装对象

// Instead of this:
const usersWithMetadata = ['Alice', 'Bob'];
usersWithMetadata.page = 2;
usersWithMetadata.total = 100;// Do this: 使用一个对象来包装数组和它的元数据
const userResponse = {data: ['Alice', 'Bob'], // 纯数据数组pagination: {           // 元数据对象page: 2,total: 100,pageSize: 2}
};// 访问数据和元数据都非常清晰
console.log(userResponse.data[0]); // 'Alice'
console.log(userResponse.pagination.page); // 2