{"id":557,"date":"2025-12-06T16:16:31","date_gmt":"2025-12-06T08:16:31","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=557"},"modified":"2025-12-06T16:16:31","modified_gmt":"2025-12-06T08:16:31","slug":"javascript%e9%81%8d%e5%8e%86%e5%af%b9%e8%b1%a1%e5%b9%b6%e8%8e%b7%e5%8f%96key%e5%92%8cvalue%e7%9a%84%e5%87%a0%e7%a7%8d%e5%b8%b8%e8%a7%81%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/06\/javascript%e9%81%8d%e5%8e%86%e5%af%b9%e8%b1%a1%e5%b9%b6%e8%8e%b7%e5%8f%96key%e5%92%8cvalue%e7%9a%84%e5%87%a0%e7%a7%8d%e5%b8%b8%e8%a7%81%e6%96%b9%e6%b3%95\/","title":{"rendered":"JavaScript\u904d\u5386\u5bf9\u8c61\u5e76\u83b7\u53d6key\u548cvalue\u7684\u51e0\u79cd\u5e38\u89c1\u65b9\u6cd5"},"content":{"rendered":"\n

\u4e0b\u9762\u7ed9\u4f60\u6574\u7406\u4e00\u4efd \u300aJavaScript \u904d\u5386\u5bf9\u8c61\u5e76\u83b7\u53d6 key \u548c value \u7684\u5e38\u89c1\u65b9\u6cd5\uff082025 \u6700\u65b0\u7248\uff09\u300b<\/strong>\uff0c\u5305\u542b\u793a\u4f8b\u3001\u4f18\u7f3a\u70b9\u548c\u9002\u7528\u573a\u666f\uff0c\u65b9\u4fbf\u524d\u7aef\u5f00\u53d1\u76f4\u63a5\u4f7f\u7528\u6216\u5199\u6587\u7ae0\u3002<\/p>\n\n\n\n

\n\n\n\n

\ud83d\ude80 JavaScript \u904d\u5386\u5bf9\u8c61\u83b7\u53d6 key \u548c value \u7684\u51e0\u79cd\u5e38\u89c1\u65b9\u6cd5<\/h1>\n\n\n\n

JavaScript \u5bf9\u8c61\u904d\u5386\u4e3b\u8981\u7528\u4e8e\uff1a\u83b7\u53d6\u5c5e\u6027\u540d\uff08key\uff09\u3001\u5c5e\u6027\u503c\uff08value\uff09\u6216\u540c\u65f6\u83b7\u53d6 key\/value<\/strong>\u3002
\u5bf9\u8c61\u5305\u62ec \u666e\u901a\u5bf9\u8c61<\/strong> \u548c Map\/Set \u7b49\u53ef\u8fed\u4ee3\u5bf9\u8c61<\/strong>\u3002<\/p>\n\n\n\n

\n\n\n\n

1\ufe0f\u20e3 for…in \u5faa\u73af\uff08\u7ecf\u5178\u65b9\u6cd5\uff09<\/strong><\/h1>\n\n\n
\nconst obj = { name: "Alice", age: 25, city: "Beijing" };\n\nfor (const key in obj) {\n  if (obj.hasOwnProperty(key)) {  \/\/ \u8fc7\u6ee4\u7ee7\u627f\u5c5e\u6027\n    const value = obj[key];\n    console.log(key, value);\n  }\n}\n\n<\/pre><\/div>\n\n\n
\u2705 \u4f18\u70b9\uff1a<\/p>\n\n\n\n
    \n
  • \u7b80\u5355\uff0c\u9002\u5408\u65e7\u6d4f\u89c8\u5668<\/li>\n\n\n\n
  • \u53ef\u904d\u5386\u6240\u6709\u53ef\u679a\u4e3e\u5c5e\u6027<\/li>\n<\/ul>\n\n\n\n
    \u26a0\ufe0f \u7f3a\u70b9\uff1a<\/p>\n\n\n\n
      \n
    • \u4f1a\u904d\u5386\u539f\u578b\u94fe\uff0c\u9700\u8981 hasOwnProperty<\/code> \u8fc7\u6ee4<\/li>\n\n\n\n
    • \u904d\u5386\u987a\u5e8f\u975e\u4e25\u683c\u4fdd\u8bc1\uff08\u5bf9\u8c61\u987a\u5e8f\u6709\u7279\u6b8a\u60c5\u51b5\uff09<\/li>\n<\/ul>\n\n\n\n
      \n\n\n\n
      2\ufe0f\u20e3 Object.keys() + forEach<\/strong><\/h1>\n\n\n
      \nObject.keys(obj).forEach(key => {\n  const value = obj[key];\n  console.log(key, value);\n});\n\n<\/pre><\/div>\n\n\n
      \u2705 \u4f18\u70b9\uff1a<\/p>\n\n\n\n
        \n
      • \u53ea\u904d\u5386\u81ea\u8eab\u5c5e\u6027<\/li>\n\n\n\n
      • \u904d\u5386\u987a\u5e8f\u4e0e\u5bf9\u8c61\u5b9a\u4e49\u987a\u5e8f\u4e00\u81f4<\/li>\n\n\n\n
      • \u4ee3\u7801\u7b80\u6d01<\/li>\n<\/ul>\n\n\n\n
        \n\n\n\n
        3\ufe0f\u20e3 Object.values() + forEach<\/strong>\uff08\u53ea\u83b7\u53d6 value\uff09<\/h1>\n\n\n
        \nObject.values(obj).forEach(value => {\n  console.log(value);\n});\n\n<\/pre><\/div>\n\n\n
        \u2705 \u4f18\u70b9\uff1a<\/p>\n\n\n\n
          \n
        • \u9002\u5408\u53ea\u5173\u6ce8\u503c\u7684\u573a\u666f<\/li>\n\n\n\n
        • \u904d\u5386\u987a\u5e8f\u4e00\u81f4<\/li>\n<\/ul>\n\n\n\n
          \u26a0\ufe0f \u7f3a\u70b9\uff1a\u65e0\u6cd5\u76f4\u63a5\u83b7\u53d6 key<\/p>\n\n\n\n
          \n\n\n\n
          4\ufe0f\u20e3 Object.entries() + for…of<\/strong>\uff08\u6700\u63a8\u8350\uff09<\/h1>\n\n\n
          \nfor (const [key, value] of Object.entries(obj)) {\n  console.log(key, value);\n}\n\n<\/pre><\/div>\n\n\n
          \u2705 \u4f18\u70b9\uff1a<\/p>\n\n\n\n
            \n
          • \u540c\u65f6\u83b7\u53d6 key \u548c value<\/li>\n\n\n\n
          • \u987a\u5e8f\u4e0e\u5bf9\u8c61\u5b9a\u4e49\u987a\u5e8f\u4e00\u81f4<\/li>\n\n\n\n
          • \u53ef\u4e0e\u89e3\u6784\u914d\u5408\uff0c\u4ee3\u7801\u7b80\u6d01<\/li>\n<\/ul>\n\n\n\n
            \n\n\n\n
            5\ufe0f\u20e3 forEach + Object.entries()<\/strong>\uff08\u51fd\u6570\u5f0f\u98ce\u683c\uff09<\/h1>\n\n\n
            \nObject.entries(obj).forEach(([key, value]) => {\n  console.log(key, value);\n});\n\n<\/pre><\/div>\n\n\n
            \u2705 \u4f18\u70b9\uff1a<\/p>\n\n\n\n
              \n
            • \u7b80\u6d01\u3001\u53ef\u94fe\u5f0f\u64cd\u4f5c<\/li>\n\n\n\n
            • \u9002\u5408\u51fd\u6570\u5f0f\u7f16\u7a0b\u98ce\u683c<\/li>\n<\/ul>\n\n\n\n
              \n\n\n\n
              6\ufe0f\u20e3 for…of + Map \u5bf9\u8c61<\/strong>\uff08\u9002\u5408 Map \u7c7b\u578b\uff09<\/h1>\n\n\n
              \nconst map = new Map([\n  ["name", "Alice"],\n  ["age", 25],\n]);\n\nfor (const [key, value] of map) {\n  console.log(key, value);\n}\n\n<\/pre><\/div>\n\n\n
              \u2705 \u4f18\u70b9\uff1a<\/p>\n\n\n\n
                \n
              • Map \u4fdd\u8bc1\u63d2\u5165\u987a\u5e8f<\/li>\n\n\n\n
              • \u76f4\u63a5\u89e3\u6784 key\/value<\/li>\n<\/ul>\n\n\n\n
                \n\n\n\n
                7\ufe0f\u20e3 Object.getOwnPropertyNames()<\/strong>\uff08\u53ef\u83b7\u53d6\u4e0d\u53ef\u679a\u4e3e\u5c5e\u6027\uff09<\/h1>\n\n\n
                \nObject.getOwnPropertyNames(obj).forEach(key => {\n  const value = obj[key];\n  console.log(key, value);\n});\n\n<\/pre><\/div>\n\n\n
                \u2705 \u4f18\u70b9\uff1a<\/p>\n\n\n\n
                  \n
                • \u83b7\u53d6\u6240\u6709\u81ea\u8eab\u5c5e\u6027\uff0c\u5305\u62ec\u4e0d\u53ef\u679a\u4e3e\u5c5e\u6027
                  \u26a0\ufe0f \u4e00\u822c\u7528\u4e8e\u5de5\u5177\u51fd\u6570\u6216\u6df1\u5ea6\u53cd\u5c04<\/li>\n<\/ul>\n\n\n\n
                  \n\n\n\n
                  8\ufe0f\u20e3 JSON \u65b9\u6cd5\uff08\u4ec5\u9650\u666e\u901a\u5bf9\u8c61\uff09<\/strong><\/h1>\n\n\n
                  \nconst jsonStr = JSON.stringify(obj);\nconsole.log(jsonStr);\n\n<\/pre><\/div>\n\n\n
                  \u2705 \u4f18\u70b9\uff1a<\/p>\n\n\n\n
                    \n
                  • \u5feb\u901f\u67e5\u770b\u5bf9\u8c61\u5185\u5bb9
                    \u26a0\ufe0f \u4e0d\u80fd\u904d\u5386\u51fd\u6570\u3001Symbol\u3001undefined<\/li>\n<\/ul>\n\n\n\n
                    \n\n\n\n
                    \ud83d\udd39 \u65b9\u6cd5\u5bf9\u6bd4\u603b\u7ed3<\/h1>\n\n\n\n
                    \u65b9\u6cd5<\/th>\u83b7\u53d6 key<\/th>\u83b7\u53d6 value<\/th>\u904d\u5386\u987a\u5e8f<\/th>\u9002\u7528\u573a\u666f<\/th><\/tr><\/thead>
                    for…in<\/td>\u2705<\/td>\u2705<\/td>\u4e0d\u4fdd\u8bc1<\/td>\u8001\u6d4f\u89c8\u5668\/\u539f\u578b\u94fe\u904d\u5386<\/td><\/tr>
                    Object.keys + forEach<\/td>\u2705<\/td>\u2705<\/td>\u4e0e\u5b9a\u4e49\u987a\u5e8f\u4e00\u81f4<\/td>\u5e38\u89c4\u904d\u5386\u81ea\u8eab\u5c5e\u6027<\/td><\/tr>
                    Object.values + forEach<\/td>\u274c<\/td>\u2705<\/td>\u4e0e\u5b9a\u4e49\u987a\u5e8f\u4e00\u81f4<\/td>\u53ea\u5173\u5fc3\u503c<\/td><\/tr>
                    Object.entries + for…of<\/td>\u2705<\/td>\u2705<\/td>\u4e0e\u5b9a\u4e49\u987a\u5e8f\u4e00\u81f4<\/td>\u540c\u65f6\u83b7\u53d6 key\/value\uff0c\u63a8\u8350<\/td><\/tr>
                    Map + for…of<\/td>\u2705<\/td>\u2705<\/td>\u63d2\u5165\u987a\u5e8f<\/td>Map \u7c7b\u578b\u5bf9\u8c61<\/td><\/tr>
                    getOwnPropertyNames<\/td>\u2705<\/td>\u2705<\/td>\u4e0e\u5b9a\u4e49\u987a\u5e8f\u4e00\u81f4<\/td>\u83b7\u53d6\u4e0d\u53ef\u679a\u4e3e\u5c5e\u6027<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
                    \n\n\n\n
                    \ud83d\udd39 \u5c0f\u6280\u5de7<\/h1>\n\n\n\n
                      \n
                    1. \u89e3\u6784\u76f4\u63a5\u53d6\u503c<\/strong>\uff1a<\/li>\n<\/ol>\n\n\n
                      \nconst { name, age } = obj;\n\n<\/pre><\/div>\n\n\n
                        \n
                      1. \u904d\u5386\u5e26\u7d22\u5f15\u7684\u6570\u7ec4\u5bf9\u8c61<\/strong>\uff1a<\/li>\n<\/ol>\n\n\n
                        \nconst arr = [{id:1},{id:2}];\narr.forEach((item, index) => {\n  console.log(index, item.id);\n});\n\n<\/pre><\/div>\n\n\n
                          \n
                        1. \u904d\u5386 Symbol \u5c5e\u6027<\/strong>\uff1a<\/li>\n<\/ol>\n\n\n
                          \nconst sym = Symbol("id");\nobj[sym] = 123;\nObject.getOwnPropertySymbols(obj).forEach(s => {\n  console.log(s, obj[s]);\n});\n\n<\/pre><\/div>\n\n\n
                          \u597d\uff0c\u6211\u5e2e\u4f60\u6574\u7406\u4e00\u4efd \u300aJavaScript \u5bf9\u8c61\u904d\u5386\u5168\u5957\u5b9e\u7528\u793a\u4f8b + \u9762\u8bd5\u9898\u89e3\u6790\uff082025 \u6700\u65b0\u7248\uff09\u300b<\/strong>\uff0c\u6db5\u76d6\u666e\u901a\u5bf9\u8c61\u3001Map\u3001Set\u3001Symbol\u3001\u6570\u7ec4\u5bf9\u8c61\u7b49\uff0c\u5305\u542b\u4ee3\u7801\u793a\u4f8b\u3001\u6ce8\u610f\u4e8b\u9879\u548c\u9762\u8bd5\u70b9\u3002<\/p>\n\n\n\n
                          \n\n\n\n
                          \ud83d\ude80 JavaScript \u5bf9\u8c61\u904d\u5386\u5168\u5957\u5b9e\u7528\u793a\u4f8b\uff082025 \u6700\u65b0\u7248\uff09<\/h1>\n\n\n\n
                          1\ufe0f\u20e3 \u666e\u901a\u5bf9\u8c61\u904d\u5386<\/h2>\n\n\n
                          \nconst obj = { name: "Alice", age: 25, city: "Beijing" };\n\n<\/pre><\/div>\n\n\n
                          \u2460 for…in<\/h3>\n\n\n
                          \nfor (const key in obj) {\n  if (obj.hasOwnProperty(key)) {  \/\/ \u8fc7\u6ee4\u539f\u578b\u94fe\u5c5e\u6027\n    console.log(key, obj[key]);\n  }\n}\n\n<\/pre><\/div>\n\n\n
                          \u2461 Object.keys() + forEach<\/h3>\n\n\n
                          \nObject.keys(obj).forEach(key => {\n  console.log(key, obj[key]);\n});\n\n<\/pre><\/div>\n\n\n
                          \u2462 Object.values() + forEach<\/h3>\n\n\n
                          \nObject.values(obj).forEach(value => {\n  console.log(value);\n});\n\n<\/pre><\/div>\n\n\n
                          \u2463 Object.entries() + for…of \uff08\u63a8\u8350\uff09<\/h3>\n\n\n
                          \nfor (const [key, value] of Object.entries(obj)) {\n  console.log(key, value);\n}\n\n<\/pre><\/div>\n\n\n
                          \u2464 Object.entries() + forEach<\/h3>\n\n\n
                          \nObject.entries(obj).forEach(([key, value]) => {\n  console.log(key, value);\n});\n\n<\/pre><\/div>\n\n\n
                          \n\n\n\n
                          2\ufe0f\u20e3 Map \u904d\u5386<\/h2>\n\n\n
                          \nconst map = new Map([\n  ["name", "Alice"],\n  ["age", 25]\n]);\n\n\/\/ \u2460 for...of\nfor (const [key, value] of map) {\n  console.log(key, value);\n}\n\n\/\/ \u2461 map.forEach\nmap.forEach((value, key) => {\n  console.log(key, value);\n});\n\n<\/pre><\/div>\n\n\n
                          \u2705 \u7279\u70b9\uff1a\u4fdd\u6301\u63d2\u5165\u987a\u5e8f\uff0c\u53ef\u76f4\u63a5\u89e3\u6784<\/p>\n\n\n\n
                          \n\n\n\n
                          3\ufe0f\u20e3 Set \u904d\u5386\uff08\u83b7\u53d6\u503c\uff0c\u6ca1\u6709 key\uff09<\/h2>\n\n\n
                          \nconst set = new Set([1, 2, 3]);\n\n\/\/ \u2460 for...of\nfor (const value of set) {\n  console.log(value);\n}\n\n\/\/ \u2461 forEach\nset.forEach(value => console.log(value));\n\n<\/pre><\/div>\n\n\n
                          \n\n\n\n
                          4\ufe0f\u20e3 Symbol \u5c5e\u6027\u904d\u5386<\/h2>\n\n\n
                          \nconst sym1 = Symbol("id");\nobj[sym1] = 123;\n\nObject.getOwnPropertySymbols(obj).forEach(sym => {\n  console.log(sym, obj[sym]);\n});\n\n<\/pre><\/div>\n\n\n
                          \u2705 \u7279\u70b9\uff1aSymbol \u5c5e\u6027\u4e0d\u4f1a\u88ab for...in<\/code> \u6216 Object.keys<\/code> \u904d\u5386<\/p>\n\n\n\n
                          \n\n\n\n
                          5\ufe0f\u20e3 \u83b7\u53d6\u4e0d\u53ef\u679a\u4e3e\u5c5e\u6027<\/h2>\n\n\n
                          \nObject.defineProperty(obj, "secret", { value: "123", enumerable: false });\n\nconsole.log(Object.getOwnPropertyNames(obj)); \/\/ \u5305\u542b "secret"\n\n<\/pre><\/div>\n\n\n
                          \n\n\n\n
                          6\ufe0f\u20e3 \u6570\u7ec4\u5bf9\u8c61\u904d\u5386<\/h2>\n\n\n
                          \nconst arr = [{id:1, name:"A"}, {id:2, name:"B"}];\n\narr.forEach((item, index) => {\n  console.log(index, item.id, item.name);\n});\n\n<\/pre><\/div>\n\n\n
                          \n\n\n\n
                          7\ufe0f\u20e3 \u7efc\u5408\u793a\u4f8b\uff1a\u5bf9\u8c61 + Map + Symbol + \u6570\u7ec4<\/h2>\n\n\n
                          \nconst sym = Symbol("sym");\nconst obj2 = { a:1, b:2 };\nobj2[sym] = 100;\n\nconst map2 = new Map([["x", 10], ["y", 20]]);\nconst set2 = new Set([1,2,3]);\nconst arr2 = [{id:1}, {id:2}];\n\nconsole.log("\u666e\u901a\u5bf9\u8c61");\nfor(const [k,v] of Object.entries(obj2)) console.log(k,v);\nObject.getOwnPropertySymbols(obj2).forEach(s => console.log(s,obj2[s]));\n\nconsole.log("Map");\nfor(const [k,v] of map2) console.log(k,v);\n\nconsole.log("Set");\nfor(const v of set2) console.log(v);\n\nconsole.log("\u6570\u7ec4\u5bf9\u8c61");\narr2.forEach((item,i) => console.log(i,item.id));\n\n<\/pre><\/div>\n\n\n
                          \n\n\n\n
                          \ud83d\udd39 \u9762\u8bd5\u5e38\u89c1\u9898\u70b9<\/h1>\n\n\n\n
                            \n
                          1. for...in<\/code> \u4e0e Object.keys<\/code> \u533a\u522b\uff1f\n