iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
0
自我挑戰組

從頭開始的API 和ajax系列 第 5

Day5--繼續岔題>> 物件和JSON 實體差別

先給自己一點努力 哪些事能讓人快樂?自主、精熟及有目標。那是一種可以掌控自己命運的能力、是一種覺得自己某件事愈做愈好的感受

只要學會javascript 一定會學上物件
如果我們要產生一個物件 首先要下面:
1.物件

var keypoint = new Object();
 keypoint.x=1;
 keypoint.y=3;
 keypoint.get=function(){
     alert(this.x+","+this.y);
 };
\\這是基本物件的建立 NEW 一個出來

JSON 的話 只要寫一個大括弧{} 代表這new Object 建立一個新物件,這就是JSON 的格式
而上面物件的寫法 keypoint.x=1; keypoint.y=3; 可以用JSON 把上面3行用簡便的方法寫出來:

var keypoint = {"x":1,"y":3,"get":function(){
     alert(this.x+","+this.y);
 }};
 keypoint.get();
 
\\這是JSON 的寫法,最後用呼叫物件方式 你可以用console.log 看看是不是 出現 x,y

那我們排整齊一下:排版方式要注意(是有很多排版方式,但就是不要搞錯標點符號)

var keypoint = {
    "x":1,
    "y":3,
    "get":function(){
     alert(this.x+","+this.y);
     }
 };
 \\keypoint.get();

再重新複習上次學到
JSON 又叫JavaScript Object Notation,JavaScript 物件表示法
-使用JSON.stringify(物件) >>將物件轉換成字串 (會忽略函式)
-使用JSON.parse(JSON格式字串) >>將字串轉換成物件結構

發現物件 和JSON 這觀念才會混淆 (抱歉只有我)

在網路中傳輸的話、給後端 就要轉換成字串

var keypoint = {
    "x":1,
    "y":3,
    "get":function(){
     alert(this.x+","+this.y);
     }
 };
var jsonStr =JSON.stringify(keypoint);
jsonStr.indexOf();
console.log(jsonStr);

我們也可以把JSON格式字串變成物件
在網路中傳輸的話、給後端 轉換成字串
或是利用JSON.parse();讓瀏覽器運用操作

var keypoint = {
    "x":1,
    "y":3,
    "get":function(){
     alert(this.x+","+this.y);
     }
 };
var plainObj =JSON.parse(keypoint);

console.log(plainObj);
alert(plainObj.x);
\\我們可以變成物件使用

但還是要提醒一下
這裡使用的例子 函式 “get” 用JSON.stringify 轉換 ,函式方法部分會被忽略掉。就都只剩下x,y

先講到這裡 下一期 進行一個實作-- 將json 運用在網頁


上一篇
Day4 --如何運用JSON 資料
下一篇
Day6-ajax異步請求
系列文
從頭開始的API 和ajax9

尚未有邦友留言

立即登入留言