当前位置:首页 > JavaScript

Js实现allkeys

2026-02-02 06:23:46JavaScript

实现 allKeys 方法

在 JavaScript 中,allKeys 方法通常用于获取对象的所有可枚举属性(包括原型链上的属性)。以下是几种实现方式:

Js实现allkeys

使用 for...in 循环

通过 for...in 循环遍历对象及其原型链上的所有可枚举属性:

Js实现allkeys

function allKeys(obj) {
  const keys = [];
  for (const key in obj) {
    keys.push(key);
  }
  return keys;
}

const obj = { a: 1, b: 2 };
const childObj = Object.create(obj);
childObj.c = 3;

console.log(allKeys(childObj)); // ["c", "a", "b"]

结合 Object.getOwnPropertyNames 和递归

如果需要包含不可枚举属性,可以结合 Object.getOwnPropertyNames 和递归遍历原型链:

function allKeys(obj) {
  const keys = [];
  let current = obj;
  while (current !== null && current !== Object.prototype) {
    Object.getOwnPropertyNames(current).forEach(key => {
      if (!keys.includes(key)) {
        keys.push(key);
      }
    });
    current = Object.getPrototypeOf(current);
  }
  return keys;
}

const obj = { a: 1, b: 2 };
Object.defineProperty(obj, 'hidden', { enumerable: false, value: 3 });

console.log(allKeys(obj)); // ["a", "b", "hidden"]

使用 Reflect.ownKeys

如果需要包含 Symbol 类型的属性,可以使用 Reflect.ownKeys

function allKeys(obj) {
  const keys = new Set();
  let current = obj;
  while (current !== null && current !== Object.prototype) {
    Reflect.ownKeys(current).forEach(key => keys.add(key));
    current = Object.getPrototypeOf(current);
  }
  return Array.from(keys);
}

const obj = { a: 1, [Symbol('id')]: 2 };
console.log(allKeys(obj)); // ["a", Symbol(id)]

注意事项

  • for...in 会跳过 Symbol 类型的属性。
  • Object.getOwnPropertyNames 会包含不可枚举属性,但不会包含 Symbol 属性。
  • Reflect.ownKeys 是最全面的方法,包含所有自有属性(包括 Symbol 和不可枚举属性)。
  • 递归遍历原型链时需注意终止条件(Object.prototypenull)。

标签: Jsallkeys
分享给朋友:

相关文章

Js实现冰墩墩

Js实现冰墩墩

使用Canvas绘制冰墩墩 在JavaScript中,可以通过Canvas API绘制冰墩墩形象。以下是实现的基本代码框架: const canvas = document.getElementBy…

Js实现 toggle

Js实现 toggle

使用 classList.toggle 方法 通过 classList.toggle 可以轻松切换元素的类名。该方法接受一个类名作为参数,如果元素已存在该类名则移除,不存在则添加。 const bu…

怎么用Js实现图片移动

怎么用Js实现图片移动

使用CSS和JavaScript实现图片移动 通过修改图片的CSS属性(如left、top或transform)可以实现图片移动效果。以下是两种常见方法: 方法一:通过修改left和top属性 假设…

Js实现划词翻译

Js实现划词翻译

划词翻译的实现思路 划词翻译功能可以通过监听用户鼠标选中文本的事件,获取选中的文本内容,然后调用翻译API进行翻译,最后将翻译结果显示在页面上。 获取选中文本 通过window.getSelecti…

Js实现utext

Js实现utext

实现 UText 的基本方法 使用 JavaScript 实现 UText(Unicode 文本处理)可以通过多种方式完成,具体取决于需求。以下是几种常见实现方式: 创建基础 UText 对象:…