你不知道的祕密之 JSON.stringify

• 普通用法 ( 注意JSON數據的鍵名都是帶雙引號的字符串 )

  	const foo = {
  	  name: 'lpj',
  	  age: 18,
  	  123: 123,
  	};
  

  	document.write(foo);
  	document.write(JSON.stringify(foo));
  	alert(foo);
  	alert(JSON.stringify(foo));
  

• 進階用法，第二個參數是數組

• 如果我們只想獲取foo中的某一個屬性，直接打印foo就會打印出過多沒用的信息，不利於我們查找屬性

  	const foo = {
  	  id: 001,
  	  type: '打包機',
  	  name: '無敵打包機',
  	  price: 12345,
  	  attrs: [{
  	    a: 'a',
  	    b: 'b',
  	  },{
  	    c: 'c',
  	    d: 'd',
  	  }]
  	}
  

  	console.log(foo);
  	console.log(foo.name);
  	console.log(JSON.stringify(foo, ['name']));
  

• 進階用法，第二個參數是函數

• 根據函數中寫入的邏輯來計算每個鍵值對，如果返回undefined，則不會打印鍵值對

  	const foo = {
  	  name: 'lpj',
  	  age: 18
  	}
  

  	console.log(
  	  JSON.stringify(foo, (key, value) => {
  	    if (typeof (value) === 'string') {
  	      return undefined
  	    }
  	    return value
  	  })
  	)
  

• 進階用法，第三個參數是數字或字符串，用來格式化輸出的縮進字符

  	const foo = {
  	  name: 'lpj',
  	  age: 18
  	}
  

  	console.log(foo);
  	console.log(JSON.stringify(foo, null, 2))
  	console.log(JSON.stringify(foo, null, 4))
  	console.log(JSON.stringify(foo, null, 'lpj-'))
  

• 原理探究，JSON.stringify方法返回 toJSON方法執行結果的序列化結果

  	const foo = {
  	  name: 'lpj',
  	  age: 18,
  	  toJSON() {
  	    return {
  	      name: this.name
  	    }
  	  }
  	}
  	console.log(JSON.stringify(foo));