马黑黑 发表于 2026-8-19 19:45

遍历JS对象所有属性键

<style>
    .artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
    .artBox mark { padding: 2px 6px; background: rgba(0,80,20,.2); }
    .artBox p { margin: 10px 0; }
</style>

<div class="artBox">
    <p>JS对象有两种类型的属性键：字符串和符号。符号（symbol）是一个特殊的属性键类型，<mark>for...in</mark> 会跳过它们：</p>
   
    <div class="hEdiv"><pre class="hEpre">
// 创建person对象
let person = {
    name: '张三',
    age: 26,
    sex: '男',
};

let ID = Symbol('sId'); // 创建符号
person = 1025; // person对象加入符号键值对（符号需置入方括号内）

console.log(person); // -&gt; 1025

// 使用for...in遍历person对象
for (let key in person) {
    console.log(key); // -&gt; name, age, sex
}
    </pre></div>
   
    <p>可以看到，<mark>for...in</mark> 跳过了符号 <mark>ID</mark> 属性键。要取出所有的对象属性键，得使用 JS 内置的静态方法 <mark>Reflect.ownKeys()</mark>：</p>

    <div class="hEdiv"><pre class="hEpre">
let person = {
    name: '张三',
    age: 26,
    sex: '男',
};

let ID = Symbol('sId');
person = 1025;

// 使用Reflect.ownKeys()方法获取person对象所有属性键
const keys = Reflect.ownKeys(person);
console.log(keys);
// -> Array(4)
// -> 0: "name" 1: "age" 2: "sex" 3: Symbol(sId)
    </pre></div>

    <p><mark>Reflect.ownKeys()</mark> 方法以数组形式返回属性键，其中，符号属性键是 <mark>Symbol('sId')</mark> 创建的符号，记作<mark>Symbol(sId)</mark>（创建时的名称 sId 去掉引号，而非声明的变量 ID，读取键值时则使用 ID 变量）。</p>
    <p>获取对象的全部属性键对读取对象数据非常有帮助。如果不希望遗漏任何一个属性键及其对应的键值，Reflect.ownKeys() 方法无疑是简洁高效的。</p>
</div>

<script type="module">
    import hl from 'https://638183.freep.cn/638183/web/js/hl.js';
    const divs = document.querySelectorAll('.hEdiv');
    const pres = document.querySelectorAll('.hEpre');
    divs.forEach((div,idx) => hl.hl(div, pres));
</script>

梦江南 发表于 2026-8-19 20:01

谢谢黑黑老师介绍遍历JS对象所有属性键，学习了。{:4_187:}

梦江南 发表于 2026-8-19 20:02

祝黑黑老师七夕快乐，晚上嚎！{:4_204:}

霜染枫丹 发表于 2026-8-19 21:04

马老师晚上好！您的上一个“遍历“贴我看了教程，有了一点理解，觉得知道一点还是有用的。这个先留存。

感谢您的分享，祝七夕节快乐！{:4_204:}{:4_190:}

小辣椒 发表于 2026-8-19 21:14

小辣椒欣赏加学习{:4_187:}

小辣椒 发表于 2026-8-19 21:14

感谢黑黑分享{:4_199:}

红影 发表于 2026-8-20 07:00

Reflect.ownKeys() 对于获取属性键及其对应的键值可以做到一网打尽呢。
感谢黑黑分享，学习了{:4_187:}

马黑黑 发表于 2026-8-20 12:58

红影 发表于 2026-8-20 07:00
Reflect.ownKeys() 对于获取属性键及其对应的键值可以做到一网打尽呢。
感谢黑黑分享，学习了

冷门内置方法，很少见到有人使用

马黑黑 发表于 2026-8-20 12:58

小辣椒 发表于 2026-8-19 21:14
感谢黑黑分享

阔气阔气

马黑黑 发表于 2026-8-20 12:58

霜染枫丹 发表于 2026-8-19 21:04
马老师晚上好！您的上一个“遍历“贴我看了教程，有了一点理解，觉得知道一点还是有用的。这个先留存。

...

同乐同乐

马黑黑 发表于 2026-8-20 12:58

梦江南 发表于 2026-8-19 20:02
祝黑黑老师七夕快乐，晚上嚎！

同嚎

马黑黑 发表于 2026-8-20 12:59

梦江南 发表于 2026-8-19 20:01
谢谢黑黑老师介绍遍历JS对象所有属性键，学习了。

辛苦 {:4_190:}
页: [1]
查看完整版本: 遍历JS对象所有属性键