Files
reference/docs/json.html
2022-10-05 06:47:35 +00:00

469 lines
41 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" data-color-mode="dark">
<head>
<meta charset="utf-8">
<title>JSON 备忘清单
&#x26; json cheatsheet &#x26; Quick Reference</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta description="这是理解和编写 JSON 格式配置文件的快速参考备忘单。为开发人员分享快速参考备忘单。">
<meta keywords="Quick,Reference,cheatsheet,json">
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20opacity%3D%22.4%22%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23777%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23999%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23999%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
<link rel="stylesheet" href="../style/style.css">
</head>
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
<path opacity=".4" d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="currentColor"></path>
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="currentColor"></path>
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="currentColor"></path>
</svg>
<span class="title">Quick Reference</span></a><div class="menu"><a href="https://github.com/jaywcjlove/reference/blob/main/docs/json.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
</svg>
</button><script>
const LOCAL_NANE = '_dark_mode_theme_'
const rememberedValue = localStorage.getItem(LOCAL_NANE);
if (rememberedValue && ['light', 'dark'].includes(rememberedValue)) {
document.documentElement.setAttribute('data-color-mode', rememberedValue);
}
const button = document.querySelector('#darkMode');
button.onclick = () => {
const theme = document.documentElement.dataset.colorMode;
const mode = theme === 'light' ? 'dark' : 'light';
document.documentElement.setAttribute('data-color-mode', mode);
localStorage.setItem(LOCAL_NANE, mode);
}
</script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap max-container"><header class="wrap-header h1wrap"><h1 id="json-备忘清单"><a aria-hidden="true" tabindex="-1" href="#json-备忘清单"><span class="icon icon-link"></span></a>JSON 备忘清单</h1><div class="wrap-body">
<p>这是理解和编写 JSON 格式配置文件的快速参考备忘单。</p>
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="介绍"><a aria-hidden="true" tabindex="-1" href="#介绍"><span class="icon icon-link"></span></a>介绍</h3><div class="wrap-body">
<p><a href="https://json.org/">JSON</a> 是一种基于文本的轻量级开放标准,专为人类可读的数据交换而设计。</p>
<ul>
<li>JSON 代表 JavaScript 对象表示法</li>
<li>JSON 易于读写。</li>
<li>JSON 是与语言无关的数据交换格式</li>
<li>JSON 文件扩展名为 <code>.json</code></li>
<li>JSON Internet 媒体类型为 <code>application/json</code></li>
</ul>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="示例"><a aria-hidden="true" tabindex="-1" href="#示例"><span class="icon icon-link"></span></a>示例</h3><div class="wrap-body">
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"Jason"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"age"</span><span class="token operator">:</span> <span class="token number">39</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"height"</span><span class="token operator">:</span> <span class="token number">1.92</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"gender"</span><span class="token operator">:</span> <span class="token string">"M"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"salary"</span><span class="token operator">:</span> <span class="token number">70000</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"married"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"children"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
</span><span class="code-line"> <span class="token punctuation">{</span><span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"Tom"</span><span class="token punctuation">,</span> <span class="token property">"age"</span><span class="token operator">:</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token property">"gender"</span><span class="token operator">:</span><span class="token string">"M"</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">{</span><span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"Ava"</span><span class="token punctuation">,</span> <span class="token property">"age"</span><span class="token operator">:</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token property">"gender"</span><span class="token operator">:</span><span class="token string">"F"</span><span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token punctuation">]</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="类型"><a aria-hidden="true" tabindex="-1" href="#类型"><span class="icon icon-link"></span></a>类型</h3><div class="wrap-body">
<table><thead><tr><th>类型</th><th>描述</th></tr></thead><tbody><tr><td><code>Number</code></td><td>双精度浮点</td></tr><tr><td><code>String</code></td><td>字符系列</td></tr><tr><td><code>Boolean</code></td><td>“true”或“false”</td></tr><tr><td><code>Array</code></td><td>有序的值序列</td></tr><tr><td><code>Value</code></td><td>字符串、数字、布尔值、空值等</td></tr><tr><td><code>Object</code></td><td>键/值对的无序集合</td></tr><tr><td><code>null</code></td><td>Null 或 Empty</td></tr></tbody></table>
</div></div></div><div class="wrap" style="grid-row: span 3/span 3;"><div class="wrap-header h3wrap"><h3 id="字符串"><a aria-hidden="true" tabindex="-1" href="#字符串"><span class="icon icon-link"></span></a>字符串</h3><div class="wrap-body">
<!--rehype:wrap-style=grid-row: span 3/span 3;-->
<table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><code>\"</code></td><td>双引号 Double quote</td></tr><tr><td><code>\\</code></td><td>反斜杠 Backslash</td></tr><tr><td><code>\/</code></td><td>正斜杠 Forward slash</td></tr><tr><td><code>\b</code></td><td>退格 Backspace</td></tr><tr><td><code>\f</code></td><td>换页 Form feed</td></tr><tr><td><code>\n</code></td><td>换行 Newline</td></tr><tr><td><code>\r</code></td><td>回车 Carriage return</td></tr><tr><td><code>\t</code></td><td>标签 Tab</td></tr><tr><td><code>\u</code></td><td>后跟四个十六进制数字</td></tr></tbody></table>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="示例-1"><a aria-hidden="true" tabindex="-1" href="#示例-1"><span class="icon icon-link"></span></a>示例</h4><div class="wrap-body">
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://quickref.me"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"msg"</span> <span class="token operator">:</span> <span class="token string">"Hi,\n\"QuickRef.ME\""</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"intro"</span><span class="token operator">:</span> <span class="token string">"Share quick reference and cheat sheet for developers."</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="无效字符串"><a aria-hidden="true" tabindex="-1" href="#无效字符串"><span class="icon icon-link"></span></a>无效字符串</h4><div class="wrap-body">
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">{</span> <span class="token property">"foo"</span><span class="token operator">:</span> 'bar' <span class="token punctuation">}</span>
</span></code></pre>
<p>Have to be delimited by double quotes</p>
</div></div></div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="数字"><a aria-hidden="true" tabindex="-1" href="#数字"><span class="icon icon-link"></span></a>数字</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<table class="show-header "><thead><tr><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>Integer</code></td><td>数字 1-9、0 和正数或负数</td></tr><tr><td><code>Fraction</code></td><td>0.3、3.9 等分数</td></tr><tr><td><code>Exponent</code></td><td>指数,如 e、e+、e-、E、E+、E</td></tr></tbody></table>
<!--rehype:className=show-header -->
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="示例-2"><a aria-hidden="true" tabindex="-1" href="#示例-2"><span class="icon icon-link"></span></a>示例</h4><div class="wrap-body">
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">"positive"</span> <span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"negative"</span> <span class="token operator">:</span> <span class="token number">-1</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"fraction"</span> <span class="token operator">:</span> <span class="token number">10.25</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"exponent"</span> <span class="token operator">:</span> <span class="token number">1.0E+2</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"zero"</span> <span class="token operator">:</span> <span class="token number">0</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="无效的数字"><a aria-hidden="true" tabindex="-1" href="#无效的数字"><span class="icon icon-link"></span></a>无效的数字</h4><div class="wrap-body">
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">{</span> <span class="token property">"foo"</span><span class="token operator">:</span> 0xFF <span class="token punctuation">}</span>
</span></code></pre>
<p>在JSON中只能使用十进制文字</p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="对象-objects"><a aria-hidden="true" tabindex="-1" href="#对象-objects"><span class="icon icon-link"></span></a>对象 Objects</h3><div class="wrap-body">
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">"color"</span><span class="token operator">:</span> <span class="token string">"Purple"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"210"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"composition"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">"R"</span><span class="token operator">:</span> <span class="token number">70</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"G"</span><span class="token operator">:</span> <span class="token number">39</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"B"</span><span class="token operator">:</span> <span class="token number">89</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"empty_object"</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<p>用逗号分隔的多个键/值对</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="数组-arrays"><a aria-hidden="true" tabindex="-1" href="#数组-arrays"><span class="icon icon-link"></span></a>数组 Arrays</h3><div class="wrap-body">
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span>
</span></code></pre>
<p><code>[</code> 开始并以 <code>]</code> 结束</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="对象数组"><a aria-hidden="true" tabindex="-1" href="#对象数组"><span class="icon icon-link"></span></a>对象数组</h3><div class="wrap-body">
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">"children"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"Jimmy Smith"</span><span class="token punctuation">,</span> <span class="token property">"age"</span><span class="token operator">:</span> <span class="token number">15</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"Sammy Sosa"</span><span class="token punctuation">,</span> <span class="token property">"age"</span><span class="token operator">:</span> <span class="token number">12</span> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token punctuation">]</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="数组对象"><a aria-hidden="true" tabindex="-1" href="#数组对象"><span class="icon icon-link"></span></a>数组对象</h3><div class="wrap-body">
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">"attributes"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"a1"</span><span class="token punctuation">,</span> <span class="token string">"a2"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"methods"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"getter"</span><span class="token punctuation">,</span> <span class="token string">"setter"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"empty_array"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="二维阵列"><a aria-hidden="true" tabindex="-1" href="#二维阵列"><span class="icon icon-link"></span></a>二维阵列</h3><div class="wrap-body">
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">"my_sequences"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
</span><span class="code-line"> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">[</span><span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">]</span>
</span><span class="code-line"> <span class="token punctuation">]</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="对象的对象"><a aria-hidden="true" tabindex="-1" href="#对象的对象"><span class="icon icon-link"></span></a>对象的对象</h3><div class="wrap-body">
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">"Mark McGwire"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">"hr"</span><span class="token operator">:</span> <span class="token number">65</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"avg"</span><span class="token operator">:</span> <span class="token number">0.278</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"Sammy Sosa"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">"hr"</span><span class="token operator">:</span> <span class="token number">63</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"avg"</span><span class="token operator">:</span> <span class="token number">0.288</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="嵌套"><a aria-hidden="true" tabindex="-1" href="#嵌套"><span class="icon icon-link"></span></a>嵌套</h3><div class="wrap-body">
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">"Jack"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">"id"</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"Franc"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"salary"</span><span class="token operator">:</span> <span class="token number">25000</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"hobby"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"a"</span><span class="token punctuation">,</span> <span class="token string">"b"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"location"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">"country"</span><span class="token operator">:</span> <span class="token string">"A"</span><span class="token punctuation">,</span> <span class="token property">"city"</span><span class="token operator">:</span> <span class="token string">"A-A"</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="在-javascript-中访问-json"><a aria-hidden="true" tabindex="-1" href="#在-javascript-中访问-json"><span class="icon icon-link"></span></a>在 JavaScript 中访问 JSON</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="访问对象"><a aria-hidden="true" tabindex="-1" href="#访问对象"><span class="icon icon-link"></span></a>访问对象</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">let</span> myObject <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"Jason"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"last"</span><span class="token operator">:</span> <span class="token string">"Doe"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"age"</span><span class="token operator">:</span> <span class="token number">39</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"gender"</span><span class="token operator">:</span> <span class="token string">"M"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"salary"</span><span class="token operator">:</span> <span class="token number">70000</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"married"</span><span class="token operator">:</span> <span class="token boolean">true</span>
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></code></pre>
<hr>
<table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><code>myObject.name</code></td><td>"Jason"</td></tr><tr><td><code>myObject["name"]</code></td><td>"Jason"</td></tr><tr><td><code>myObject.age</code></td><td>39</td></tr><tr><td><code>myObject.other</code></td><td>undefined</td></tr><tr><td><code>myObject[0]</code></td><td>undefined</td></tr></tbody></table>
</div></div></div><div class="wrap" style="grid-row: span 2/span 2;"><div class="wrap-header h3wrap"><h3 id="访问嵌套"><a aria-hidden="true" tabindex="-1" href="#访问嵌套"><span class="icon icon-link"></span></a>访问嵌套</h3><div class="wrap-body">
<!--rehype:wrap-style=grid-row: span 2/span 2;-->
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">let</span> myObject <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token string-property property">"ref"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"last"</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"age"</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"gender"</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"salary"</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"married"</span><span class="token operator">:</span> <span class="token number">5</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"jdoe"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
</span><span class="code-line"> <span class="token string">"Jason"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string">"Doe"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token number">39</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string">"M"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token number">70000</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token boolean">true</span>
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"jsmith"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
</span><span class="code-line"> <span class="token string">"Tom"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string">"Smith"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token number">42</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string">"F"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token number">80000</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token boolean">true</span>
</span><span class="code-line"> <span class="token punctuation">]</span>
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></code></pre>
<hr>
<table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><code>myObject.ref.age</code></td><td>2</td></tr><tr><td><code>myObject["ref"]["age"]</code></td><td>2</td></tr><tr><td><code>myObject.jdoe</code></td><td>["Jason", "Doe", 39 ...]</td></tr><tr><td><code>myObject.jsmith[3]</code></td><td>"F"</td></tr><tr><td><code>myObject[1]</code></td><td>undefined</td></tr></tbody></table>
</div></div></div><div class="wrap" style="grid-row: span 2/span 2;"><div class="wrap-header h3wrap"><h3 id="访问对象数组"><a aria-hidden="true" tabindex="-1" href="#访问对象数组"><span class="icon icon-link"></span></a>访问对象数组</h3><div class="wrap-body">
<!--rehype:wrap-style=grid-row: span 2/span 2;-->
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">let</span> myArray <span class="token operator">=</span> <span class="token punctuation">[</span>
</span><span class="code-line"> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"Jason"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"last"</span><span class="token operator">:</span> <span class="token string">"Doe"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"age"</span><span class="token operator">:</span> <span class="token number">39</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"gender"</span><span class="token operator">:</span> <span class="token string">"M"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"salary"</span><span class="token operator">:</span> <span class="token number">70000</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"married"</span><span class="token operator">:</span> <span class="token boolean">true</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"Tom"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"last"</span><span class="token operator">:</span> <span class="token string">"Smith"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"age"</span><span class="token operator">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"gender"</span><span class="token operator">:</span> <span class="token string">"F"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"salary"</span><span class="token operator">:</span> <span class="token number">80000</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"married"</span><span class="token operator">:</span> <span class="token boolean">true</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"Amy"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"last"</span><span class="token operator">:</span> <span class="token string">"Burnquist"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"age"</span><span class="token operator">:</span> <span class="token number">29</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"gender"</span><span class="token operator">:</span> <span class="token string">"F"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"salary"</span><span class="token operator">:</span> <span class="token number">60000</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string-property property">"married"</span><span class="token operator">:</span> <span class="token boolean">false</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">]</span><span class="token punctuation">;</span>
</span></code></pre>
<hr>
<table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><code>myArray[0]</code></td><td><code>{</code>"name": "Jason", ...<code>}</code></td></tr><tr><td><code>myArray[1].name</code></td><td>"Tom"</td></tr><tr><td><code>myArray[1][2]</code></td><td>42</td></tr><tr><td><code>myArray[3]</code></td><td>undefined</td></tr><tr><td><code>myArray[3].gender</code></td><td>TypeError: Cannot read...</td></tr></tbody></table>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="访问阵列"><a aria-hidden="true" tabindex="-1" href="#访问阵列"><span class="icon icon-link"></span></a>访问阵列</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">let</span> myArray <span class="token operator">=</span> <span class="token punctuation">[</span>
</span><span class="code-line"> <span class="token string">"Jason"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string">"Doe"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token number">39</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string">"M"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token number">70000</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token boolean">true</span>
</span><span class="code-line"><span class="token punctuation">]</span><span class="token punctuation">;</span>
</span></code></pre>
<hr>
<table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><code>myArray[1]</code></td><td>"Doe"</td></tr><tr><td><code>myArray[5]</code></td><td>true</td></tr><tr><td><code>myArray[6]</code></td><td>undefined</td></tr></tbody></table>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="另见"><a aria-hidden="true" tabindex="-1" href="#另见"><span class="icon icon-link"></span></a>另见</h2><div class="wrap-body">
<ul>
<li><a href="https://www.json.org/json-en.html">JSON</a> <em>(json.org)</em></li>
<li><a href="http://jsoneditoronline.org/">JSON Editor Online</a> <em>(jsoneditoronline.org)</em></li>
<li><a href="https://tableconvert.com/json-to-markdown">Convert JSON Array to Markdown Table, CSV and more</a> <em>(tableconvert.com)</em></li>
</ul>
</div></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer></body>
</html>