如何處理JSON中可能為"假值"的輸入？備選方案探討

Question

假設，我不確定是否存在已選取的authorities（但如果存在，我希望選擇它們）。如果沒有選中的authorities，我希望jQuery選擇authorities，無論它們是否被選中（實際上，這意味著檢索隱藏輸入的值）。我對使用JS的“真值”/“假值”概念來處理這種情況的想法是：

    let user = {
        id: $(this).find('[name=id]').val(),
        username: $(this).find('[name=username]').val(),
        password: $(this).find('[name=password]').val(),
        name: $(this).find('[name=name]').val(),
        lastName: $(this).find('[name=lastName]').val(),
        department: $(this).find('[name=department]').val(),
        salary: $(this).find('[name=salary]').val(),
        age: $(this).find('[name=age]').val(),
        email: $(this).find('[name=email]').val(),
        enabledByte: $(this).find('[name=enabledByte]').val(),
        authorities: JSON.parse($(this).find('[name=authorities]:checked').val()) || 
                    JSON.parse($(this).find('[name=authorities]').val())
    };

然而，它不起作用。有趣的是，它在下面的程式碼片段中確實起作用。難道val()在匹配失敗時傳回的undefined不是「假值」嗎？想想看！我最好的猜測是，當解析undefined時，JSON.parse()會拋出錯誤，而不是傳回一些我希望的「假值」。這個方法不接受“param OR param”，對嗎？

你認為我應該如何提供這種情況的回退（除了當然，單獨檢查選中的authorities的“假值”，這對我來說有點冗長） ？

 

<头>
<元字符集=“UTF-8”>


<标题>管理頁面

<正文>




所有用戶


新增使用者






<标题>
名稱
姓氏
部門
電子郵件

<正文>

填寫表格
<表格>

<标签=“名称”>名稱：

                           


姓氏：

                           


部門：

<选项值=“IT”>IT
<选项值=“HR”>人力資源
<选项值=“会计”>會計

                           


