tìm hiểu về spread operation trong reactjs

Sau đây là bài tìm hiểu về cách dùng spread operator: Chức năng của Spread Operator là gì: clone lại một giữ liệu nhưng không gây ảnh hưởng đến dữ liệu ban đầu 1./Copy 1 array cho 1 array let arr=[1,2,3,4]; để copy lại array arr kiểu bình thường thì chúng ta làm như sau

Sau đây là bài tìm hiểu về cách dùng spread operator:

Chức năng của Spread Operator là gì: clone lại một giữ liệu nhưng không gây ảnh hưởng đến dữ liệu ban đầu

1./Copy 1 array

cho 1 array
let arr=[1,2,3,4];
để copy lại array arr kiểu bình thường thì chúng ta làm như sau
let copy =arr


console.log( copy)//[1,2,3,4] image.png
nếu dùng Spread Operator thì chúng ta dùng như sau
image.png
let copy =[…arr] console.log( copy)//[1,2,3,4] image.png

nếu bạn thiếu dấu … trong array thì chuyện gì sẽ xảy ra:
image.png
đó là array trong array let copy=[[1,2,3,4]], chứ không phải [1,2,3,4] image.png
chúng ta thấy 2 cách trên là như nhau

2./ nối 2 array lại với nhau (Concatenate arrays)

để nối 2 array bất kỳ lại với nhau trong javaScript thì chúng ta có cách như dùng function concat(),
code
image.png
kết quả
image.png
nếu dùng spread operation :
image.png
kết quả
image.png

ta thấy 2 kết quả là như nhau.

Copy an object

để copy 1 object lại theo cách thông thường thì chúng ta sẽ dùng cách gì ?
image.pngimage.png
nếu dùng Spread Operator thì
image.png

image.png

các bạn đừng quên dấu … nếu quên thì dữ liệu sẽ là
image.pngimage.png
object trong object

ghép các object lại với nhau (Merge object)

để ghép 2 hay nhiều object lại với nhau thì chúng ta sẽ dùng function object.assign() để làm điều đó như sau :
image.png

image.png
khi dùng Spread Operator:
image.png
lưu ý khi có 2 dữ liệu trùng nhau key : age có 2 dữ liệu là age :25 và age: 332, vì khi ghép là chúng ta để
let employee = {…person,…job, }; nên age :332 ở sau nên lấy giá trị sau nhé

image.png
còn nếu để let employee = { …job,…person,}; thì age : 25
image.png

lưu ý: khi sử dụng Spread Operator : dữ liệu nào thì … dữ liệu đó

bạn có array bạn dùng cho array, bạn có obj bạn dùng cho obj k thể nào gắn obj vào arr được như ví dụ bên dưới
image.png

Nguồn: viblo.asia

Bài viết liên quan

Cấu hình Prisma v7 Với Nest.js Mới nhất

Setup Prisma v7 trong Nest.js Bài viết dành cho ai mới học Nest.js và chọn prisma làm OR

Tấn Công Ứng Dụng Web: Mối Đe Dọa Hàng Đầu – Phần 2

viết lại nội dung này ” Phát hiện các cuộc tấn công Cross Site Scripting (XSS)

AI Chatbot 2025: Xu Hướng Tất Yếu Cho Doanh Nghiệp Dẫn Đầu

Giới thiệu AI chatbots đã trải qua một hành trình đáng kể, từ những công cụ t

Tấn Công Ứng Dụng Web: Mối Đe Dọa Hàng Đầu – Phần 1

Tấn công web là gì? Ứng dụng web là các ứng dụng cung cấp dịch vụ cho người