aedev.net
  • Trang chủ
  • AI
  • Mobile
  • Flutter
  • React Native
  • Backend
  • DevOps
  • Hướng dẫn
No Result
View All Result
SAVED POSTS
aedev.net
  • Trang chủ
  • AI
  • Mobile
  • Flutter
  • React Native
  • Backend
  • DevOps
  • Hướng dẫn
No Result
View All Result
aedev.net
No Result
View All Result
Minh họa kiến trúc backend API gọn gàng cho sản phẩm nhỏ

structuredClone hay JSON round-trip: chọn cách sao chép theo kiểu dữ liệu

Suong Nguyen by Suong Nguyen
28/10/2026
in Đánh giá
0
585
SHARES
3.2k
VIEWS
Summarize with ChatGPTShare to Facebook

JSON.parse(JSON.stringify(value)) thường xuất hiện như một mẹo sao chép dữ liệu lồng nhau. Nó có thể đáp ứng một object chỉ gồm dữ liệu JSON, nhưng cũng có thể đổi Date thành chuỗi và làm mất thuộc tính undefined. Bản sao không còn cùng ý nghĩa dù vẫn có vẻ đúng khi nhìn nhanh.

Bài đối chiếu MDN ngày 28/10/2026 và chạy fixture tự tạo trên Node.js 24.18.1. So sánh tập trung vào kiểu dữ liệu, cách bắt đầu, mức kiểm soát và chi phí tích hợp. Bài không benchmark thời gian hoặc bộ nhớ, không tuyên bố một cách luôn nhanh hơn.

1. Bắt đầu từ một object có kiểu dữ liệu cụ thể

const source = {
  profile: {name: 'An'},
  createdAt: new Date('2026-10-27T08:00:00Z'),
  optional: undefined,
  score: NaN,
};
const jsonCopy = JSON.parse(JSON.stringify(source));
const cloneCopy = structuredClone(source);

console.log(typeof jsonCopy.createdAt, cloneCopy.createdAt instanceof Date);
console.log('optional' in jsonCopy, 'optional' in cloneCopy);
console.log(jsonCopy.score, Number.isNaN(cloneCopy.score));
cloneCopy.profile.name = 'Bình';
console.log(source.profile.name);

Các dòng lần lượt cho string true, false true, null true, rồi An. Structured clone giữ những kiểu được hỗ trợ trong fixture và tạo profile riêng. JSON round-trip thực hiện chuyển đổi qua biểu diễn JSON, nên kết quả phản ánh quy tắc serialize của JSON.

Đây không phải lý do để loại JSON khỏi hệ thống. Nếu yêu cầu là chuẩn bị dữ liệu để truyền qua một hợp đồng JSON, việc chuyển Date thành chuỗi có thể là chủ ý. Nhưng nếu mục tiêu là giữ Date để tiếp tục gọi phương thức của nó trong bộ nhớ, hãy kiểm tra kiểu sau khi sao chép.

2. Vòng tham chiếu là một phép thử khác

const circular = {name: 'demo'};
circular.self = circular;
try {
  JSON.stringify(circular);
} catch (error) {
  console.log(error.name);
}
const circularCopy = structuredClone(circular);
console.log(circularCopy !== circular);
console.log(circularCopy.self === circularCopy);

Kết quả là TypeError, true, true. Bản clone giữ cấu trúc vòng của dữ liệu mới, không trỏ ngược vào object gốc. Trong hệ thống dùng JSON cho mạng hoặc lưu trữ, sự tồn tại của vòng tham chiếu còn cho thấy bạn cần thiết kế lại dữ liệu đầu ra, thay vì chỉ đổi hàm clone rồi tiếp tục stringify nó.

3. Không có một hàm sao chép mọi thứ

try {
  structuredClone({run: () => 1});
} catch (error) {
  console.log(error.name);
}
console.log(JSON.stringify({run: () => 1}));

Ở runtime kiểm tra, kết quả là DataCloneError rồi {}. Một bên từ chối hàm không được hỗ trợ; bên kia bỏ thuộc tính đó khi serialize object. Không bên nào tạo ra một object mới giữ nguyên phương thức run.

Structured clone cũng không phải công cụ bảo toàn tùy ý prototype, property descriptor hoặc mọi hành vi của class tự viết. Nếu dữ liệu có những ràng buộc đó, hãy thiết kế phương thức chuyển đổi riêng và kiểm tra kết quả theo hợp đồng của kiểu dữ liệu.

4. So sánh cùng một nhóm tiêu chí

Tiêu chí structuredClone JSON round-trip
Bắt đầu Một lời gọi ở runtime hỗ trợ Hai bước stringify rồi parse
Kiểu dữ liệu Giữ nhiều kiểu được thuật toán hỗ trợ Theo tập kiểu và quy tắc JSON
Lỗi khó thấy Có thể ném lỗi với dữ liệu không clone được Có thể bỏ hoặc đổi giá trị trước khi parse
Hệ sinh thái Cần kiểm tra runtime mục tiêu Phổ biến trong luồng dữ liệu JSON
Hiệu năng Chưa đo trong bài Chưa đo trong bài
Chi phí vận hành Không có dịch vụ ngoài trong fixture Không có dịch vụ ngoài trong fixture

