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

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

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

javascript 复制代码
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)

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

javascript 复制代码
// 模拟从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)

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

javascript 复制代码
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. 添加自定义方法
javascript 复制代码
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. 标记或状态管理
javascript 复制代码
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() 会忽略自定义属性和方法,只序列化数字索引的元素。

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

javascript 复制代码
// 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
相关推荐
要做朋鱼燕14 小时前
【C++】 Vector容器操作全解析
开发语言·c++·笔记·学习笔记
hvinsion14 小时前
零依赖每月工作计划备忘录:高效管理你的每一天
javascript·css·python·开源·html
子兮曰14 小时前
🚀别再被JSON.parse坑了!这个深度克隆方案解决了我3年的前端痛点
前端·javascript·全栈
R瑾安14 小时前
VUE基础
前端·javascript·vue.js
利刃大大14 小时前
【高并发内存池】三、线程缓存的设计
开发语言·c++·缓存·项目·内存池
艾小码14 小时前
告别无效加班!这4个表单操作技巧,让你效率翻倍
前端·javascript·html
Miracle&14 小时前
C++后端开发重点知识点
开发语言·c++
zayyo14 小时前
从 Promise 到 Generator,再到 Co 与 Async/Await 的演进
前端·javascript
我的写法有点潮14 小时前
这么全的正则,还不收藏?
前端·javascript