JavaScript判斷對象是否為空對象的幾種方法


JavaScript判斷對象是否為空對象的幾種方法
https://blog.csdn.net/MyFuture_MyDream/article/details/116225441

var data = {};
var b = $.isEmptyObject(data); //true

判斷是否為空對象在實際開發中很常見,今天就讓我們來整理一下有哪些方法吧。

1、空對象對應的字符串為 "{}"


   
   
   
           
  1. var data = {};
  2. var b =  JSON. stringify(data) ==  "{}";
  3. console. log(b);  // true

2、for in


   
   
   
           
  1. var obj = {};
  2. var b =  function ( ) {
  3.    for ( var key  in obj) {
  4.      return  false;
  5.   }
  6.    return  true;
  7. };
  8. console. log( b());  //true

3、jquery 的 isEmptyObject()方法

這個方法是對第二個方法的封裝。


   
   
   
           
  1. var data = {};
  2. var b = $. isEmptyObject(data);
  3. console. log(b);  //true

4、Object.getOwnPropertyNames()

Object 對象的 getOwnPropertyNames 方法,獲取到對象中的屬性名,存到一個數組中,返回數組對象,我們可以通過判斷數組的 length 來判斷此對象是否為空。


   
   
   
           
  1. var data = {};
  2. var arr =  Object. getOwnPropertyNames(data);
  3. console. log(arr. length ==  0);  // true

5、ES6 的 Object.keys()

此方法也是返回對象中屬性名組成的數組。


   
   
   
           
  1. var data = {};
  2. var arr =  Object. keys(data);
  3. console. log(arr. length ==  0);  // true

JSON.stringify()擴展

JSON.stringify() 方法用於將 JavaScript 值轉換為 JSON 字符串。
語法:

JSON.stringify(value[, replacer[, space]])

  
  
  
          

參數說明:

  • value:必需,要轉換的 JavaScript 值(通常為對象或數組)。

  • replacer: 可選。用於轉換結果的函數或數組。 如果 replacer 為函數,則 JSON.stringify 將調用該函數,並傳入每個成員的鍵和值。使用返回值而不是原始值。 如果此函數返回 undefined,則排除成員。根對象的鍵是一個空字符串:""。如果 replacer 是一個數組,則僅轉換該數組中具有鍵值的成員。成員的轉換順序與鍵在數組中的順序一樣。

  • space:可選,文本添加縮進、空格和換行符,如果 space 是一個數字,則返回值文本在每個級別縮進指定數目的空格,如果 space 大於 10,則文本縮進 10 個空格。space 也可以使用非數字,如:\t。

  • 返回值:返回包含 JSON 文本的字符串。

JSON.stringify()特性挺多的,具體如下:

1、第一大特性

對於 undefined、任意的函數以及 symbol 三個特殊的值分別作為對象屬性的值、數組元素、單獨的值時 JSON.stringify() 將返回不同的結果。 來看這道題:


   
   
   
           
  1. const data = {
  2.    a"aaa",
  3.    bundefined,
  4.    cSymbol( "dd"),
  5.    fnfunction ( ) {
  6.      return  true;
  7.   },
  8. };
  9. JSON. stringify(data);  // 輸出:?
  10. // "{"a":"aaa"}"

這是因為 undefined、任意的函數以及 symbol 作為對象屬性值時 JSON.stringify() 將跳過(忽略)對它們進行序列化。

假設 undefined、任意的函數以及 symbol 值作為數組元素會是怎樣呢?


   
   
   
           
  1. JSON. stringify([
  2.    "aaa",
  3.    undefined,
  4.    function  aa( ) {
  5.      return  true;
  6.   },
  7.    Symbol( "dd"),
  8. ]);  // 輸出:?
  9. // "["aaa",null,null,null]"

這是因為 undefined、任意的函數以及 symbol 作為數組元素值時,JSON.stringify() 會將它們序列化為 null。

還有,undefined、任意的函數以及 symbol 被 JSON.stringify() 作為單獨的值進行序列化時都會返回 undefined。


   
   
   
           
  1. JSON. stringify( function  a( ) {
  2.    console. log( "a");
  3. });
  4. // undefined
  5. JSON. stringify( undefined);
  6. // undefined
  7. JSON. stringify( Symbol( "dd"));
  8. // undefined

