Đối tượng Javascript Vs JSON


208

Tôi muốn hiểu rõ sự khác biệt cơ bản rõ ràng giữa đối tượng Javascript và chuỗi JSON.

Giả sử tôi tạo biến JS sau:

var testObject = {one: 1,"two":2,"three":3};

Q1. Tên khóa / thuộc tính có hợp lệ cả có / không có dấu ngoặc kép không? (ví dụ "one" : 1)

Nếu có, sự khác biệt là gì?

Câu 2: Nếu tôi chuyển đổi đối tượng trên bằng cách sử dụng JSON.stringify(testObject), sự khác biệt giữa đối tượng JS ban đầu và JSON là gì?

Tôi cảm thấy chúng gần giống nhau. Xin hãy giải thích về điều này.

Câu 3: Để phân tích chuỗi JSON, phương pháp dưới đây có được đề xuất không?

var javascriptObj = JSON.parse(jSonString);

Câu trả lời:


239
  1. Tên khóa / thuộc tính có hợp lệ cả có / không có dấu ngoặc kép không?

    Lần duy nhất mà bạn cần phải kèm theo một chìa khóa trong dấu ngoặc kép khi sử dụng ký hiệu Literal Object là nơi chìa khóa chứa một ký tự đặc biệt ( if, :, -vv). Điều đáng chú ý là một chìa khóa trong JSON phải được kèm theo trong đôi dấu ngoặc kép.

  2. Nếu tôi chuyển đổi đối tượng trên thành JSON bằng cách sử dụng var jSonString = JSON.stringify(testObject);, sự khác biệt giữa 2 (JS obj và JSON) là gì?

    JSON là một định dạng trao đổi dữ liệu. Đó là một tiêu chuẩn mô tả cách các danh sách được sắp xếp và các bản đồ không được sắp xếp, các chuỗi booleans và số có thể được biểu diễn trong một chuỗi. Giống như XML và YAML là một cách để truyền thông tin có cấu trúc giữa các ngôn ngữ, JSON là như nhau. Mặt khác, một đối tượng JavaScript là một kiểu vật lý. Giống như một mảng PHP, một lớp / cấu trúc C ++, một đối tượng JavaScript là một kiểu bên trong của JavaScript.

    Đây là một câu chuyện. Hãy tưởng tượng bạn đã mua một số đồ nội thất từ ​​một cửa hàng và bạn muốn nó được giao. Tuy nhiên, cái duy nhất còn lại trong kho là model hiển thị, nhưng bạn đồng ý mua nó.

    Trong cửa hàng, các ngăn kéo bạn đã mua là một vật thể sống:

    var chestOfDrawers = {
        color: "red",
        numberOfDrawers: 4
    }
    

    Tuy nhiên, bạn không thể gửi một ngăn kéo trong bài viết, vì vậy bạn tháo dỡ nó (đọc, xâu chuỗi nó). Bây giờ nó vô dụng về mặt nội thất. Bây giờ là JSON. Nó ở dạng gói phẳng.

    {"color":"red","numberOfDrawers":4}

    Khi bạn nhận được nó, sau đó bạn xây dựng lại các ngăn kéo (đọc, phân tích nó). Bây giờ nó trở lại trong một hình thức đối tượng.

    Lý do đằng sau JSON / XML và YAML là để cho phép dữ liệu được chuyển giữa các ngôn ngữ lập trình theo định dạng mà cả hai ngôn ngữ tham gia đều có thể hiểu được; bạn không thể cung cấp trực tiếp cho PHP hoặc C ++ đối tượng JavaScript của mình; bởi vì mỗi ngôn ngữ đại diện cho một đối tượng khác nhau. Tuy nhiên, vì chúng tôi đã xâu chuỗi đối tượng thành ký hiệu JSON; tức là một cách tiêu chuẩn hóa để biểu diễn dữ liệu, chúng ta có thể truyền biểu diễn JSON của đối tượng sang một ngôn ngữ khác (C ++, PHP), họ có thể tạo lại đối tượng JavaScript mà chúng ta có vào đối tượng của chính họ dựa trên biểu diễn JSON của đối tượng.

    Điều quan trọng cần lưu ý là JSON không thể biểu thị các hàm hoặc ngày. Nếu bạn cố gắng xâu chuỗi một đối tượng với một thành viên hàm, hàm sẽ bị bỏ qua khỏi biểu diễn JSON. Một ngày sẽ được chuyển đổi thành một chuỗi;

    JSON.stringify({
        foo: new Date(),
        blah: function () { 
            alert('hello');
        }
    }); // returns the string "{"foo":"2011-11-28T10:21:33.939Z"}"
    
  3. Để phân tích chuỗi JSON, phương thức dưới đây có được đề xuất không? var javascriptObj = JSON.parse(jSonString);

    Có, nhưng các trình duyệt cũ hơn không hỗ trợ JSON nguyên bản (IE <8) . Để hỗ trợ những điều này, bạn nên bao gồm json2.js.

    Nếu bạn đang sử dụng jQuery, bạn có thể gọi jQuery.parseJSON(), cái này sẽ sử dụng JSON.parse()dưới mui xe nếu được hỗ trợ và nếu không sẽ chuyển sang triển khai tùy chỉnh để phân tích cú pháp đầu vào.


