Sự khác biệt giữa toán tử trải rộng và phần còn lại trong javascript là gì?

Được giới thiệu vào năm 2015, ES6 (còn được gọi là ECMAScript 2015 hoặc ECMAScript 6) là bản sửa đổi JavaScript có tác động mạnh nhất kể từ ES5 (ECMAScript 5) vào năm 2009. Nó đã thêm một lượng lớn các tính năng thực sự, bao gồm Hàm mũi tên, từ khóa const và let, tham số mặc định, trong số những tính năng khác. Sau đó, ECMAScript 2016, 2017 và 2018 thậm chí còn được bổ sung nhiều hơn, bao gồm các tham số Rest hơi bí ẩn và toán tử Spread (hoặc Cú pháp, nếu bạn thích). Là một phần của bản sửa đổi năm 2018, toán tử Spread thực sự là hai toán tử có chung cú pháp dấu chấm lửng (…). Mục đích của hướng dẫn phát triển web này là giúp bạn cảm nhận được những gì các nhà khai thác này cung cấp đồng thời chỉ ra cách phân biệt giữa hai. Như chúng ta sẽ sớm thấy, tất cả chỉ là vấn đề bối cảnh

Đọc. Các khóa học trực tuyến tốt nhất để học HTML

Các tham số còn lại và các hàm biến thiên trong JavaScript

Có thể bạn chưa bao giờ nghe nói về hàm biến thiên trước đây, nhưng rất có thể bạn đã từng gặp qua ít nhất một hàm. Nói một cách đơn giản, một hàm biến đổi là một hàm chấp nhận một số đối số thay đổi. Trong JavaScript (JS) trước ES6, chúng ta thường áp dụng một phương thức mảng, như slice, cho đối tượng đối số cục bộ để chuyển đổi nó thành một mảng thực, sau đó chúng ta có thể xử lý

Bây giờ, chúng ta có thể khai báo một tham số Rest bên trong chữ ký hàm để thực hiện điều tương tự. Ngoài ra, như đã nêu trong MDN Web Docs

“Đối tượng đối số không phải là một mảng thực, trong khi các tham số còn lại là các thể hiện của Mảng, nghĩa là các phương thức như sắp xếp, bản đồ, forEach hoặc pop có thể được áp dụng trực tiếp trên nó. ”

Đây là hai triển khai của hàm sum() – một sử dụng ES5 JS và ES6 khác

// Prior to ES6 function sum(/* var1, var2, var3, var4, var5, etc.. */) { return Array.prototype.reduce.call(arguments, function(a, b) { return a + b; }, 0); } // Using a ES6 Rest Parameter const sum = (...args) => args.reduce((a, b) => a + b, 0);

Kết hợp Tham số còn lại với Đối số được đặt tên trong ES6

Nhìn vào hàm tổng của chúng ta, có thể thấy ngay rằng nó yêu cầu ít nhất hai đối số để cộng lại với nhau. Chúng ta có thể cung cấp cho hàm một vài đối số được đặt tên cho những đối số đó và sau đó xử lý phần còn lại bằng cách sử dụng tham số Rest

const sumWithNamedArguments = (num1, num2, ...additionalArgs) => additionalArgs.reduce((a, b) => a + b, num1 + num2);

Nó được gọi là tham số Rest vì nó luôn được sử dụng cho tất cả các đối số sau bất kỳ đối số nào được đặt tên. Vì thế

• Một định nghĩa hàm chỉ có thể có một tham số Rest
• nó phải LUÔN LUÔN là đối số chức năng cuối cùng

Đặt nó ở bất kỳ nơi nào khác sẽ dẫn đến một lỗi như

Uncaught SyntaxError: Rest parameter must be last formal parameter

Toán tử trải rộng là gì và nó khác với tham số còn lại như thế nào?

Toán tử Trải rộng ES6 chia sẻ cú pháp chính xác giống như tham số Rest, nhưng đạt được kết quả gần như ngược lại. Trong khi tham số Rest thu thập tất cả các đối số hàm còn lại vào một mảng, thì toán tử Spread sẽ mở rộng các lần lặp thành các phần tử riêng lẻ. Trên thực tế, cú pháp Trải rộng hoạt động ở hầu hết mọi nơi ngoại trừ bên trong các định nghĩa hàm, chẳng hạn như trong các ký tự mảng, lệnh gọi hàm và các đối tượng thuộc tính được khởi tạo để trải các giá trị của các đối tượng có thể lặp lại thành các mục riêng biệt

