前端面試-js之object類型JSON

Yang_River 發(fā)布于2019-08-21 16:48 / 2339人閱讀

摘要：有兩個(gè)特殊的全局變量本文主要詳解三個(gè)參數(shù)對象，接收的值是對象包括除了之外的所有類型處理函數(shù)或者數(shù)組，處理函數(shù)是對每一個(gè)鍵值對都處理，數(shù)組是只過濾留下數(shù)組包含的鍵值，處理函數(shù)可以為代表縮進(jìn)字符，如果是最大不能超過，如果是字符串就是縮進(jìn)的字符串

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

JSONValue:

JSONNullLiteral
JSONBooleanLiteral
JSONObject
JSONArray
JSONString
JSONNumber

JSONFunction:

JSON.stringify(jsonvalue, replacerfnorarray, space)

三個(gè)參數(shù)：
1. json對象，接收的值是json對象包括除了function之外的所有類型
2. 處理函數(shù)或者數(shù)組，處理函數(shù)是對每一個(gè)鍵值對都處理，數(shù)組是只過濾留下數(shù)組包含的鍵值，處理函數(shù)可以為null 
3. space代表縮進(jìn)字符，如果是number最大不能超過10，如果是字符串就是縮進(jìn)的字符串
結(jié)果：json字符串
有replacer參數(shù)的話，返回過濾后的結(jié)果，否則返回原生的字符串
過程：
將json-->json字符串

JSON.parse()

接收的是json字符串，將其格式化為json對象
兩個(gè)參數(shù)：
1. 加單引號的json字符串
2. 過濾函數(shù)
結(jié)果：
得到格式化的json對象

例子： JSON.stringify：

鍵值對

array

number

string

boolean

null

function

可見，當(dāng)值是function時(shí)會返回undefined，這個(gè)有些情況下并不是我們期望的，那么怎么解決呢，要善于利用第二個(gè)參數(shù)即replacer為函數(shù)時(shí)（詳解見下面）

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

第二個(gè)參數(shù)除了可以是function之外還可以是數(shù)組[string,number類型的元素]，相當(dāng)于一個(gè)IP白名單；

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

第二個(gè)參數(shù)還可以是null,或者不寫，會執(zhí)行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}"

第三個(gè)參數(shù)space

如果space參數(shù)為String類型的情況下,則默認(rèn)取String的前10個(gè)字符作為分割符

如果space參數(shù)為Number類型的情況下,則表示space個(gè)空格(space<=10,大于10取10)

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

三個(gè)參數(shù)共同控制，將多層嵌套的json對象轉(zhuǎn)換為格式化的美化的json string

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

JSON.parse:

兩個(gè)參數(shù)，1json字符串，2replacer function

應(yīng)用：

數(shù)組去重最妙的方法

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"));