JSON&&對象

時間 2019-12-06

原文原文鏈接

對象

簡單說，所謂對象，就是一種無序的數據集合，由若干個「鍵值對」（key-value）構成。前端

var obj = {
  p: 'Hello World'
};
複製代碼

上面代碼中，大括號就定義了一個對象，它被賦值給變量obj。這個對象內部包含一個鍵值對（又稱爲「成員」），p是「鍵名」（成員的名稱），字符串Hello World是「鍵值」（成員的值）。鍵名與鍵值之間用冒號分隔。若是對象內部包含多個鍵值對，每一個鍵值對之間用逗號分隔。正則表達式

var o = {
  p1: 'Hello',
  p2: 'World'
};
複製代碼

{key: value} 是 JS 對象字面量寫法數組

基本使用

var company = {
    name: '飢人谷',
    age: 3,
    sayHello: function(){
        console.log('hello world')
    }
}
console.log(company.name)
console.log(company['name'])
company.sayHello()

company.addr = '杭州市'
compay['business'] = '前端課程'

for(var key in company){
    console.log(key)
    console.log(company[key])
}
複製代碼

詳細介紹

鍵名

對象的全部鍵名都是字符串，因此加不加引號均可以。上面的代碼也能夠寫成下面這樣。瀏覽器

var o = {
  'p': 'Hello World'
};
複製代碼

若是鍵名是數值，會被自動轉爲字符串。bash

var o ={
  1: 'a',
  3.2: 'b',
  1e2: true,
  1e-2: true,
  .234: true,
  0xFF: true
};

o
// Object {
//   1: "a",
//   3.2: "b",
//   100: true,
//   0.01: true,
//   0.234: true,
//   255: true
// }
複製代碼

可是，若是鍵名不符合標識名的條件（好比第一個字符爲數字，或者含有空格或運算符），也不是數字，則必須加上引號，不然會報錯。函數

var o = {
  '1p': "Hello World",
  'h w': "Hello World",
  'p+q': "Hello World"
};
複製代碼

上面對象的三個鍵名，都不符合標識名的條件，因此必須加上引號。ui

注意，JavaScript的保留字能夠不加引號看成鍵名。this

var obj = {
  for: 1,
  class: 2
};
複製代碼

屬性

對象的每個「鍵名」又稱爲「屬性」（property），它的「鍵值」能夠是任何數據類型。若是一個屬性的值爲函數，一般把這個屬性稱爲「方法」，它能夠像函數那樣調用。spa

var o = {
  p: function (x) {
    return 2 * x;
  }
};

o.p(1)
// 2
複製代碼

上面的對象就有一個方法p，它就是一個函數。code

對象的屬性之間用逗號分隔，最後一個屬性後面能夠加逗號（trailing comma），也能夠不加。

var o = {
  p: 123,
  m: function () { ... },
}
複製代碼

上面的代碼中m屬性後面的那個逗號，有或沒有都不算錯。

屬性能夠動態建立，沒必要在對象聲明時就指定。

var obj = {};
obj.foo = 123;
obj.foo // 123
複製代碼

上面代碼中，直接對obj對象的foo屬性賦值，結果就在運行時建立了foo屬性。

對象的引用

若是不一樣的變量名指向同一個對象，那麼它們都是這個對象的引用，也就是說指向同一個內存地址。修改其中一個變量，會影響到其餘全部變量。

var o1 = {};
var o2 = o1;

o1.a = 1;
o2.a // 1

o2.b = 2;
o1.b // 2
複製代碼

上面代碼中，o1和o2指向同一個對象，所以爲其中任何一個變量添加屬性，另外一個變量均可以讀寫該屬性。

此時，若是取消某一個變量對於原對象的引用，不會影響到另外一個變量。

var o1 = {};
var o2 = o1;

o1 = 1;
o2 // {}
複製代碼

上面代碼中，o1和o2指向同一個對象，而後o1的值變爲1，這時不會對o2產生影響，o2仍是指向原來的那個對象。

可是，這種引用只侷限於對象，對於原始類型的數據則是傳值引用，也就是說，都是值的拷貝。

var x = 1;
var y = x;

x = 2;
y // 1
複製代碼

上面的代碼中，當x的值發生變化後，y的值並不變，這就表示y和x並非指向同一個內存地址。

表達式仍是語句？

對象採用大括號表示，這致使了一個問題：若是行首是一個大括號，它究竟是表達式仍是語句？

{ foo: 123 }
複製代碼

