Hướng dẫn dùng oporator JavaScript
Chào các bạn, để tiếp tục chuỗi bài về Javascript của mình, hôm nay mình sẽ viết về một operator rất hữu ích, đó là spread operator (được viết là Show Spread operator là gì ?Trong Javascript, spread operator là nói đến cách sử dụng ký hiệu dấu ba
chấm
Spread operator được thêm vào từ phiên bản ES6 (ES2015), cũng như rest parameter, 2 loại operator này giống nhau về mặt cú pháp, đó là
cùng sử dụng dấu Vậy thì ... dùng để làm gì ?
Mình sẽ lấy ví dụ cơ bản nhất, đó là hàm tìm số lớn nhất trong mảng như sau :
Khi chúng ta truyền một mảng 3 phần tử vào làm tham số của một hàm (ở đây là hàm Math.max()) như dòng thứ 2, chúng
ta mong muốn rằng hàm này sẽ hiểu rằng chúng ta truyền vào 3 tham số riêng biệt, và tìm số lớn nhất trong 3 số này (như cách viết trong dòng thứ 2). Tất nhiên là nếu chúng ta viết như vậy thì hàm sẽ không hiểu được rồi, và sẽ cho ra output là NaN. Đây chính là lúc chúng ta cần đến
Trong trường hợp này, spread operator đã mở rộng (spread) mảng 3 phần tử thành 3 tham số riêng biệt. Ngoài chức năng như mình đã kể ở trên, spread operator còn có rất nhiều các chức năng hữu dụng khác giúp code của chúng ta ngắn gọn và dễ nhìn hơn rất nhiều, có thể kể đến như :
Những ví dụ khác về spread operator ...Sau đây mình sẽ giới thiệu tới các bạn một vài ví dụ mà spread operator có thể làm được như sao chép mảng, tách string thành các characters, hoặc là kết hợp các thuộc tính của một object
Sao chép mảngVới spread operator
Sử dụng mảng như danh sách các tham số
Một trong những cách dễ hiểu nhất để hiểu cách sử dụng của spread operator đó là các phương thức của lớp
Không chỉ các hàm của lớp
Thêm phần tử vào mảngNhư đã đề cập ở trên đây, spread operator còn có thể thêm một hay nhiều phần tử vào mảng, giúp cho đoạn code của chúng ta đơn giản và tự nhiên hơn rất nhiều so với cách viết code truyền thống như trước đây :
Thao tác với state trong ReactKhi làm việc với React, đặc biệt là React Hook, việc thêm một phần tử vào React state sẽ được thực hiện dễ dàng hơn rất nhiều, nếu chúng ta sử dụng
Kết hợp 2 hay nhiều object với nhauSpread operator ngoài có thể thao tác với mảng thì còn có thể thao tác với các object. Chúng ta có thể sử dụng spread operator để kết hợp các thuộc tính, các phương thức của 2 hay nhiều object lại thành một object mới. Sau đây là ví dụ :
Một số lưu ý khi sử dụng spread operatorCó một điều khá thú vị làm nên sự hữu dụng của spread operator, đó là chúng sẽ tạo ra một tham chiếu mới, sau đó sao chép giá trị của tham chiếu cũ vào tham chiếu mới này. Khi đó, mọi thao tác làm thay đổi tham chiếu cũ sẽ không ảnh hưởng đến mảng được sao chép, điều mà sẽ xảy ra nếu chúng ta sao chép mảng sử dụng phương thức gán
Như các bạn đã thấy, do đặc tính của spread operator, việc sao chép một mảng đã trở nên thuận tiện, dễ kiểm soát và ít xảy ra lỗi hơn rất nhiều. Kết luậnKể từ khi ra đời từ phiên bản ES6 (ES2015), spread operator Việc biết thêm những cú pháp mới sẽ giúp chúng ta tiết kiệm thời gian khi code, đồng thời giúp code của chúng ta trở nên dễ đọc hơn rất nhiều. Và mình hi vọng bài chia sẻ này của mình sẽ giúp ích cho các bạn trong "sự nghiệp" code đầy gian nan và vất vả của bản thân nhé Tài liệu tham khảo: https://www.geeksforgeeks.org/javascript-rest-operator/ https://medium.com/coding-at-dawn/how-to-use-the-spread-operator-in-javascript-b9e4a8b06fab |