Với dữ liệu trong bộ nhớ cần giữ Date và vòng tham chiếu như ví dụ, structuredClone phù hợp hơn. Với một DTO đã được định nghĩa chỉ gồm kiểu JSON và cần serialize, hãy ưu tiên hợp đồng DTO rõ ràng. Đừng thêm stringify/parse chỉ để gọi đó là deep clone nếu mục tiêu thực sự là cập nhật vài trường trong state.

Kiểm tra trước khi thay trong dự án

Liệt kê các kiểu thực tế: array, object lồng, Date, Map, BigInt hoặc class tự viết. Sau đó kiểm tra thuộc tính còn tồn tại, kiểu trả về và quan hệ tham chiếu cần giữ. Chỉ dùng console.log của toàn object có thể làm bạn bỏ sót khác biệt giữa chuỗi ngày và Date.

Ví dụ không dùng tùy chọn transfer. Nếu ứng dụng có buffer và muốn chuyển quyền sở hữu, cần đọc hành vi transfer riêng; nó có ảnh hưởng khác với một bản sao thông thường.

Các ca trên đã chạy trên Node, chưa kiểm tra từng trình duyệt hoặc engine JavaScript của app mobile. Trước khi đưa vào React Native hay một runtime cũ, xác nhận API có sẵn và chạy lại fixture ở môi trường đó. Chọn dựa trên dữ liệu cần giữ và giới hạn đã kiểm tra, không chỉ dựa vào độ ngắn của một dòng code.

Nguồn tham khảo

  • MDN: structuredClone
  • MDN: JSON.stringify
  • MDN: Structured clone algorithm và giới hạn

Tags: Đánh giá công cụJavaScriptstructuredClone
SummarizeShare234
Suong Nguyen

Suong Nguyen

Related Stories

Minh họa kiến trúc backend API gọn gàng cho sản phẩm nhỏ

URLSearchParams hay encodeURIComponent: chọn cách tạo query string có tiếng Việt

by Suong Nguyen
27/10/2026
0

So sánh hai cách dựng query theo tính đúng, tham số lặp, khả năng bảo trì và giới hạn, với fixture tiếng Việt chạy bằng Node.js.

Minh họa kiến trúc backend API gọn gàng cho sản phẩm nhỏ

Array.includes hay Set.has: chọn theo cách dữ liệu được tra cứu và cập nhật

by Suong Nguyen
26/10/2026
0

So sánh Array.includes và Set.has bằng hành vi, vòng đời cập nhật và chi phí tạo cấu trúc, không dựa vào một benchmark thiếu ngữ cảnh.

Minh họa pipeline CI/CD từ commit đến deploy cho team nhỏ

gzip hay Brotli cho asset text: đo kích thước trước khi chọn cấu hình

by Suong Nguyen
25/10/2026
0

So sánh gzip và Brotli bằng fixture tự tạo, kiểm tra giải nén đúng dữ liệu và đánh giá cả chi phí build lẫn cách phục vụ asset.

Minh họa pipeline CI/CD từ commit đến deploy cho team nhỏ

npm ci và npm install: chọn theo cách quản lý lockfile của nhóm

by Suong Nguyen
24/10/2026
0

So sánh npm ci và npm install bằng hành vi với lockfile, ví dụ offline và tiêu chí vận hành có thể kiểm tra.

Next Post
Minh họa pipeline CI/CD từ commit đến deploy cho team nhỏ

Docker Compose: .env dùng nội suy chưa chắc là biến môi trường trong container

0 0 votes
Article Rating
Subscribe
Login
Notify of
guest
guest
0 Comments
Oldest
Newest Most Voted
AE Dev

AE Dev mang đến các bài viết về lập trình, mobile app, backend, frontend, WordPress và công nghệ, phù hợp cho developer muốn học hỏi và cập nhật kiến thức thực tế.

Recent Posts

  • React Native Switch: cập nhật value từ onValueChange và khóa đúng bằng disabled
  • Phỏng vấn JavaScript: vì sao callback trong vòng lặp đều đọc cùng giá trị?
  • Android ClipboardManager: sao chép text và tránh thông báo trùng từ Android 13

Categories

  • AI
  • Backend
  • Đánh giá
  • DevOps
  • Flutter
  • Hướng dẫn
  • Lập trình Mobile
  • Phỏng vấn
  • React Native
  • Uncategorized

Weekly Newsletter

  • Buy JNews
  • Support Forum
  • Pre-sale Question
  • Contact Us

© 2026 AE Dev - Blog công nghệ, lập trình và chia sẻ kiến thức IT.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
No Result
View All Result
  • Trang chủ
  • AI
  • Mobile
  • React Native
  • Backend
  • DevOps
  • Hướng dẫn
  • Flutter

© 2026 AE Dev - Blog công nghệ, lập trình và chia sẻ kiến thức IT.

wpDiscuz
0
0
Would love your thoughts, please comment.x
()
x
| Reply