javascript json對(duì)象小技巧之鍵名作為變量用法分析

更新時(shí)間：2019年11月11日 08:42:25 作者：傾聽(tīng)歲月

這篇文章主要介紹了javascript json對(duì)象小技巧之鍵名作為變量用法,結(jié)合實(shí)例形式分析了json對(duì)象變量操作相關(guān)使用技巧,需要的朋友可以參考下

本文實(shí)例講述了javascript json對(duì)象小技巧之鍵名作為變量用法。分享給大家供大家參考，具體如下：

有時(shí)候在項(xiàng)目開(kāi)發(fā)過(guò)程中，我們需要json對(duì)象的鍵名作為一個(gè)變量，鍵名可變，傳統(tǒng)的json格式不支持這個(gè)，怎么辦呢？

傳統(tǒng)的json數(shù)據(jù)格式

<script type="text/javascript">
  var json={
    name : "譚勇"
  }
  console.log(json.name);
</script>

這樣是沒(méi)有問(wèn)題的，那么根據(jù)思路我們這樣

<script type="text/javascript">
  var key = "name";
  var json = {
    key : "譚勇"
  }
  console.log(json.name);
</script>

這樣會(huì)成功嗎？答案是錯(cuò)了，javascript 會(huì)提示你一個(gè)錯(cuò)誤 name undefined 沒(méi)有定義

鍵名作為變量實(shí)例如下

<script type="text/javascript">
  var json = {};
  json["name"] = "譚勇";
  console.log(json.name);
</script>

這樣就可以輸出來(lái)了；

甚至我們還可以這樣

<script type="text/javascript">
  var key = "name";
  var json = {};
  json[key] = "譚勇";
  console.log(json.name);
</script>

有點(diǎn)類(lèi)似數(shù)組，你可以寫(xiě)個(gè)demo親自測(cè)試！

PS：關(guān)于json操作，這里再為大家推薦幾款比較實(shí)用的json在線工具供大家參考使用：

在線JSON代碼檢驗(yàn)、檢驗(yàn)、美化、格式化工具：
http://tools.jb51.net/code/json

JSON在線格式化工具：
http://tools.jb51.net/code/jsonformat

在線XML/JSON互相轉(zhuǎn)換工具：
http://tools.jb51.net/code/xmljson

json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具：
http://tools.jb51.net/code/jsoncodeformat

在線json壓縮/轉(zhuǎn)義工具：
http://tools.jb51.net/code/json_yasuo_trans

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題：《JavaScript中json操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

微信小程序配置視圖層數(shù)據(jù)綁定相關(guān)示例
這篇文章主要為大家介紹了微信小程序配置視圖層數(shù)據(jù)綁定相關(guān)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪<BR>
2022-04-04
通過(guò)共享Promise解決前端重復(fù)請(qǐng)求的代碼示例
在處理前端重復(fù)請(qǐng)求問(wèn)題時(shí),通過(guò)共享?Promise?實(shí)現(xiàn)請(qǐng)求合并和結(jié)果復(fù)用是常見(jiàn)的高效解決方案,本文給大家介紹了詳細(xì)實(shí)現(xiàn)思路和代碼示例,需要的朋友可以參考下
2025-03-03
javascript實(shí)現(xiàn)可拖動(dòng)變色并關(guān)閉層窗口實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)可拖動(dòng)變色并關(guān)閉層窗口的方法,涉及javascript操作層的樣式與屬性的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
JS中Promise函數(shù)then的奧秘探究
then()方法用于指定當(dāng)前實(shí)例狀態(tài)發(fā)生改變時(shí)的回調(diào)函數(shù)。它返回一個(gè)新的Promise實(shí)例。下面這篇文章主要給大家介紹了關(guān)于JS中Promise函數(shù)then的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧
2018-07-07
js統(tǒng)計(jì)頁(yè)面上每個(gè)標(biāo)簽的數(shù)量實(shí)例代碼
這篇文章通過(guò)實(shí)例代碼給大家講解了通過(guò)js統(tǒng)計(jì)頁(yè)面上每個(gè)標(biāo)簽的數(shù)量，代碼很簡(jiǎn)單，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-05-05
JavaScript:Div層拖動(dòng)效果實(shí)例代碼
這篇文章介紹了JavaScript:Div層拖動(dòng)效果實(shí)例代碼，有需要的朋友可以參考一下
2013-08-08
返回對(duì)象在當(dāng)前級(jí)別中是第幾個(gè)元素的實(shí)現(xiàn)代碼
我就是想怎么獲取每個(gè)層相對(duì)于父級(jí)層是第幾個(gè)，需要的朋友可以參考下。
2011-01-01
JS解析url查詢參數(shù)的簡(jiǎn)單代碼
本文通過(guò)簡(jiǎn)單代碼給大家介紹了js解析url查詢參數(shù)的方法，然后在文章下面給大家介紹了js獲取url參數(shù)值的兩種方式，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-08-08
JS中JSON對(duì)象和String之間的互轉(zhuǎn)及處理技巧
JSON：JavaScript 對(duì)象表示法（JavaScript Object Notation），其實(shí)JSON就是一個(gè)JavaScript的對(duì)象(Object)而已。接下來(lái)通過(guò)本文給大家介紹JS中JSON對(duì)象和String之間的互轉(zhuǎn)及處理技巧，需要的朋友一起學(xué)習(xí)吧
2016-04-04
原生JavaScript實(shí)現(xiàn)拖動(dòng)校驗(yàn)功能
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)拖動(dòng)校驗(yàn)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09