4
@testndtv bạn đang thiếu điểm - mặc dù trên giấy (hoặc trên màn hình) một chuỗi JSON và hiển thị của một đối tượng JS có thể trông giống nhau, chúng không giống nhau. JSON chỉ là một cách để đóng gói một đối tượng thành một chuỗi, vì vậy nó có thể được chuyển đi đâu đó và sau đó giải nén trở lại vào một đối tượng.
Alnitak

1
@Matt tương tự kém IMHO - Không nên sử dụng JSON để tuần tự hóa một đối tượng có phương thức - chỉ dành cho các đối tượng dữ liệu thuần túy.
Alnitak

1
Vì vậy, nếu một đối tượng JS có các phương thức, việc chuyển đổi thành chuỗi JSON hoàn toàn bỏ qua nó ... giống như trong trường hợp trên getIn và getOut sẽ bị bỏ qua hoàn toàn .... Đó có phải là cách nó hoạt động không?
testndtv

3
@Growler: thông thường tôi sử dụng JSON nếu "thứ" cần được tạo trên máy chủ và sử dụng tệp js nếu "thứ" chỉ được phục vụ như cũ. Sự khác biệt lớn khác là liệu bạn có cần bao gồm các hàm và / hoặc ngày không, vì JSON không thể đại diện cho chúng, vì vậy bạn phải dùng đến việc phân phát tệp JS. Nếu bạn vẫn không chắc chắn, vui lòng hỏi nó như một câu hỏi riêng biệt về Stack Overflow (hiển thị ví dụ về nội dung bạn cần cung cấp để thể hiện hộp thoại của bạn) và cung cấp cho tôi liên kết; Tôi sẽ rất vui khi nhìn kỹ hơn!
Matt

4
@Matt Thưa ngài, là af # king thiên tài! Giải thích của bạn là tại chỗ, rõ ràng, súc tích, và dễ hiểu. Tôi ước bạn là người cố vấn lập trình / JavaScript của tôi.
FrankDraws

30

Q1: Khi xác định nghĩa đen của đối tượng trong javascript, các khóa có thể bao gồm dấu ngoặc kép hoặc không. Không có sự khác biệt nào ngoại trừ các trích dẫn cho phép bạn chỉ định một số khóa nhất định sẽ khiến trình thông dịch không thể phân tích cú pháp nếu bạn đã thử dùng chúng. Ví dụ: nếu bạn muốn một khóa chỉ là một dấu chấm than, bạn sẽ cần dấu ngoặc kép:

a = { "!": 1234 } // Valid
a = { !: 1234 } //  Syntax error

Trong hầu hết các trường hợp, bạn có thể bỏ qua các trích dẫn xung quanh các phím trên nghĩa đen của đối tượng.

Q2: JSON thực sự là một đại diện chuỗi. Nó chỉ là một chuỗi. Vì vậy, hãy xem xét điều này:

var testObject = { hello: "world" }
var jSonString = JSON.stringify(testObject);

testObjectlà một đối tượng thực, bạn có thể gọi các thuộc tính trên nó và làm bất cứ điều gì khác mà bạn có thể làm với các đối tượng:

testObject.hello => "world"

Mặt khác, jsonStringchỉ là một chuỗi:

jsonString.hello => undefined

Lưu ý một sự khác biệt khác: Trong JSON, tất cả các khóa phải được trích dẫn. Điều đó trái ngược với nghĩa đen của đối tượng, trong đó các trích dẫn thường có thể được bỏ qua theo giải thích của tôi trong Q1.

H3 Bạn có thể phân tích chuỗi JSON bằng cách sử dụng JSON.parsevà đây thường là cách tốt nhất để làm điều đó (nếu trình duyệt hoặc khung cung cấp chuỗi đó). Bạn cũng có thể chỉ sử dụng evalvì JSON là mã javascript hợp lệ, nhưng phương pháp trước đây được khuyến nghị vì một số lý do (eval có rất nhiều vấn đề khó chịu liên quan đến nó).


9

Các vấn đề được giải quyết bằng JSON

Giả sử bạn muốn trao đổi các đối tượng JavaScript thông thường giữa hai máy tính và bạn đặt hai quy tắc:

  • Dữ liệu truyền phải là một chuỗi thông thường.
  • Chỉ các thuộc tính có thể được trao đổi, các phương thức không được truyền đi.

Bây giờ bạn tạo hai đối tượng trên máy chủ đầu tiên:

var obj1 = { one: 1,"two":2,"three":3 }; // your example
var obj2 = { one: obj1.one, two: 2, three: obj1.one + obj1.two };

