- vừa được xem lúc

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

0 0 16

Người đăng: Nguyễn Song Toàn

Theo Viblo Asia

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] nếu dùng Spread Operator thì chúng ta dùng như sau let copy =[...arr] console.log( copy)//[1,2,3,4]

nếu bạn thiếu dấu ... trong array thì chuyện gì sẽ xảy ra: đó là array trong array let copy=[[1,2,3,4]], chứ không phải [1,2,3,4] 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 kết quả nếu dùng spread operation : kết quả

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ì ? nếu dùng Spread Operator thì

các bạn đừng quên dấu ... nếu quên thì dữ liệu sẽ là 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 :

khi dùng Spread Operator: 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é

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

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

Bình luận

Bài viết tương tự

- vừa được xem lúc

Cùng tìm hiểu về các hook trong React hooks

Đối với ai đã từng làm việc với React thì chắc hẳn đã có những lúc cảm thấy bối rối không biết nên dùng stateless (functional) component hay là stateful component. Nếu có dùng stateful component thì cũng sẽ phải loay hoay với đống LifeCycle 1 cách khổ sở Rất may là những nhà phát triển React đã kịp

0 0 101

- vừa được xem lúc

Khi nào nên (và không nên) sử dụng Redux

. Công việc quản lý state với những hệ thống lớn và phức tạp là một điều khá khó khăn cho đến khi Redux xuất hiện. Lấy cảm hứng từ design pattern Flux, Redux được thiết kế để quản lý state trong các project JavaScript.

0 0 128

- vừa được xem lúc

ReactJS: Props và State

Nếu bạn đã học ReactJS hay React Native, bạn sẽ thấy các Props và State được sử dụng rất nhiều. Vậy chính xác chúng là gì? Làm thế nào để chúng ta sử dụng chúng đúng mục đích đây.

0 0 60

- vừa được xem lúc

State và Props trong Reactjs

Hello các bạn, tiếp tục seri tìm hiểu về ReactJs hôm nay mình xin giới thiệu đến các bạn hai thứ mình cho là thú vị nhất của ReactJs là State và Props. State bạn có thể hiểu đơn giản là một nơi mà bạn lưu trữ dữ liệu của Component, từ đó bạn có thể luân chuyển dữ liệu đến các thành phần trong Compon

0 0 55

- vừa được xem lúc

Memoization trong React

. 1.Introduction. Memoization có liên quan mật thiết đến bộ nhớ đệm, và dưới đây là một ví dụ đơn giản:. const cache = {}.

0 0 52

- vừa được xem lúc

Nâng cao hiệu suất React Hooks với React.memo, Memoization và Callback Functions

1.Ngăn Re-render và React.memo. React.

0 0 81