Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Tham số đặt tên (Named Arguments) trong JavaScript


JavaScript không có named parameters gốc. Kỹ thuật phổ biến: truyền đối tượng và dùng destructuring tại tham số hàm. Giúp code tự mô tả, không lo thứ tự tham số, dễ bỏ qua tham số tùy chọn.

Ví dụ

Hàm add({a, b, c, d}) nhận object:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Named Arguments JS</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .sample, .result { font-size: 18px; font-weight: 500; color: red; }
    .result { color: rebeccapurple; }
  </style>
</head>
<body>
  <h1>Tham số đặt tên (Named Arguments) trong JavaScript</h1>
  <div class="sample"></div>
  <div class="result"></div>
  <button class="Btn">TÍNH TỔNG</button>
  <h3>Nhấn nút để gọi add({a:22, b:44, c:55, d:99})</h3>
  <script>
    const sampleEle = document.querySelector(".sample");
    const resultEle = document.querySelector(".result");
    sampleEle.textContent = '{a:22, b:44, c:55, d:99}';
    function add({ a = 0, b = 0, c = 0, d = 0 }) {
      return a + b + c + d;
    }
    document.querySelector(".Btn").addEventListener("click", () => {
      resultEle.textContent = `Tổng = ${add({ a: 22, b: 44, c: 55, d: 99 })}`;
    });
  </script>
</body>
</html>

Kết quả

Tổng = 220.

Ưu điểm: Thứ tự không quan trọng, dễ đọc, mặc định giá trị dễ dàng, có thể mở rộng thêm thuộc tính mà không phá vỡ code cũ.