Toán tử còn lại (…) cho phép chúng ta gọi một hàm với bất kỳ số lượng đối số nào và sau đó truy cập các đối số dư thừa đó dưới dạng một mảng. Toán tử còn lại cũng cho phép chúng tôi cấu trúc lại mảng hoặc đối tượng.
Toán tử spread (…) cho phép chúng tôi mở rộng một mảng có thể lặp lại như mảng thành các phần tử riêng lẻ của nó.
Ví dụ
Sau đây là đoạn mã hiển thị phần còn lại và toán tử trải rộng trong JavaScript -
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample, .result {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript Rest and spread operator</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div&g;
<button class="btn">Spread Operator</button>
<h3>
Click on the above button to concatenate array using spread operator
</h3>
<button class="btn">Rest Operator</button>
<div style="color: green;" class="result"></div>
<h3>
Click on the above button to add some numbers using rest operator
</h3>
<script>
let sampleEle = document.querySelector(".sample");
let btnEle = document.querySelectorAll(".btn");
let resEle = document.querySelectorAll(".result");
let arr = [2, 3, 4, 5];
let arr1 = ["a", "b", "c", "d"];
sampleEle.innerHTML = "arr = " + arr + "<br> arr1 = " + arr1;
function addArr(num, ...ar) {
let sum = num;
ar.forEach((item) => {
sum += item;
});
resEle[1].innerHTML = "Sum of the elements = " + sum;
}
btnEle[0].addEventListener("click", () => {
resEle[0].innerHTML = "Concatenated array = " + [...arr, ...arr1];
});
btnEle[1].addEventListener("click", () => {
addArr(44, 11, 35, 44, 22, 99);
});
</script>
</body>
</html> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
Khi nhấp vào nút “Nhà điều hành Spread” -
Khi nhấp vào nút “Rest Operator” -
