Hàm JSON trong JavaScript

Tại một số thời điểm trong cuộc sống hoặc sự nghiệp của chúng tôi trong lĩnh vực phát triển, tất cả chúng tôi đều tự hỏi. làm thế nào các máy tính có thể giao tiếp với nhau một cách dễ dàng và nhanh chóng như vậy?

Đôi khi, bạn điền tên người dùng của mình vào một ứng dụng và hàng tấn dữ liệu sẽ có trong vài giây hoặc ít hơn. Làm sao có thể?

Trong bài viết này, bạn sẽ hiểu làm thế nào tất cả những điều này có thể thực hiện được và cách thực hiện với JSON trong JavaScript. Vì vậy, nếu bạn không biết JS, đây là thời điểm tốt để học những điều cơ bản

JSON là gì?

JSON là định dạng chỉ có văn bản tuân theo các quy tắc cú pháp JSON để gửi các loại dữ liệu khác nhau

Để giúp bạn hiểu nó một cách nhanh chóng, JSON là viết tắt của JavaScript Object Notation. Bên cạnh đó, JSON tương thích với hầu hết mọi ngôn ngữ

Điều này có thể thực hiện được vì JSON là một định dạng nhẹ để giao tiếp dữ liệu giữa các máy tính. Nó rất dễ hiểu đối với tất cả các loại nhà phát triển và bạn có thể viết hoặc đọc nó bằng mã được viết bằng bất kỳ ngôn ngữ lập trình nào

Hình ảnh từ thư viện tư nhân

Đối tượng JSON VS Đối tượng JS

Trước khi tiếp tục, có hai khái niệm mà chúng ta cần phân biệt rõ để hiểu các khái niệm cốt lõi của JSON trong JavaScript. Trong trường hợp này, đó là sự khác biệt giữa đối tượng JSON và đối tượng JS

• Một đối tượng JS chỉ là một tập hợp các cặp khóa/giá trị không có thứ tự, trong đó giá trị có thể là bất kỳ loại dữ liệu gốc nào chúng ta có trong JS
• Đối tượng JSON là định dạng trao đổi dữ liệu lưu phiên bản văn bản của đối tượng javascript, nhưng chúng tôi sẽ không thực thi bất kỳ logic nào trên đối tượng đó trước khi phân tích cú pháp chuỗi

Quy tắc cú pháp JSON

Các đối tượng JSON được cấu trúc để trở thành các đối tượng JavaScript gốc mà không sửa đổi chúng, vì vậy chúng ta cần tuân theo một bộ quy tắc để xác thực rằng các đối tượng JSON và JavaScript giống hệt nhau

Những quy tắc này là

• Dữ liệu phải ở trong cặp khóa/giá trị, được phân tách bằng dấu hai chấm
• Các cặp dữ liệu phải được phân tách bằng dấu phẩy
• Trong các cặp dữ liệu, khóa phải là một chuỗi trích dẫn kép duy nhất
• Giá trị có thể là bất kỳ kiểu dữ liệu nguyên thủy nào nhưng không bao giờ là hàm
• Các đối tượng được viết bên trong dấu ngoặc nhọn
• Mảng được viết trong ngoặc vuông

Hình ảnh từ thư viện tư nhân

Hàm JSON trong JavaScript

Trong JavaScript, chúng tôi có hai phương pháp để làm việc với JSON và chúng hoạt động theo cách rất trực quan để mọi người có thể học chúng một cách nhanh chóng.  

xâu chuỗi

Cái đầu tiên là phương thức stringify. Phương thức này cho phép người dùng chuyển đổi một đối tượng bằng chữ JavaScript thành một đối tượng JSON, trả về một chuỗi theo giá trị mà chúng ta đã truyền cho hàm

Khi làm việc với phương thức stringify, chúng ta cần lưu ý một số điều để tránh sai sót, bởi vì nếu đối tượng JS của chúng ta có các giá trị không xác định, nó sẽ thay thế chúng bằng null và nếu chúng ta có một số loại dữ liệu không được hỗ trợ, nó cũng có thể kiểm duyệt. . Để tránh vấn đề này, bạn cũng có thể sử dụng tùy chọn thay thế sau giá trị trong hàm, nhưng hiện tại, chúng tôi sẽ không đi sâu vào những tình huống đó

Hình ảnh từ thư viện tư nhân

phân tích cú pháp

Phương thức phân tích cú pháp sẽ làm ngược lại với stringify. Chúng tôi sẽ cung cấp đối tượng JSON cho chức năng này và nó sẽ chuyển đổi nó thành một đối tượng bằng chữ JS

Để làm việc với phương thức này, chúng ta sẽ cần biết về đối tượng JSON mà chúng ta đang đọc vì nếu chúng ta Chuỗi hóa nó bằng tùy chọn thay thế, chúng ta sẽ cần triển khai tùy chọn hồi sinh, nhưng, một lần nữa, những trường hợp này rất hiếm gặp

Hình ảnh từ thư viện tư nhân

Cách truy cập dữ liệu JSON

Sử dụng JSON trong JavaScript dẫn chúng ta đến 3 cách chính để đọc đối tượng theo nghĩa đen mà chúng ta cần làm việc, chúng ta có thể sử dụng ký hiệu dấu chấm, dấu ngoặc vuông hoặc phá hủy đối tượng

Dưới đây, bạn có thể xem các ví dụ về từng loại và quyết định cái nào là tốt nhất cho trường hợp sử dụng của bạn

Trình truy cập thuộc tính dấu ngoặc vuông

Để truy cập một giá trị đối tượng bằng cách sử dụng dấu ngoặc vuông, chúng tôi sẽ tạo một đối tượng [‘key’] và nó sẽ trả về giá trị cho khóa mà chúng tôi muốn

