前端面試-js之object類型JSON

Yang_River 發布于2019-08-21 16:48 / 2336人閱讀

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

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

如果space參數為String類型的情況下,則默認取String的前10個字符作為分割符

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

云服務器 GPU云服務器 js object數據類型 js數據類型object js轉換object數據類型 js中的object數據類型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88740.html

【前端面試】變量和類型計算

摘要：題目使用能得到哪些類型和的選擇中有哪些內置函數變量按存儲方式分為哪些類型，并描述其特點如何理解知識點值類型和引用類型值類型引用類型對象，數組，函數值類型直接把值存儲在堆中，把賦值給在內存中是又給開辟了一塊新的空間，存儲了同樣的值。 1.題目 1.JS使用typeof能得到哪些類型 === 和 == 的選擇 JS中有哪些內置函數 JS變量按存儲方式分為哪些類型，并描述其特點如何理解J...

DoINsiSt 2019-08-23 14:28 評論0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件開發前端掘金作者原文地址譯者插件是為應用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內優雅的實現文件分片斷點續傳。 Vue.js 插件開發 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插....

izhuhaodev 2019-08-21 11:44 評論0 收藏0
前端面試之手寫代碼

摘要：雖然構造函數或者對象字面量的方法都可以用來創建對象，但是這些方法使用同一個接口創建很多對象，會產生大量的重復代碼。參考資料冴羽的專題系列中高級前端面試手寫代碼無敵秘籍前端筆試之手寫代碼一本系列會從面試的角度出發圍繞JavaScript，Node.js(npm包)以及框架三個方面來對常見的模擬實現進行總結，具體源代碼放在github項目上，長期更新和維護 showImg(https://use...

niceforbear 2019-05-21 16:12 評論0 收藏0
【進階4-3期】面試題之如何實現一個深拷貝

摘要：今天這篇文章我們來看看一道必會面試題，即如何實現一個深拷貝。木易楊注意這里使用上面測試用例測試一下一個簡單的深拷貝就完成了，但是這個實現還存在很多問題。引言上篇文章詳細介紹了淺拷貝 Object.assign，并對其進行了模擬實現，在實現的過程中，介紹了很多基礎知識。今天這篇文章我們來看看一道必會面試題，即如何實現一個深拷貝。本文會詳細介紹對象、數組、循環引用、引用丟失、Symbo...

longmon 2019-08-23 18:05 評論0 收藏0
#yyds干貨盤點# 前端基礎知識面試集錦3

摘要：當解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址后從堆中獲得實體如何實現繼承構造繼承原型繼承實例繼承拷貝繼承原型機制或和方法去實現較簡單，建議使用構造函數與原型混合方式。它是基于的一個子集。 JavaScript介紹js的基本數據類型。Undefined、Null、Boolean、Number、Stri...

番茄西紅柿 2021-11-22 15:29 評論0 收藏2637