tw4ld6 发表于 2024-10-10 04:20:14

Javascript对Json数据快速进行排序


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在前端<span style="color: black;">运用</span>js对api返回的数据进行快速排序，<span style="color: black;">能够</span>有效减<span style="color: black;">少许</span>据请求，<span style="color: black;">加强</span>页面的响应和用户体验。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">直接分享代码如下：</p>sortJson(<span style="color: black;">array</span>, field, reverse) {
    <span style="color: black;">/**
      * json 数据排序
      * <span style="color: black;">@param</span>&lt;array&gt; array 原始json字符串
      *<span style="color: black;">@param</span> &lt;field&gt; string 排序字段
      * <span style="color: black;">@param</span> &lt;reverse&gt; string 倒序
      */</span>

    <span style="color: black;">//数组长度<span style="color: black;">少于</span>2 或 <span style="color: black;">无</span>指定排序字段 或 不是json格式数据</span>
    <span style="color: black;">if</span> (<span style="color: black;">array</span>.length &lt; <span style="color: black;">2</span>|| !field || typeof<span style="color: black;">array</span>[<span style="color: black;">0</span>] !== <span style="color: black;">"object"</span>) <span style="color: black;">return</span> <span style="color: black;">array</span>

    <span style="color: black;">//数字类型排序</span>
    <span style="color: black;">if</span> (typeof <span style="color: black;">array</span>[<span style="color: black;">0</span>] === <span style="color: black;">"number"</span>) {
    <span style="color: black;">array</span>.sort(<span style="color: black;"><span style="color: black;">function</span> <span style="color: black;">(x, y)</span> </span>{
    <span style="color: black;">return</span> x - y
    })
    }

    <span style="color: black;">//字符串类型排序</span>
    <span style="color: black;">if</span> (typeof <span style="color: black;">array</span>[<span style="color: black;">0</span>] === <span style="color: black;">"string"</span>) {
    <span style="color: black;">array</span>.sort(<span style="color: black;"><span style="color: black;">function</span> <span style="color: black;">(x, y)</span> </span>{
    <span style="color: black;">return</span> x.localeCompare(y)
    })
    }

    <span style="color: black;">//倒序</span>
    <span style="color: black;">if</span> (reverse) {
    <span style="color: black;">array</span>.reverse()
    }<span style="color: black;">return</span> <span style="color: black;">array</span>
    }
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">原始数据：</p><span style="color: black;">let</span> <span style="color: black;">obj</span> <span style="color: black;">=</span> <span style="color: black;">[</span>
    <span style="color: black;">{</span>
    <span style="color: black;">id:</span> <span style="color: black;">1</span><span style="color: black;">,</span>
    <span style="color: black;">name:</span> <span style="color: black;">jake</span><span style="color: black;">,</span>
    <span style="color: black;">age:</span> <span style="color: black;">12</span><span style="color: black;">,</span>
    <span style="color: black;">addres:</span> <span style="color: black;">成都市</span>
    <span style="color: black;">},</span>
    <span style="color: black;">{</span>
    <span style="color: black;">id:</span> <span style="color: black;">2</span><span style="color: black;">,</span>
    <span style="color: black;">name:</span> <span style="color: black;">rose</span><span style="color: black;">,</span>
    <span style="color: black;">age:</span> <span style="color: black;">32</span><span style="color: black;">,</span>
    <span style="color: black;">addres:</span> <span style="color: black;">重庆市</span>
    <span style="color: black;">},</span>
    <span style="color: black;">{</span>
    <span style="color: black;">id:</span> <span style="color: black;">3</span><span style="color: black;">,</span>
    <span style="color: black;">name:</span> <span style="color: black;">lily</span><span style="color: black;">,</span>
    <span style="color: black;">age:</span> <span style="color: black;">22</span><span style="color: black;">,</span>
    <span style="color: black;">addres:</span> <span style="color: black;">长沙市</span>
    <span style="color: black;">}</span>
    <span style="color: black;">]</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">调用<span style="color: black;">办法</span>及输出结果如下：</p>console.log(sortJson(obj, <span style="color: black;">age</span>))
    <span style="color: black;">//输出</span>
    [<span style="color: black;">{<span style="color: black;">"id"</span>:1,<span style="color: black;">"name"</span>:<span style="color: black;">"jake"</span>,<span style="color: black;">"age"</span>:12,<span style="color: black;">"addres"</span>:<span style="color: black;">"成都市"</span>},{<span style="color: black;">"id"</span>:3,<span style="color: black;">"name"</span>:<span style="color: black;">"lily"</span>,<span style="color: black;">"age"</span>:22,<span style="color: black;">"addres"</span>:<span style="color: black;">"长沙市"</span>},{<span style="color: black;">"id"</span>:2,<span style="color: black;">"name"</span>:<span style="color: black;">"rose"</span>,<span style="color: black;">"age"</span>:32,<span style="color: black;">"addres"</span>:<span style="color: black;">"重庆市"</span>}</span>]

    console.log(sortJson(obj, <span style="color: black;">name</span>))
    <span style="color: black;">//输出</span>
    [<span style="color: black;">{<span style="color: black;">"id"</span>:1,<span style="color: black;">"name"</span>:<span style="color: black;">"jake"</span>,<span style="color: black;">"age"</span>:12,<span style="color: black;">"addres"</span>:<span style="color: black;">"成都市"</span>},{<span style="color: black;">"id"</span>:3,<span style="color: black;">"name"</span>:<span style="color: black;">"lily"</span>,<span style="color: black;">"age"</span>:22,<span style="color: black;">"addres"</span>:<span style="color: black;">"长沙市"</span>},{<span style="color: black;">"id"</span>:2,<span style="color: black;">"name"</span>:<span style="color: black;">"rose"</span>,<span style="color: black;">"age"</span>:32,<span style="color: black;">"addres"</span>:<span style="color: black;">"重庆市"</span>}</span>]




7wu1wm0 发表于 2024-11-14 09:36:24

回顾过去一年，是艰难的一年；展望未来，是辉煌的一年。
页: [1]
查看完整版本: Javascript对Json数据快速进行排序