Hình ảnh từ thư viện tư nhân

Ký hiệu dấu chấm

Chúng ta có thể sử dụng ký hiệu dấu chấm để truy cập giá trị cho một khóa cụ thể. Cách dùng đúng sẽ là “đối tượng. key” và nó sẽ trả về giá trị mong muốn

Hình ảnh từ thư viện tư nhân

Phá hủy đối tượng

Việc hủy đối tượng có thể hơi khó hiểu lúc đầu, nhưng đây chỉ là một cách để gán giá trị cho các biến hoặc hằng cùng một lúc, như trong ví dụ được liệt kê bên dưới

Hình ảnh từ thư viện tư nhân

Bây giờ bạn đã hiểu các phương thức để thực hiện, bạn có thể xem cách lặp qua mảng các đối tượng JSON

Tại sao lại là JSON?

JSON đã là một tiêu chuẩn. Nó trở nên phổ biến vì JS là công cụ chính của nhà phát triển cho front-end. Cần có một cách chuẩn hóa để giao tiếp dữ liệu từ một ngôn ngữ khác dưới dạng đối tượng JS và giúp cuộc sống dễ dàng hơn. Ví dụ: hãy lấy một phụ trợ truy xuất API, API này phải được định dạng để được sử dụng ở giao diện người dùng. Nếu các ngôn ngữ phụ trợ không có cùng cú pháp để viết các đối tượng như JS, điều đó sẽ trở thành vấn đề đau đầu và cấu trúc giao diện người dùng sẽ thay đổi từ ứng dụng này sang ứng dụng khác. Nhưng với JSON, chúng tôi biết rằng chúng tôi có thể truy cập dữ liệu được truy xuất rất nhanh, chỉ cần gọi phân tích cú pháp phương thức JSON. Sau đó, chúng ta có thể sử dụng nó như một đối tượng JS thông thường

Tệp JSON

Các tệp JSON là các tệp có phần. json và rất phù hợp để lưu trữ dữ liệu ở định dạng JSON được mở bằng bất kỳ ngôn ngữ lập trình nào và chỉ cần được phân tích cú pháp để biến nó thành đối tượng JS. Các tệp này rất hữu ích vì mã trở nên nhẹ hơn nhưng vẫn có thể đọc được và chỉnh sửa được bằng bất kỳ trình chỉnh sửa mã nào

Có thể chúng ta không thường xuyên gặp loại tệp này vì hầu hết các kết nối giữa các máy tính đều thông qua kết nối internet, vì vậy chúng tôi không cần lưu dữ liệu vào các tệp trên ổ cứng. Tuy nhiên, các trang như Google+ cho phép người dùng tải xuống dữ liệu trong. json mà họ có thể sử dụng sau này

Làm việc với. tệp json

Các tệp json dựa trên văn bản, nghĩa là chúng ta có thể mở chúng bằng bất kỳ trình soạn thảo mã nào, nhưng ngay cả khi con người có thể đọc được thì việc đọc hàng nghìn hoặc hàng triệu mục nhập không phải là một ý kiến ​​hay. Với ý nghĩ đó, chúng tôi có hai cách để đọc tệp bằng JavaScript, cho phép chúng tôi tải đối tượng JSON trực tiếp từ tệp cục bộ

Làm cách nào để tải tệp JSON trong Javascript?

Để tải các tệp JSON, chúng tôi cần chọn giữa yêu cầu và tìm nạp và quyết định cái nào tốt hơn cho trường hợp của chúng tôi. Nếu tệp được lưu cục bộ trong máy tính của chúng tôi, chúng tôi nên sử dụng yêu cầu, nghĩ về tệp JSON như một thành phần khác của dự án của chúng tôi. Mặt khác, nếu chúng ta cần đọc một tệp ở đâu đó trên internet, chúng ta nên sử dụng tìm nạp, xử lý nó như bất kỳ liên kết nào khác

Sử dụng Yêu cầu ()

Nếu bạn yêu cầu tệp, vì bạn thường sẽ yêu cầu một mô-đun từ một tệp JS khác, bạn sẽ được phép sử dụng tất cả nội dung của nó dưới dạng các đối tượng JSON thông thường, phân tích cú pháp và bắt đầu làm việc với nó

Hình ảnh từ thư viện tư nhân

Sử dụng Tìm nạp ()

Bạn cũng có thể sử dụng tìm nạp, tương tự như thực hiện lệnh gọi HTTPS, nhưng điều đó sẽ làm cho mã không đồng bộ, điều này sẽ vô dụng nếu bạn có tệp được lưu trữ cục bộ. Tuy nhiên, điều này rất hữu ích nếu bạn đang ở trong môi trường dựa trên web, nơi bạn có thể gặp một số chậm trễ trong khi yêu cầu dữ liệu

Hình ảnh từ thư viện tư nhân

Phần kết luận

JSON trong JavaScript là một công cụ cho phép các nhà phát triển kết nối với các ứng dụng được viết bằng nhiều ngôn ngữ khác nhau, phá vỡ rào cản giữa các chương trình và cho phép họ nhận và gửi thông tin ở định dạng rất nhẹ

Nếu bạn muốn tìm hiểu thêm về JSON, JavaScript và cách viết mã các ứng dụng web của riêng mình, bạn có thể làm điều đó bằng cách tham gia Microverse

Hàm JSON() đang làm gì?

Làm cách nào để gọi hàm JavaScript trong JSON?

Bạn có thể đặt JSON trong JavaScript không?

Chúng ta có thể sử dụng hàm trong JSON không?