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

7 Cách Tăng Tốc Ứng Dụng React Hiệu Quả Mà Bạn Có Thể Làm Ngay

React là một thư viện JavaScript phổ biến trong việc xây dựng giao diện người d

Trung Quốc “thả quân bài tẩy”: hàng loạt robot hình người!

MỘT CUỘC CÁCH MẠNG ROBOT ĐANG HÌNH THÀNH Ở TRUNG QUỐC Thượng Hải, ngày 13/5 –

9 Mẹo lập trình Web “ẩn mình” giúp tiết kiệm hàng giờ đồng hồ

Hầu hết các lập trình viên (kể cả những người giỏi) đều tốn thời gian x

Can GPT-4o Generate Images? All You Need to Know about GPT-4o-image

OpenAI‘s GPT-4o, introduced on March 25, 2025, has revolutionized the way we create visual con