JavaScript引擎讀到上面這行代碼，會發現可能有兩種含義。第一種多是，這是一個表達式，表示一個包含foo屬性的對象；第二種多是，這是一個語句，表示一個代碼區塊，裏面有一個標籤foo，指向表達式123。

爲了不這種歧義，JavaScript規定，若是行首是大括號，一概解釋爲語句（即代碼塊）。若是要解釋爲表達式（即對象），必須在大括號前加上圓括號。

({ foo: 123})
複製代碼

這種差別在eval語句中反映得最明顯。

eval('{foo: 123}') // 123
eval('({foo: 123})') // {foo: 123}
複製代碼

上面代碼中，若是沒有圓括號，eval將其理解爲一個代碼塊；加上圓括號之後，就理解成一個對象。

屬性的操做

讀取屬性

讀取對象的屬性，有兩種方法，一種是使用點運算符，還有一種是使用方括號運算符。

var o = {
  p: 'Hello World'
};

o.p // "Hello World"
o['p'] // "Hello World"
複製代碼

上面代碼分別採用點運算符和方括號運算符，讀取屬性p。

請注意，若是使用方括號運算符，鍵名必須放在引號裏面，不然會被看成變量處理。可是，數字鍵能夠不加引號，由於會被看成字符串處理。

var o = {
  0.7: 'Hello World'
};

o['0.7'] // "Hello World"
o[0.7] // "Hello World"
複製代碼

方括號運算符內部可使用表達式。

o['hello' + ' world']
o[3 + 3]
複製代碼

數值鍵名不能使用點運算符（由於會被當成小數點），只能使用方括號運算符。

obj.0xFF
// SyntaxError: Unexpected token
obj[0xFF]
// true
複製代碼

上面代碼的第一個表達式，對數值鍵名0xFF使用點運算符，結果報錯。第二個表達式使用方括號運算符，結果就是正確的。

檢查變量是否聲明

若是讀取一個不存在的鍵，會返回undefined，而不是報錯。能夠利用這一點，來檢查一個全局變量是否被聲明。

// 檢查a變量是否被聲明
if (a) {...} // 報錯

if (window.a) {...} // 不報錯
if (window['a']) {...} // 不報錯
複製代碼

上面的後二種寫法之因此不報錯，是由於在瀏覽器環境，全部全局變量都是window對象的屬性。window.a的含義就是讀取window對象的a屬性，若是該屬性不存在，就返回undefined，並不會報錯。

須要注意的是，後二種寫法有漏洞，若是a屬性是一個空字符串（或其餘對應的布爾值爲false的狀況），則沒法起到檢查變量是否聲明的做用。正確的作法是能夠採用下面的寫法。

if ('a' in window) {
  // 變量 a 聲明過
} else {
  // 變量 a 未聲明
}
複製代碼

屬性的賦值

點運算符和方括號運算符，不只能夠用來讀取值，還能夠用來賦值。

o.p = 'abc';
o['p'] = 'abc';
複製代碼

上面代碼分別使用點運算符和方括號運算符，對屬性p賦值。

JavaScript容許屬性的「後綁定」，也就是說，你能夠在任意時刻新增屬性，不必在定義對象的時候，就定義好屬性。

var o = { p: 1 };

// 等價於

var o = {};
o.p = 1;
複製代碼

查看全部屬性

查看一個對象自己的全部屬性，可使用Object.keys方法。

var o = {
  key1: 1,
  key2: 2
};

Object.keys(o);
// ['key1', 'key2']
複製代碼

delete命令

delete命令用於刪除對象的屬性，刪除成功後返回true。

var o = {p: 1};
Object.keys(o) // ["p"]

delete o.p // true
o.p // undefined
Object.keys(o) // []
複製代碼

上面代碼中，delete命令刪除o對象的p屬性。刪除後，再讀取p屬性就會返回undefined，並且Object.keys方法的返回值中，o對象也再也不包括該屬性。

注意，刪除一個不存在的屬性，delete不報錯，並且返回true。

var o = {};
delete o.p // true
複製代碼

上面代碼中，o對象並無p屬性，可是delete命令照樣返回true。所以，不能根據delete命令的結果，認定某個屬性是存在的，只能保證讀取這個屬性確定獲得undefined。

delete命令不能刪除var命令聲明的變量，只能用來刪除屬性。

var p = 1;
delete p // false
delete window.p // false
複製代碼

上面命令中，p是var命令聲明的變量，delete命令沒法刪除它，返回false。由於var聲明的全局變量都是頂層對象的屬性，並且默認不得刪除。

for...in循環

for...in循環用來遍歷一個對象的所有屬性。

var o = {a: 1, b: 2, c: 3};

for (var i in o) {
  console.log(o[i]);
}
// 1
// 2
// 3
複製代碼

JSON

JSON 格式

JSON 格式（JavaScript Object Notation 的縮寫）是一種用於數據交換的文本格式，2001年由 Douglas Crockford 提出，目的是取代繁瑣笨重的 XML 格式。

JSON 對值的類型和格式有嚴格的規定。

複合類型的值只能是數組或對象，不能是函數、正則表達式對象、日期對象。簡單類型的值只有四種：字符串、數值（必須以十進制表示）、布爾值和null（不能使用NaN, Infinity, -Infinity和undefined）。字符串必須使用雙引號表示，不能使用單引號。對象的鍵名必須放在雙引號裏面。數組或對象最後一個成員的後面，不能加逗號。如下是合格的 JSON 值。

["one", "two", "three"]

{ "one": 1, "two": 2, "three": 3 }

{"names": ["張三", "李四"] }

[ { "name": "張三"}, {"name": "李四"} ]
複製代碼

如下是不合格的 JSON 值。

{ name: "張三", 'age': 32 }  // 屬性名必須使用雙引號

[32, 64, 128, 0xFFF] // 不能使用十六進制值

{ "name": "張三", "age": undefined } // 不能使用undefined

{ "name": "張三",
  "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
  "getName": function() {
      return this.name;
  }
} // 不能使用函數和日期對象
複製代碼

須要注意的是，空數組和空對象都是合格的 JSON 值，null自己也是一個合格的 JSON 值。

ES5 新增了JSON對象，用來處理 JSON 格式數據。它有兩個方法：JSON.stringify()和JSON.parse()。

JSON.stringify()

基本用法

JSON.stringify方法用於將一個值轉爲字符串。該字符串符合 JSON 格式，而且能夠被JSON.parse方法還原。

JSON.stringify('abc') // ""abc""
JSON.stringify(1) // "1"
JSON.stringify(false) // "false"
JSON.stringify([]) // "[]"
JSON.stringify({}) // "{}"

JSON.stringify([1, "false", false])
// '[1,"false",false]'

JSON.stringify({ name: "張三" })
// '{"name":"張三"}'
複製代碼

上面代碼將各類類型的值，轉成 JSON 字符串。

須要注意的是，對於原始類型的字符串，轉換結果會帶雙引號。

JSON.stringify('foo') === "foo" // false
JSON.stringify('foo') === "\"foo\"" // true
複製代碼

上面代碼中，字符串foo，被轉成了""foo""。這是由於未來還原的時候，雙引號可讓 JavaScript 引擎知道，foo是一個字符串，而不是一個變量名。

若是原始對象中，有一個成員的值是undefined、函數或 XML 對象，這個成員會被過濾。

var obj = {
  a: undefined,
  b: function () {}
};

JSON.stringify(obj) // "{}"
複製代碼

上面代碼中，對象obj的a屬性是undefined，而b屬性是一個函數，結果都被JSON.stringify過濾。

若是數組的成員是undefined、函數或 XML 對象，則這些值被轉成null。

var arr = [undefined, function () {}];
JSON.stringify(arr) // "[null,null]"
複製代碼

上面代碼中，數組arr的成員是undefined和函數，它們都被轉成了null。

正則對象會被轉成空對象。

JSON.stringify(/foo/) // "{}"
複製代碼

JSON.stringify方法會忽略對象的不可遍歷屬性。

JSON.parse()

JSON.parse方法用於將JSON字符串轉化成對象。

JSON.parse('{}') // {}
JSON.parse('true') // true
JSON.parse('"foo"') // "foo"
JSON.parse('[1, 5, "false"]') // [1, 5, "false"]
JSON.parse('null') // null

var o = JSON.parse('{"name": "張三"}');
o.name // 張三
複製代碼

若是傳入的字符串不是有效的JSON格式，JSON.parse方法將報錯。

JSON.parse("'String'") // illegal single quotes
// SyntaxError: Unexpected token ILLEGAL
複製代碼

上面代碼中，雙引號字符串中是一個單引號字符串，由於單引號字符串不符合JSON格式，因此報錯。

深拷貝的另外一種寫法

var obj = {
    name: 'hunger',
    age: 3,
    friends: ['aa', 'bb', 'cc']
}

var obj2 = JSON.parse(JSON.stringify(obj))
obj.age = 4
console.log(obj2.age)
複製代碼