小結

  • undefined、任意的函數以及 symbol 作為對象屬性值時 JSON.stringify() 對跳過(忽略)它們進行序列化。

  • undefined、任意的函數以及 symbol 作為數組元素值時,JSON.stringify() 將會將它們序列化為 null。

  • undefined、任意的函數以及 symbol 被 JSON.stringify() 作為單獨的值進行序列化時,都會返回 undefined。

2、第二大特性

非數組對象的屬性不能保證以特定的順序出現在序列化后的字符串中。因為 JSON.stringify() 序列化時會忽略一些特殊的值,所以不能保證序列化后的字符串還是以特定的順序出現(數組除外)。


   
   
   
           
  1. const data = {
  2.    a"aaa",
  3.    bundefined,
  4.    cSymbol( "dd"),
  5.    fnfunction ( ) {
  6.      return  true;
  7.   },
  8.    d"ddd",
  9. };
  10. JSON. stringify(data);  // 輸出:?
  11. // "{"a":"aaa","d":"ddd"}"
  12. JSON. stringify([
  13.    "aaa",
  14.    undefined,
  15.    function  aa( ) {
  16.      return  true;
  17.   },
  18.    Symbol( "dd"),
  19.    "eee",
  20. ]);  // 輸出:?
  21. // "["aaa",null,null,null,"eee"]"

3、第三大特性

轉換值如果有 toJSON() 函數,該函數返回什么值,序列化結果就是什么值,並且忽略其他屬性的值。


   
   
   
           
  1. JSON. stringify({
  2.      say"hello JSON.stringify",
  3.      toJSONfunction( ) {
  4.        return  "today i learn";
  5.     }
  6.   })
  7. // "today i learn"

4、第四大特性

JSON.stringify() 將會正常序列化 Date 的值。


   
   
   
           
  1. JSON.stringify({ now:  new  Date() });
  2. //  "{"now ":" 2019 -12 -08T07: 42: 11.973Z "}"

5、第五大特性

NaN 和 Infinity 格式的數值及 null 都會被當做 null。


   
   
   
           
  1. JSON.stringify( NaN)
  2. //  "null"
  3. JSON.stringify( null)
  4. //  "null"
  5. JSON.stringify( Infinity)
  6. //  "null"

6、第六大特性

布爾值、數字、字符串的包裝對象在序列化過程中會自動轉換成對應的原始值。


   
   
   
           
  1. JSON.stringify([ new  Number( 1),  new  String( "false"),  new  Boolean( false)]);
  2. //  "[1," false ",false]"

7、第七大特性

其他類型的對象,包括 Map/Set/WeakMap/WeakSet,僅會序列化可枚舉的屬性。


   
   
   
           
  1. // 不可枚舉的屬性默認會被忽略:
  2. JSON.stringify( 
  3.      Object.create(
  4.          null
  5.         { 
  6.             x: { value:  'json', enumerable:  false }, 
  7.             y: { value:  'stringify', enumerable:  true } 
  8.         }
  9.     )
  10. );
  11. //  "{"y ":"stringify "}"

8、第八大特性

深拷貝最粗暴的方式是JSON.parse(JSON.stringify()),這個方式實現深拷貝會因為序列化的諸多特性從而導致諸多的坑點:比如現在我們要說的循環引用問題。


   
   
   
           
  1. // 對包含循環引用的對象(對象之間相互引用,形成無限循環)執行此方法,會拋出錯誤。 
  2. const obj = {
  3.    name"loopObj"
  4. };
  5. const loopObj = {
  6.   obj
  7. };
  8. // 對象之間形成循環引用,形成閉環
  9. obj. loopObj = loopObj;
  10. // 封裝一個深拷貝的函數
  11. function  deepClone( obj) {
  12.    return  JSON. parse( JSON. stringify(obj));
  13. }
  14. // 執行深拷貝,拋出錯誤
  15. deepClone(obj)
  16. /**
  17.  VM44:9 Uncaught TypeError: Converting circular structure to JSON
  18.     --> starting at object with constructor 'Object'
  19.     |     property 'loopObj' -> object with constructor 'Object'
  20.     --- property 'obj' closes the circle
  21.     at JSON.stringify (<anonymous>)
  22.     at deepClone (<anonymous>:9:26)
  23.     at <anonymous>:11:13
  24.  */

 歡迎關注公眾號【前端技術驛站】,關注獲取視頻資源,共同學習!

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM