国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

你所不知道的JSON.stringify

piapia / 3505人閱讀

摘要:已經(jīng)逐漸替代被全世界的開發(fā)者廣泛使用。函數(shù)將一個(gè)對象轉(zhuǎn)換成文本化的。不能被文本化的屬性會被忽略。和例外情況在數(shù)組中,不可被的元素用填充。自從年雙十一正式上線,累計(jì)處理了億錯(cuò)誤事件,得到了金山軟件等眾多知名用戶的認(rèn)可。

譯者按: 老司機(jī)們,你知道JSON.stringify還有第二個(gè)和第三個(gè)可選參數(shù)嗎?它們是什么呢?

原文: What you didn’t know about JSON.Stringify

譯者: Fundebug

為了保證可讀性,本文采用意譯而非直譯。另外,本文版權(quán)歸原作者所有,翻譯僅用于學(xué)習(xí)。

JSON已經(jīng)逐漸替代XML被全世界的開發(fā)者廣泛使用。本文深入講解JavaScript中使用JSON.stringify的一些細(xì)節(jié)問題。首先簡單回顧一下JSON和JavaScript:

不是所有的合法的JSON都是有效的JavaScript;

JSON只是一個(gè)文本格式;

JSON中的數(shù)字是十進(jìn)制。

1. JSON.stringify
let foo = { a: 2, b: function() {} };
JSON.stringify(foo);
// "{ "a": 2 }"

JSON.stringify函數(shù)將一個(gè)JavaScript對象轉(zhuǎn)換成文本化的JSON。不能被文本化的屬性會被忽略。foo中屬性b的值是函數(shù)定義,沒有被轉(zhuǎn)換而丟失。

還有哪些屬性也不能轉(zhuǎn)換?
1. 循環(huán)引用

如果一個(gè)對象的屬性值通過某種間接的方式指回該對象本身,那么就是一個(gè)循環(huán)引用。比如:

var bar = {
  a: {
     c: foo
  }
};
var foo = {
  b: bar
};

屬性c指向自己,如果層層解析,將會進(jìn)入一個(gè)無限循環(huán)。我們嘗試將其打印出來看看:

let fooStringified = JSON.stringify(foo);
console.log(fooStringified); // {"b":{"a":{}}}

c的屬性指向foo對象,foo對象中的b屬性又指向bar對象而無法處理,整個(gè)被忽略而返回空對象。

如下定義(原文中的例子)是無法通過編譯的:

let foo = {b : foo};

錯(cuò)誤信息:

ReferenceError: foo is not defined
    at repl:1:14

在函數(shù)式語言Haskell中,因?yàn)橛蠰azy Evaluation技術(shù),可以使用類似的定義方法。

2. Symbol和undefined
let foo = { b: undefined };
JSON.stringify(foo);
// {}
// Symbols
foo.b = Symbol();
JSON.stringify(foo);
// {}
例外情況

在數(shù)組中,不可被stringify的元素用null填充。

let foo = [Symbol(), undefined, function() {}, "works"]
JSON.stringify(foo);
// "[null,null,null,"works"]"

這樣可以保持?jǐn)?shù)組本身的“形狀”,也就是每一個(gè)元素原本的索引。

為什么有些屬性無法被stringify呢?

因?yàn)镴SON是一個(gè)通用的文本格式,和語言無關(guān)。設(shè)想如果將函數(shù)定義也stringify的話,如何判斷是哪種語言,并且通過合適的方式將其呈現(xiàn)出來將會變得特別復(fù)雜。特別是和語言相關(guān)的一些特性,比如JavaScript中的Symbol。

ECMASCript官方也特意強(qiáng)調(diào)了這一點(diǎn):

It does not attempt to impose ECMAScript’s internal data representations on other programming languages. Instead, it shares a small subset of ECMAScript’s textual representations with all other programming languages.
2. 重寫對象toJSON函數(shù)

一個(gè)繞過對象某些屬性無法stringify的方法就是實(shí)現(xiàn)對象的toJSON方法來自定義被stringify的對象。因?yàn)閹缀趺恳粋€(gè)AJAX調(diào)用都會使用JSON.stringify,掌握該技巧將會對處理服務(wù)器交互有很大幫助。

和toString允許你將對象中的元素以字符串(string)的形式返回類似,toJSON提供了一種可以將對象中不能stringify的屬性轉(zhuǎn)換的方法,使得接下來調(diào)用的JSON.stringify可以將其轉(zhuǎn)換成JSON格式。

function Person (first, last) {
    this.firstName = first;
    this.last = last;
}
 
Person.prototype.process = function () {
   return this.firstName + " " +
          this.lastName;
};
 
let ade = new Person("Ade", "P");
JSON.stringify(ade);
// "{"firstName":"Ade","last":"P"}"

Person實(shí)例ade的process函數(shù)沒有被stringify。假想如果服務(wù)器只想要ade的全稱,而不是分別獲取姓和名,我們可以直接定義toJSON來達(dá)到目的:

Person.prototype.toJSON = function () {
    return { fullName: this.process(); };
};
 
let ade = new Person("Ade", "P");
JSON.stringify(ade);
// "{"fullName":"Ade P"}"

定義toJSON的優(yōu)點(diǎn)是復(fù)用性和穩(wěn)定性,你可以將ade配合任何庫使用,傳輸?shù)臄?shù)據(jù)都將是你通過toJSON定義而返回的fullName。

// jQuery
$.post("endpoint", ade);
 
// Angular 2
this.httpService.post("endpoint", ade)
3. 可選參數(shù)

JSON.stringify完整的定義如下:

JSON.stringify(value, replacer?, space?)

replacer和space都是可選參數(shù),接下來我們來分別講解。

Replacer

replacer是一個(gè)過濾函數(shù)或則一個(gè)數(shù)組包含要被stringify的屬性名。如果沒有定義,默認(rèn)所有屬性都被stringify。

1. 數(shù)組

只有在數(shù)組中的屬性被stringify:

let foo = {
  a : 1,
  b : "string",
  c : false
};
JSON.stringify(foo, ["a", "b"]);
//"{"a":1,"b":"string"}"

嵌套屬性也同樣會被過濾:

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

定義過濾數(shù)組有時(shí)候并不能滿足需求,那么可以自定義過濾函數(shù)。

2. 函數(shù)

過濾函數(shù)以對象中的每一個(gè)屬性和值作為輸入,返回值有以下幾種情況:

返回undefined表示忽略該屬性;

返回字符串,布爾值或則數(shù)字將會被stringify;

返回對象將會觸發(fā)遞歸調(diào)用知道遇到基本類型的屬性;

返回?zé)o法stringify的值將會被忽略;

let baz = {
  a : 1,
  b : { c : 2 }
};
 
// 返回大于1的值
let replacer = function (key, value) {
    if(typeof === "number") {
        return value > 1 ? value: undefined;
    }
    return value;
};
 
JSON.stringify(baz, replacer);
// "{"b":{"c":2}}"

通過改寫上面的函數(shù)加入適當(dāng)?shù)妮敵觯梢钥吹骄唧w的執(zhí)行步驟:

let obj = {
  a : 1,
  b : { c : 2 }
};
 
let tracer = function (key, value){
  console.log("Key: ", key);
  console.log("Value: ", value);
  return value;
};
 
JSON.stringify(obj, tracer);
// Key:
// Value: Object {a: 1, b: Object}
// Key: a
// Value: 1
// Key: b
// Value: Object {c: 2}
// Key: c
// Value: 2
space

你是否意識到調(diào)用默認(rèn)的JSON.stringify返回的值只要一行,而且完全沒有空格?如果想要更加美觀的打印出來,那么就需要使用space這個(gè)參數(shù)了。

我告訴你一個(gè)非常簡單的方法:通過tab("t")來分割即可。

let space = {
  a : 1,
  b : { c : 2 }
};
 
// 使用制表符
JSON.stringify(space, undefined, "	");
// "{
//  "a": 1,
//  "b": {
//   "c": 2
//  }
// }"
 
JSON.stringify(space, undefined, "");
// {"a":1,"b":{"c":2}}
 
// 自定義分隔符
JSON.stringify(space, undefined, "a");
// "{
//  a"a": 1,
//  a"b": {
//   aa"c": 2
//  a}
// }"

一道三顆星的思考題:為什么打印結(jié)果的倒數(shù)第三行有兩個(gè)a呢?

結(jié)論

本文介紹了一些使用toJSON的技巧:

無法stringify的幾種類型

使用toJSON來自定義JSON.stringify的屬性

可選參數(shù)replacer的兩種定義方法來過濾屬性

可選參數(shù)space用來格式化輸出結(jié)果

數(shù)組和對象中如果包含無法stringify的元素的時(shí)候的區(qū)別

關(guān)于Fundebug

Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實(shí)時(shí)BUG監(jiān)控。 自從2016年雙十一正式上線,F(xiàn)undebug累計(jì)處理了6億+錯(cuò)誤事件,得到了Google、360、金山軟件等眾多知名用戶的認(rèn)可。歡迎免費(fèi)試用!

版權(quán)聲明

轉(zhuǎn)載時(shí)請注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/08/17/what-you-didnt-knowabout-json-stringify/

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/84893.html

相關(guān)文章

  • 所不知道同比和環(huán)比真正區(qū)別

    摘要:給百度百科給的環(huán)比定義為環(huán)比,統(tǒng)計(jì)學(xué)術(shù)語,是表示連續(xù)個(gè)統(tǒng)計(jì)周期比如連續(xù)兩月內(nèi)的量的變化比。二你所不知道的同比環(huán)比兩種方式的核心區(qū)別判斷兩個(gè)數(shù)據(jù)到底是同比還是環(huán)比。 ...

    liujs 評論0 收藏0
  • JSON.stringify() 深入理解

    摘要:深入理解規(guī)則字符串化并非嚴(yán)格意義上的強(qiáng)制類型轉(zhuǎn)換,但其中涉及的相關(guān)規(guī)則基本類型值的字符串化規(guī)則為轉(zhuǎn)換為,轉(zhuǎn)換為,轉(zhuǎn)換為。如果對象有自己的方法,字符串化時(shí)就會調(diào)用該方法并使用其返回值。將對象強(qiáng)制類型轉(zhuǎn)換為是通過抽象操作來完成的。 [TOC] 序言 最近在看《你所不知道的javascript》[中卷]一書,第一部分是類型和語法。本文是基于這部分的產(chǎn)物。在強(qiáng)制類型轉(zhuǎn)換->抽象值操作-> to...

    eechen 評論0 收藏0
  • 所不知道 ? URL

    你所不知道的 URL 0.說明 第一幕 產(chǎn)品:大叔有用戶反映賬戶不能綁定公眾號。大叔:啊咧咧?怎么可能,我看看?大叔:恩?這也沒問題啊,魏蝦米。大叔:還是沒問題啊,挖叉類。大叔:T T,話說產(chǎn)品姐姐是不是Java提供接口的時(shí)候,沒有對URL進(jìn)行encodeURI。產(chǎn)品:啊咧咧?我問問看? 第二幕 大叔:小二你給我過來!小二:啊咧咧?怎么了大叔?大叔:知道在URL中的+有時(shí)候會變成什么嗎?小二:啊咧...

    weizx 評論0 收藏0
  • 前端面試所不知道系列

    摘要:請注意是創(chuàng)建一個(gè)全局對象的屬性,而不是聲明了一個(gè)全局變量。由于變量聲明自帶不可刪除屬性,比較跟,前者是變量聲明,帶不可刪除屬性,因此無法被刪除后者為全局變量的一個(gè)屬性,因此可以從全局變量中刪除。下期預(yù)告前端面試你所不知道系列偽類和偽元素 寫在開始 又到了一年的伊始,很多人可能因?yàn)楦鞣N原因想換一份工作,而找工作難免遇到各種各樣頭痛的面試題,于是我打算寫一個(gè)系列,關(guān)于面試中最常見或者前端一...

    Julylovin 評論0 收藏0
  • 2017-08-25 前端日報(bào)

    摘要:前端日報(bào)精選組件規(guī)范個(gè)小模式工作機(jī)制引擎內(nèi)部機(jī)制及如何編寫優(yōu)化代碼的個(gè)訣竅二進(jìn)制的從零學(xué)習(xí)技術(shù)棧系列教程中文框架設(shè)計(jì)第版之語言模塊掘金連載小程序?qū)崙?zhàn)文章視頻教程第一章小程序初級入門教程準(zhǔn)備掘金性能調(diào)優(yōu)之代碼篇三升級到知乎專欄原理 2017-08-25 前端日報(bào) 精選 React組件規(guī)范10個(gè)React小模式JavaScript工作機(jī)制:V8 引擎內(nèi)部機(jī)制及如何編寫優(yōu)化代碼的5個(gè)訣竅Ja...

    yy13818512006 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<