Làm thế nào bạn có thể chuyển đổi các đối tượng thành chuỗi để truyền đến máy chủ thứ hai?

  • Đối với đối tượng đầu tiên, bạn có thể gửi chuỗi này thu được dưới dạng định nghĩa bằng chữ '{ one: 1,"two":2,"three":3 }', nhưng thực tế bạn không thể đọc được chữ trong phần tập lệnh của tài liệu (ít nhất là không dễ dàng). Vì vậy obj1obj2thực sự phải được xử lý theo cùng một cách.
  • Bạn cần liệt kê tất cả các thuộc tính và giá trị của chúng và xây dựng một chuỗi tương tự như đối tượng.

JSON đã được tạo như một giải pháp cho các nhu cầu vừa thảo luận: Đó là một bộ quy tắc để tạo một chuỗi tương đương với một đối tượng bằng cách liệt kê tất cả các thuộc tính và giá trị (các phương thức bị bỏ qua).

JSON bình thường hóa việc sử dụng dấu ngoặc kép cho tên và giá trị thuộc tính.

Hãy nhớ rằng JSON là một bộ quy tắc duy nhất (một tiêu chuẩn).

Có bao nhiêu đối tượng JSON được tạo?

Chỉ có một, nó được tạo tự động bởi công cụ JS.

Các công cụ JavaScript hiện đại được tìm thấy trong các trình duyệt có một đối tượng gốc, cũng được đặt tên là JSON. Đối tượng JSON này có thể:

  • Giải mã một chuỗi được xây dựng bằng tiêu chuẩn JSON, sử dụng JSON.parse (chuỗi). Kết quả là một đối tượng JS thông thường với các thuộc tính và giá trị được tìm thấy trong chuỗi JSON.

  • Mã hóa các thuộc tính / giá trị của một đối tượng JS thông thường bằng cách sử dụng JSON.opesify (). Kết quả là một chuỗi tuân thủ với bộ quy tắc JSON.

Đối tượng JSON (đơn) tương tự như codec, chức năng của nó là mã hóa và giải mã.

Lưu ý rằng:

  • JSON.parse () không tạo đối tượng JSON, nó tạo một đối tượng JS thông thường, không có sự khác biệt giữa một đối tượng được tạo bằng cách sử dụng một đối tượng bằng chữ và một đối tượng được tạo bởi JSON.parse () từ một chuỗi tuân thủ JSON.

  • Chỉ có một đối tượng JSON, được sử dụng cho tất cả các chuyển đổi.

Quay trở lại câu hỏi :

  • Q1: Việc sử dụng một dấu ngoặc kép được phép cho các đối tượng bằng chữ. Lưu ý rằng dấu ngoặc kép được sử dụng tùy ý cho tên thuộc tính và là bắt buộc đối với giá trị chuỗi. Các đối tượng chính nó không được bao quanh bởi dấu ngoặc kép.

  • Câu 2: Các đối tượng được tạo từ chữ và sử dụng JSON.parse () hoàn toàn giống nhau. Hai đối tượng này là tương đương sau khi tạo:

    var obj1 = { one: 1, "two": 2, "three": 3 };
    var obj2 = JSON.parse('{ "one": "1", "two": "2", "three": "3" }');

  • Câu 3: Trên các trình duyệt hiện đại JSON.parse()được sử dụng để tạo đối tượng JS từ chuỗi tuân thủ JSON. (jQuery cũng có một phương thức tương đương có thể được sử dụng cho tất cả các trình duyệt).


7

Q1 - trong JS, bạn chỉ cần sử dụng dấu ngoặc kép nếu khóa là một từ dành riêng hoặc nếu nó sẽ là một mã thông báo bất hợp pháp. Trong JSON, bạn PHẢI luôn sử dụng dấu ngoặc kép trên các tên chính.

Q2 - jsonStringlà phiên bản nối tiếp của đối tượng đầu vào ...

Câu 3 - có thể được khử lưu lượng cho một đối tượng trông giống hệt bằng cách sử dụngJSON.parse()


1

Câu hỏi đã có câu trả lời tốt được đăng, tôi thêm một ví dụ nhỏ dưới đây, điều này sẽ giúp dễ hiểu các giải thích được đưa ra trong các câu trả lời trước. Sao chép dán bên dưới đoạn trích vào IDE của bạn để hiểu rõ hơn và nhận xét dòng chứa invalid_javascript_object_no_quoteskhai báo đối tượng để tránh lỗi thời gian biên dịch.

// Valid JSON strings(Observe quotes)
valid_json = '{"key":"value"}'
valid_json_2 = '{"key 1":"value 1"}' // Observe the space(special character) in key - still valid


//Valid Javascript object
valid_javascript_object_no_quotes = {
    key: "value"  //No special character in key, hence it is valid without quotes for key
}


//Valid Javascript object
valid_javascript_object_quotes = {
    key:"value",  //No special character in key, hence it is valid without quotes for key
    "key 1": "value 1" // Space (special character) present in key, therefore key must be contained in double quotes  - Valid
}



console.log(typeof valid_json) // string
console.log(typeof valid_javascript_object_no_quotes) // object
console.log(typeof valid_javascript_object_quotes) // object

//Invalid Javascript object 
invalid_javascript_object_no_quotes = {
   key 1: "value"//Space (special character) present in key, since key is not enclosed with double quotes "Invalid Javascript Object"
}
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.