電子郵件：

                           



           
<脚本>
$(文檔).ready(函數() {
$('form').on('提交', 非同步函數(事件) {
event.preventDefault();
$('tbody').append(
``
）；
const SubmitButton = $(this).find('[type=submit]');
常量形式 = $(this);

提交按鈕.removeClass('btn-primary')
.addClass('btn-成功')
.attr('value', '用戶已新增！')
.attr('類型', '按鈕')
.click(() => $('[href="#users-table"]').tab('show'));

設定超時（函數（）{
commitButton.removeClass('btn-成功')
.addClass('btn-primary')
.attr('值', '提交')
.attr('類型            

                

                    
                    2
                

                

                    
                                                    
                                            
                    0
                
                

                    
                                                    
                                            
                    0
                
            

                

                    
                    

                        P粉161939752
                        

                    
                
                

                    

                    

                        

                            回覆
                        
                    
                
            

                

                    
全部回覆(2)
                    我來回復
                    關閉
                
                


                                

                    
                    

                        

                            

                                P粉8183062802023-09-11 00:47:41
                                2樓
                            
                            
問題在於如果選擇器找不到任何符合項，.val()回傳undefined，而JSON.parse(undefined)會引發例外。 
在JSON.parse()的參數清單中執行備用方案，這樣您將解析成功取得的任何值。 
authorities: JSON.parse($(this).find('[name=authorities]:checked').val() || 
                        $(this).find('[name=authorities]:first').val())
                            

                                 
                                點贊 +0
                                

                                    新增回覆
                                    关闭回复
                                
                            
                                                            

                                    

                                        

                                            

                                                
                                                P粉161939752
                                            
                                        
                                        
                                        回覆
                                    
                                
                            
                            

                                

                                    
                                

                            


                        
                    

                
                

                                

                    
                    

                        

                            

                                P粉5613239752023-09-11 00:35:45
                                1樓
                            
                            
根據您的使用情況，您有幾個選項：

您可以像這樣組合JSON.parse。這將使它在解析之前回退到其他字串，因此如果第一個值是undefined，它不會出錯。但是，如果兩個值都是undefined或其中一個是無效的JSON，這將導致錯誤。 

JSON.parse($(this).find('[name=authorities]:checked').val()) || $(this).find('[name=authorities]').val());


如果您知道這些值要么是有效的JSON，要么是undefined，您可以回退到null。 null是一個有效的JSON值，可以解析。但是，如果任何一個值是無效的JSON，仍然會出錯。 

JSON.parse($(this).find('[name=authorities]:checked').val()) || $(this).find('[name=authorities]').val() || null);


如果有可能任何一個值都是無效的JSON，您可以將其包圍在try/catch區塊中。這樣，即使它是無效的，也不會拋出錯誤。這是最安全的選項，永遠不會出錯。 

// Helper to make it easier to do this inline
function safeJsonParse(string) {
  try {
    return JSON.parse(string);
  } catch {
    // JSON is invalid. Will implicitly return undefined.
  }
}

safeJsonParse($(this).find('[name=authorities]:checked').val()) || safeJsonParse($(this).find('[name=authorities]').val())

                            

                                 
                                點贊 +0
                                

                                    新增回覆
                                    关闭回复
                                
                            
                                                            

                                    

                                        

                                            

                                                
                                                P粉161939752
                                            
                                        
                                        
                                        回覆
                                    
                                
                            
                            

                                

                                    
                                

                            


                        
                    

                
                

                



                

            

            
            

                

                    
熱門專題
                    更多>
                    
                
                


                    

                                                

                             
                            CakePHP 教程 
                        
                                                

                             
                            CakePHP 教程 
                        
                                                

                             
                            Laravel 教程 
                        
                                                

                             
                            PHP教程 
                        
                                            
                
 
            
            


                

                    
 熱門文章 
                
                

                    

                                                

                            

                                
                                下載CoinEx安卓手機版的方法
                            
                        
                                                

                            

                                
                                英國提出法案將比特幣和 NFT 等數位資產歸類為個人財產
                            
                        
                                                

                            

                                
                                2024 年 9 月的《NBA 2K25》置物櫃代碼
                            
                        
                                                

                            

                                
                                word文件中有白色底色怎麼去除 Word文件文件底色怎麼取消方法
                            
                        
                                                

                            

                                
                                win10遠端連線提示NLA怎麼辦 win10遠端連線提示NLA詳解
                            
                        
                                            
                
            
            

                

                    
熱門教學
                    更多>
                    
                
                

                    

                        
相關教學 

                        
熱門推薦

                        
最新課程

                    
                    

                                                

                            
                                
                            
                            

                                最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)
                                

                                    
1402826 

                                                                            

                                            
                                        
                                                                    
                            
                        
                                                

                            
                                
                            
                            

                                php入門教程之一週學會PHP
                                

                                    
4230040 

                                                                            

                                            
                                        
                                                                    
                            
                        
                                                

                            
                                
                            
                            

                                JAVA 初級入門影片教學
                                

                                    
2416439 

                                                                            

                                            
                                        
                                                                    
                            
                        
                                            
                    

                                                

                            
                                
                            
                            

                                最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)
                                

                                    
1402826 
                                                                            

                                            
                                        
                                                                      
                                
                            
                        
                                                

                            
                                
                            
                            

                                JAVA 初級入門影片教學
                                

                                    
2416439 
                                                                            

                                            
                                        
                                                                      
                                
                            
                        
                                                

                            
                                
                            
                            

                                小甲魚零基礎入門學習Python影片教學
                                

                                    
497928 
                                                                            

                                            
                                        
                                                                      
                                
                            
                        
                                                

                            
                                
                            
                            

                                Web前端開發極速入門
                                

                                    
214150 
                                                                            

                                            
                                        
                                                                      
                                
                            
                        
                                                

                            
                                
                            
                            

                                零基礎精通 PS 影片教學
                                

                                    
858527 
                                                                            

                                            
                                        
                                                                      
                                
                            
                        
                                            
                    

                                                

                            
                                
                            
                            

                                【web前端】Node.js快速入門
                                

                                    
4643 

                                                                            

                                            
                                        
                                                                    
                            
                        
                                                

                            
                                
                            
                            

                                國外Web開發全端課程全集
                                

                                    
3605 

                                                                            

                                            
                                        
                                                                    
                            
                        
                                                

                            
                                
                            
                            

                                Go語言實戰之 GraphQL
                                

                                    
3092 

                                                                            

                                            
                                        
                                                                    
                            
                        
                                                

                            
                                
                            
                            

                                550W粉絲大佬手把手從零學JavaScript
                                

                                    
557 

                                                                            

                                            
                                        
                                                                    
                            
                        
                                                

                            
                                
                            
                            

                                python大神Mosh，零基礎小白6小時完全入門
                                

                                    
16011 

                                                                            

                                            
                                        
                                                                    
                            
                        
                                            
                
                
            
            

                

                    
最新下載
                    更多>
                    
                

                                

                

                    

                        
網站特效 

                        
網站源碼

                        
網站素材

                        
前端模板

                    
                    

                                                

                            

                                
                                [表單按鈕] jQuery企業留言表單聯絡程式碼
                            
                        
                                                

                            

                                
                                [播放器特效] HTML5 MP3音樂盒播放特效
                            
                        
                                                

                            

                                
                                [選單導航] HTML5酷炫粒子動畫導覽選單特效
                            
                        
                                                

                            

                                
                                [表單按鈕] jQuery可視化表單拖曳編輯程式碼
                            
                        
                                                

                            

                                
                                [播放器特效] VUE.JS仿酷狗音樂播放器代碼
                            
                        
                                                

                            

                                
                                [html5特效] 經典html5推箱子小遊戲
                            
                        
                                                

                            

                                
                                [圖片特效] jQuery滾動添加或減少圖片特效
                            
                        
                                                

                            

                                
                                [相簿特效] CSS3個人相簿封面懸停放大特效
                            
                        
                                            

                    

                                                

                            

                                
                                [Bootstrap模板] 有機蔬果供應商網頁範本 Bootstrap5
                            
                        
                                                

                            

                                
                                [後端模板] Bootstrap3多功能資料資訊後台管理響應式網頁範本-Novus
                            
                        
                                                

                            

                                
                                [Bootstrap模板] 房產資源服務平台網頁範本 Bootstrap5
                            
                        
                                                

                            

                                
                                [Bootstrap模板] 簡約履歷資料網頁範本 Bootstrap4
                            
                        
                                                

                            

                                
                                [Bootstrap模板] bootstrap響應式寬螢幕圖書教育網站範本-DREAMLIFE
                            
                        
                                                

                            

                                
                                [後端模板] MAC風格響應式藍色企業CMS後台管理系統模版
                            
                        
                                                

                            

                                
                                [後端模板] 響應式漸層大氣後台管理系統網站模板-usinessbox
                            
                        
                                                

                            

                                
                                [Bootstrap模板] 響應式蔬果商店網站模板-Organio
                            
                        
                                            

                    

                                                

                            

                                
                                [PNG素材] 可愛的夏天元素向量素材(EPS+PNG)
                            
                        
                                                

                            

                                
                                [PNG素材] 四個紅色的 2023 畢業徽章的向量素材(AI+EPS+PNG)
                            
                        
                                                

                            

                                
                                [banner圖] 唱歌的小鳥和裝滿花朵的推車設計春天banner向量素材(AI+EPS)
                            
                        
                                                

                            

                                
                                [PNG素材] 金色的畢業帽向量素材(EPS+PNG)
                            
                        
                                                

                            

                                
                                [PNG素材] 黑白風格的山脈圖示向量素材(EPS+PNG)
                            
                        
                                                

                            

                                
                                [PNG素材] 不同顏色披風和不同姿勢的超級英雄剪影向量素材(EPS+PNG)
                            
                        
                                                

                            

                                
                                [banner圖] 扁平風格的植樹節banner向量素材(AI+EPS)
                            
                        
                                                

                            

                                
                                [PNG素材] 九種漫畫風格的爆炸聊天氣泡向量素材(EPS+PNG)
                            
                        
                                            

                    

                                                

                            

                                
                                [前端模板] 家居裝潢清潔維修服務公司網站模板
                            
                        
                                                

                            

                                
                                [前端模板] 清新配色個人求職履歷引導頁模板
                            
                        
                                                

                            

                                
                                [前端模板] 設計師創意求職履歷網頁模板
                            
                        
                                                

                            

                                
                                [前端模板] 現代工程建築公司網站模板
                            
                        
                                                

                            

                                
                                [前端模板] 教育服務機構響應式HTML5模板
                            
                        
                                                

                            

                                
                                [前端模板] 網上電子書店商城網站模板
                            
                        
                                                

                            

                                
                                [前端模板] IT技術解決互聯網公司網站模板
                            
                        
                                                

                            

                                
                                [前端模板] 紫色風格外匯交易服務網站模板
                            
                        
                                            

                
                
            

        

    

        

            

                

                    

                        關於我們
                        免責聲明
                        Sitemap
                        

                    
                    
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！
                
              
            
        
    
    



約翰
美國能源部
IT
john_d@gmail.com


簡
美國能源部
人力資源
jane_d@gmail.com



     

       
   




${$(this).find('[name=name]').val()}


${$(this).find('[name=last-name]').val()}


${$(this).find('[name=部門]').val()}


${$(this).find('[name=email]').val() || '不適用'}


            
            
            
            
        

        
        
    

Answer 1

問題在於如果選擇器找不到任何符合項，.val()回傳undefined，而JSON.parse(undefined)會引發例外。

在JSON.parse()的參數清單中執行備用方案，這樣您將解析成功取得的任何值。

authorities: JSON.parse($(this).find('[name=authorities]:checked').val() || 
                        $(this).find('[name=authorities]:first').val())

Answer 2

根據您的使用情況，您有幾個選項：

1. 您可以像這樣組合JSON.parse。這將使它在解析之前回退到其他字串，因此如果第一個值是undefined，它不會出錯。但是，如果兩個值都是undefined或其中一個是無效的JSON，這將導致錯誤。

JSON.parse($(this).find('[name=authorities]:checked').val()) || $(this).find('[name=authorities]').val());

2. 如果您知道這些值要么是有效的JSON，要么是undefined，您可以回退到null。 null是一個有效的JSON值，可以解析。但是，如果任何一個值是無效的JSON，仍然會出錯。

JSON.parse($(this).find('[name=authorities]:checked').val()) || $(this).find('[name=authorities]').val() || null);

3. 如果有可能任何一個值都是無效的JSON，您可以將其包圍在try/catch區塊中。這樣，即使它是無效的，也不會拋出錯誤。這是最安全的選項，永遠不會出錯。

// Helper to make it easier to do this inline
function safeJsonParse(string) {
  try {
    return JSON.parse(string);
  } catch {
    // JSON is invalid. Will implicitly return undefined.
  }
}

safeJsonParse($(this).find('[name=authorities]:checked').val()) || safeJsonParse($(this).find('[name=authorities]').val())