Computer >> Máy Tính >  >> Lập trình >> Javascript

Toán tử Spread JavaScript:Hướng dẫn

Toán tử trải rộng avaScript mở rộng một mảng theo cú pháp chấp nhận các đối số. Toán tử lây lan thường được sử dụng để sao chép các đối tượng, hợp nhất mảng hoặc chuyển nội dung của danh sách vào một hàm.

Nhà điều hành spread. Không, không liên quan gì đến bánh mì nướng. Trong JavaScript, toán tử lây lan có một ý nghĩa cụ thể:đó là một cách để truy cập nội dung của một đối tượng có thể lặp lại. Mặc dù điều này nghe có vẻ không thú vị bằng việc dán miếng phết lên bánh mì nướng, nhưng đó là một công cụ cực kỳ hữu ích mà bạn cần biết.

Trong hướng dẫn này, chúng ta sẽ nói về toán tử lây lan JavaScript và cách hoạt động của nó. Chúng tôi sẽ giới thiệu cho các bạn một vài ví dụ về các trường hợp sử dụng phổ biến để giúp bạn bắt đầu.

Toán tử Spread JavaScript là gì?

Toán tử trải rộng JavaScript cho phép bạn truy cập nội dung của một đối tượng có thể lặp lại. Toán tử spread là một tập hợp ba dấu chấm (dấu chấm lửng) theo sau là tên của tệp có thể lặp lại mà bạn muốn truy cập. Toán tử này đã được giới thiệu trong JavaScript ES6.

Ba loại đối tượng có thể lặp lại là mảng, đối tượng ký tự và chuỗi. Sử dụng vòng lặp for, bạn có thể lặp qua tất cả các loại dữ liệu này và chạy một quy trình chung trên chúng.

Các đối tượng có thể lặp lại rất hữu ích vì bạn có thể thực hiện cùng một quá trình trên chúng nhiều lần. Bạn có thể lặp qua một chuỗi và thay thế các ký tự nhất định. Bạn có thể lặp qua một mảng và tạo tổng tất cả các giá trị được lưu trữ trong mảng.

Cú pháp cho toán tử spread là:

var names = ["John", "Lisa", "Harry"];
var new_names = [...names, "Leslie"];
console.log(new_names);

Trong cú pháp này, chúng tôi sử dụng… tên để chuyển nội dung của danh sách “tên” của chúng tôi vào một danh sách được gọi là “tên_mới”. Danh sách “new_names” chứa tất cả các mục trong danh sách “tên”, cũng như một tên mới:Leslie.

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

Ba trường hợp sử dụng phổ biến cho toán tử spread là:

  • Tạo bản sao của một bản sao có thể lặp lại.
  • Thêm các mục vào một trang có thể lặp lại mới.
  • Chuyển danh sách các đối số vào một hàm.

Cú pháp lây lan đại diện cho tất cả các phần tử riêng lẻ trong một danh sách.

JavaScript của toán tử Spread:Tạo bản sao của một tệp có thể lặp lại

Toán tử spread là một phương pháp hiệu quả để nhân bản một giá trị có thể lặp lại. Trong khi có những cách khác để tiếp cận vấn đề này, toán tử spread thực sự dễ sử dụng. Để tạo bản sao của một vùng có thể lặp lại, hãy chỉ định ba dấu chấm và tên của mảng bạn muốn tạo.

Trong ví dụ cuối cùng của chúng tôi, chúng tôi đã chỉ ra cách điều này hoạt động với một mảng. Chúng tôi cũng có thể sử dụng toán tử spread để sao chép các đối tượng JavaScript:

const lemon_drizzle = {
	name: "Lemon Drizzle",
	price: 1.95,
	vegan: true
}

const new_lemon_drizzle = {...lemon_drizzle};
console.log(new_lemon_drizzle);

Mã của chúng tôi in nội dung sau vào bảng điều khiển JavaScript:

{ name: "Lemon Drizzle", price: 1.95, vegan: true }

Có một vài điểm khác biệt quan trọng mà chúng ta cần thực hiện trong ví dụ này. Chúng tôi đang tạo một bản sao của một đối tượng JavaScript. Điều này có nghĩa là chúng ta cần sử dụng dấu ngoặc nhọn ({}) thay vì dấu ngoặc vuông ([]).

Thứ hai, thay vì chỉ định một mảng, chúng ta đã chỉ định một đối tượng. Đối tượng này chứa ba khóa và giá trị, mỗi khóa có liên quan đến chiếc bánh cupcake “Lemon Drizzle” của chúng tôi.

