首頁 > 後端開發 > php教程 > javascript - JSON.parse()會對傳回的陣列依照key值排序?怎麼讓它不排序

javascript - JSON.parse()會對傳回的陣列依照key值排序?怎麼讓它不排序

WBOY
發布: 2016-08-25 10:37:30
原創
3800 人瀏覽過

我在後台將一個已經排序過後的數組序列化後傳給前台,前台在轉的時候將結果自動按照key值排序,key值是數據對應的id值,在必須帶上key值的前提下,如何讓它不排序?請多指教

javascript - JSON.parse()會對傳回的陣列依照key值排序?怎麼讓它不排序
上面是正確的順序,下面是json.parse()之後的順序,可能是我表述的不太好

回覆內容:

我在後台將一個已經排序過後的數組序列化後傳給前台,前台在轉的時候將結果自動按照key值排序,key值是數據對應的id值,在必須帶上key值的前提下,如何讓它不排序?請多指教

javascript - JSON.parse()會對傳回的陣列依照key值排序?怎麼讓它不排序
上面是正確的順序,下面是json.parse()之後的順序,可能是我表述的不太好

JSON.parse生成是對象,對象的key是沒有順序的。

JavaScript 物件確實是無序的,可能會因為 HASH 等原因看起來像是按 key 值排序了。

如果你回傳的是一個有序的陣列應該不會亂序。如果亂序,多半你是回傳出來的一個鍵值對物件。給你一段測試程式碼。

<code class="javascript">// 随机生成 data
let data = [];
for (var i = 0; i < 10; i++) {
    let textOrder = ~~(Math.random() * 10000).toString();
    textOrder = `000${textOrder}`;
    textOrder = textOrder.substr(textOrder.length - 4);

    data.push({
        key: ~~(Math.random() * 1000),
        text: `text${textOrder}`
    });
}

// 按 text 排序
data.sort((a, b) => {
    let ta = a.text;
    let tb = b.text;
    return ta < tb ? -1 : (ta > tb ? 1 : 0);
});

// 生成 JSON
var json = JSON.stringify(data);
console.log(json);

// parse
console.log(JSON.parse(json));</code>
登入後複製

補充

我對 PHP 不熟,大概應該這麼處理下

<code class="php">$data = array(20=>'a',10=>'b');
echo json_encode($data);
// {"20":"a","10":"b"}
// 上面是原来的输出结果

$list = [];
foreach ($data as $k => $v) {
    array_push($list, array("key" => $k, "value" => $v));
}
echo json_encode($list);
[{"key":20,"value":"a"},{"key":10,"value":"b"}]</code>
登入後複製

這樣得到的 JSON,parse 出來是一個數組,就是原來的順序了。

JSON.parse並不會導致序列亂掉,我猜測你寫給前端的是{key1: value1,key2: value2}類似於Map的json結構,這樣的東西前端沒法遍歷,使用Object.keys()這樣會導致你說的亂序。建議你回[{key: value}, {key: value}, {key: 值}]這樣的結構可以直接遍歷。

JSON.parse 我的印像中是 將「{}」字串轉換為物件

數組前台使用JSON.parse順序應該不會變吧,我沒理解題主的意思?

如果樓主是想前台用for...of...的話,我覺得沒辦法辦到啊

自己 random 一下唄

把key值轉字串,就不會排序了.

參考:http://php.net/manual/zh/func...
重點關注下option 常數

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板