前端面試-js之object類型JSON

ECMAScript有兩個特殊的全局變量：Math & JSON
本文主要詳解JSON

JSONValue:

JSONNullLiteral
JSONBooleanLiteral
JSONObject
JSONArray
JSONString
JSONNumber

JSONFunction:

• JSON.stringify(jsonvalue, replacerfnorarray, space)

三個參數：
1. json對象，接收的值是json對象包括除了function以外的全部類型
2. 處理函數或者數組，處理函數是對每個鍵值對都處理，數組是隻過濾留下數組包含的鍵值，處理函數能夠爲null 
3. space表明縮進字符，若是是number最大不能超過10，若是是字符串就是縮進的字符串
結果：json字符串
有replacer參數的話，返回過濾後的結果，不然返回原生的字符串
過程：
將json-->json字符串

• JSON.parse()

接收的是json字符串，將其格式化爲json對象
兩個參數：
1. 加單引號的json字符串
2. 過濾函數
結果：
獲得格式化的json對象

例子：

JSON.stringify：

• 鍵值對

• array

• number

• string

• boolean

• null

• function
  

可見，當值是function時會返回undefined，這個有些狀況下並非咱們指望的，那麼怎麼解決呢，要善於利用第二個參數即replacer爲函數時（詳解見下面）

// 定義第二個參數爲函數，參數須要key&value
function replace (key,value) {
    // 判斷value類型是否爲function
    if(typeof value === 'function'){
        return Function.prototype.toString.call(value);
    }
    return value;
}
// 定義一個變量test,某一鍵值對的值爲fn
var test = {'first': 1, 'getFirst': function(){console.log(this.first);}};
// 調用
JSON.stringify(test,replace);
// 結果：
// "{"first":1,"getFirst":"function (){console.log(this.first);}"}"

第二個參數除了能夠是function以外還能夠是數組[string,number類型的元素]，至關於一個IP白名單；

var test = {a:1,b:2,c:3};
JSON.stringify(test,["a"]);
// "{"a":1}"

第二個參數還能夠是null,或者不寫，會執行JSON.stringify

var test = {a:1,b:2,c:3};
JSON.stringify(test,null);
// "{a:1,b:2,c:3}"

JSON.stringify(test);
// "{a:1,b:2,c:3}"

第三個參數space

1. 若是space參數爲String類型的狀況下,則默認取String的前10個字符做爲分割符
2. 若是space參數爲Number類型的狀況下,則表示space個空格(space<=10,大於10取10)

//space參數爲String的狀況下:
var test = {a:"1",b:2,c:3};
JSON.stringify(test,null,'test')
/*
{
test"a": "1",
test"b": 2,
test"c": 3
}
*/
//space參數爲Number的狀況下:
var test = {a:"1",b:2,c:3};
JSON.stringify(test,null,4)
/*
{
    "a": "1",
    "b": 2,
    "c": 3
}

三個參數共同控制，將多層嵌套的json對象轉換爲格式化的美化的json string

// 定義第二個參數爲函數，參數須要key&value
function replace (key,value) {
    // 判斷value類型是否爲function
    if(typeof value === 'function'){
        return Function.prototype.toString.call(value);
    }
    return value;
}
// 定義一個變量test,某一鍵值對的值爲fn
var test = {'first': 1, 'getFirst': function(){console.log(this.first);}};
// 調用
JSON.stringify(test,replace,4);
// 結果：
/*
"{
    "first": 1,
    "getFirst": "function (){console.log(this.first);}"
}"
*/

JSON.parse:

兩個參數，1json字符串，2replacer function

應用：

數組去重最妙的方法

function replacer(key, value) {
    if(typeof value === 'function'){
        return Function.prototype.toString.call(value);
    }
    return value;
}
function unique(arr) {
   var hash = {},
      re = [];
  for (var i = 0, length = arr.length; i < length; i++){
    if(!hash[JSON.stringify(arr[i],replacer)]){
      re.push(arr[i]);
      hash[JSON.stringify(arr[i])] = true;
    }
  }
  return re;
}
unique([function a (){console.log('function')}]);
console.log(unique([1,'1', 1]));
console.log(unique([1,1,5,6,5,78,5,3]));
console.log(unique([1,'1',false,'false',[1,2,3],[1,2],{a:1},{a:1},{b:1}]));
console.log(JSON.stringify(false));
console.log(JSON.stringify('false'));