Trải rộng JavaScript:Thêm các mục vào một trang có thể lặp lại mới

Các trường hợp sử dụng của toán tử spread không chỉ dừng lại ở việc sao chép các đoạn lặp! Còn nhiều thứ khác để khám phá. Toán tử spread thường được sử dụng để thêm các mục từ một mục có thể lặp lại sang mục tiếp theo. Hãy xem xét ví dụ sau:

const cupcakes = [
	'Lemon Drizzle',
	'Chocolate Chip',
	'Vanilla Iced'
];

const new_cupcakes = [...cupcakes, 'Red Velvet', 'Raspberry Dark Chocolate'];
console.log(new_cupcakes);

Mã của chúng tôi trả về:

["Lemon Drizzle", "Chocolate Chip", "Vanilla Iced", "Red Velvet", "Raspberry Dark Chocolate"]

Chúng tôi đã tạo một bản sao của mảng JavaScript gốc có tên là “new_cupcakes”, mảng này cũng bao gồm một vài giá trị bổ sung mà chúng tôi đã tạo.

Bạn cũng có thể sử dụng cùng một cú pháp để hợp nhất hai tệp lặp lại với nhau. Tất cả những gì bạn cần làm là chỉ định hai vòng lặp bên trong dấu ngoặc vuông bằng cách sử dụng toán tử spread:

const old_menu = [
	'Lemon Drizzle',
	'Chocolate Chip',
	'Vanilla Iced'
];

const new_menu = [
	'Red Velvet',
	'Raspberry Dark Chocolate'
]

const final_menu = [...old_menu, ...new_menu];
console.log(final_menu);

Mã của chúng tôi trả về:

["Lemon Drizzle", "Chocolate Chip", "Vanilla Iced", "Red Velvet", "Raspberry Dark Chocolate"]

Kết quả tương tự được trả về như trước đó nhưng lần này chúng tôi đã hợp nhất hai mảng với nhau.

Trải rộng JavaScript:Truyền các đối số cho một hàm

Khi bạn chuyển nhiều đối số vào một hàm JavaScript, có thể hữu ích khi sử dụng toán tử lây lan. Hãy xem xét ví dụ này:

function placeOrder(name, order, price) {
	console.log('Name: ' + name);
	console.log('Order: ' + order);
	console.log('Price: ' + price);
}

placeOrder('Geoff', 'Red Velvet', 1.85);

Mã của chúng tôi trả về:

Name: Geoff
Order: Red Velvet
Price 1.85

Chúng tôi đã khai báo một hàm có tên là placeOrder () nhận trong ba đối số và in chúng ra bảng điều khiển. Trước mỗi giá trị là một nhãn mô tả nội dung mà mỗi đối số chứa.

Mặc dù mã này là chức năng, chúng tôi có thể chỉ định các đối số của mình trong một mảng và sử dụng toán tử spread để chuyển chúng vào hàm của chúng tôi:

function placeOrder(name, order, price) {
	console.log('Name: ' + name);
	console.log('Order: ' + order);
	console.log('Price: ' + price);
}

const order = ['Geoff', 'Red Velvet', 1.85];

placeOrder(...order);

Mã của chúng tôi trả về:

Name: Geoff
Order: Red Velvet
Price 1.85

Đầu ra của mã này giống nhau, nhưng cách mã của chúng ta hoạt động khác nhau. Thay vì chuyển trực tiếp các giá trị cho hàm của chúng tôi, chúng tôi chỉ định các giá trị đó trong một danh sách. Sau đó, chúng tôi sử dụng toán tử spread để chuyển các giá trị đó vào hàm của chúng tôi.



Kết luận

Toán tử spread được sử dụng rộng rãi trong JavaScript. Nó giúp dễ dàng sao chép các đối tượng có thể lặp lại, thêm các mục vào một đối tượng có thể lặp lại mới và truyền các đối số cho một hàm. Cú pháp cho toán tử spread là ba dấu chấm, theo sau là đối tượng có thể lặp lại mà bạn muốn truy cập.

Bây giờ, bạn đã sẵn sàng để bắt đầu sử dụng toán tử trải rộng JavaScript như một người chuyên nghiệp!

Để được tư vấn về các tài nguyên, sách và khóa học JavaScript hàng đầu, hãy xem bài viết Cách học JavaScript của chúng tôi.