Một số ví dụ về toán tử Spread trong mỗi ứng dụng trên sẽ giúp đưa mọi thứ vào tiêu điểm sắc nét

Ví dụ lan truyền trong JavaScript. Trong một mảng chữ

Áp dụng cú pháp Spread cho một mảng trong một mảng bằng chữ sẽ dẫn đến việc mảng mục tiêu được sao chép nông vào mảng mới dưới dạng các phần tử mảng mới

const toppings = ["pepperoni", "mushrooms", "green peppers", "onions"]; const pizzaOrder = ["medium", "thin crust", "pizza with", ...toppings, "to go"]; // Displays [ "medium", "thin crust", "pizza with", // "pepperoni", "mushrooms" "green peppers", "onions", "to go"] console.log(pizzaOrder);

Nếu chúng ta không sử dụng toán tử Spread, thì mảng pizzaOrder sẽ chứa năm phần tử, với phần tử thứ tư là một mảng khác

Ví dụ lan truyền trong JavaScript. Trong một lời gọi hàm

Nhớ chức năng tổng từ trước đó?

const sum = (...args) => args.reduce((a, b) => a + b, 0); const numbers = [3, 4, 5, 7]; // Displays 20 console.log(sum(...numbers));

Ví dụ lan truyền trong JavaScript. Trên các đối tượng thuộc tính đã khởi tạo

Trong ví dụ mã bên dưới, chúng tôi đang sử dụng Spread bên trong đối tượng pizzaOrder2 để mở rộng các phần tử mảng toppings và pizzaType thành các thuộc tính riêng lẻ giống như cách Array. concat() sẽ

const toppings = ["pepperoni", "mushrooms", "green peppers"]; const pizzaType = ["medium", "thin crust", "pizza"]; const pizzaOrder2 = {...toppings, location: "to go", ...pizzaType }; console.log(pizzaOrder2); console.log(pizzaOrder); { "0": "medium", "1": "thin crust", "2": "pizza", "location": "to go" }

Đọc. Các khóa học trực tuyến hàng đầu để học WordPress

Các ví dụ bổ sung về Toán tử trải rộng trong JavaScript

Toán tử Spread có thể được sử dụng cho nhiều mục đích khác nhau, một số trực quan, một số khác mà bạn có thể không nghĩ tới

Chuyển đổi một chuỗi JavaScript thành các phần tử mảng riêng lẻ

Áp dụng cú pháp Spread cho một chuỗi sẽ chuyển đổi thành một mảng với mỗi ký tự chiếm phần tử riêng của nó

const myName = "Rob Gravelle"; console.log([...myName]); // Displays: [ "R", "o", "b", "", "G", "a", "v", "e", "l", "l", "e" ]

Tạo một bản sao nông của một mảng hoặc đối tượng trong ES6

Một cách dễ dàng để tạo một bản sao nông của một mảng hoặc đối tượng là tạo một cái mới với cú pháp Spread được áp dụng cho bản gốc

let colors = ['Black', 'Red', 'Green']; let newColors = [...colors]; // Displays false console.log (newColors == colors);

Lựa chọn giữa hai lời gọi phương thức trong JS

Cần gọi một phương thức với các đối số khác nhau dựa trên một số điều kiện?

________số 8

Bạn sẽ tìm thấy tất cả các mẫu mã ngày nay trong bản trình diễn codepen

Suy nghĩ cuối cùng về các toán tử trải rộng và nghỉ ngơi ES6 mang tính cách mạng

Hướng dẫn này cung cấp tổng quan về các toán tử Rest và Spread bí ẩn của ES6 và nêu rõ khi nào nên sử dụng cái này so với cái kia. Điều quan trọng là hãy nhớ rằng mỗi người đạt được kết quả gần như ngược lại với người kia. tham số Rest thu thập tất cả các đối số hàm còn lại thành một mảng, trong khi toán tử Spread mở rộng các lần lặp thành các phần tử riêng lẻ

Toán tử trải rộng trong JavaScript là gì?

Tham số còn lại và toán tử trải rộng là gì?

Chức năng lây lan và nghỉ ngơi là gì?

Điều gì thay thế cho toán tử trải rộng?