Hướng dẫn can a function return a string javascript? - một hàm có thể trả về một chuỗi javascript không?

Giá trị trả về là gì?

Giá trị trả về chỉ là những gì chúng nghe - các giá trị mà một hàm trả về khi hoàn thành. Bạn đã đáp ứng các giá trị trả về nhiều lần, mặc dù bạn có thể không nghĩ về chúng một cách rõ ràng. are just what they sound like — the values that a function returns when it completes. You've already met return values several times, although you may not have thought about them explicitly.

Hãy trở lại một ví dụ quen thuộc (từ một bài viết trước trong loạt bài này):

const myText = "The weather is cold";
const newString = myText.replace("cold", "warm");
console.log(newString); // Should print "The weather is warm"
// the replace() string function takes a string,
// replaces one substring with another, and returns
// a new string with the replacement made

Hàm

function draw() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = "rgba(255,0,0,0.5)";
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

function draw() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = "rgba(255,0,0,0.5)";
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

1. các nền tảng để tìm ('lạnh').
2. Chuỗi để thay thế nó bằng ('ấm').

Khi chức năng hoàn thành (kết thúc chạy), nó sẽ trả về một giá trị, đây là một chuỗi mới với sự thay thế được thực hiện. Trong mã trên, kết quả của giá trị trả về này được lưu trong biến

function draw() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = "rgba(255,0,0,0.5)";
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

Nếu bạn nhìn vào trang tham chiếu MDN hàm

function draw() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = "rgba(255,0,0,0.5)";
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

Một số chức năng không trả về bất kỳ giá trị nào. . Nó chỉ làm cho một hộp xuất hiện ở đâu đó trên màn hình - đó là nó!

Nói chung, một giá trị trả về được sử dụng trong đó hàm là một bước trung gian trong một tính toán của một số loại. Bạn muốn đạt được kết quả cuối cùng, liên quan đến một số giá trị cần được tính bằng một hàm. Sau khi hàm tính toán giá trị, nó có thể trả về kết quả để nó có thể được lưu trữ trong một biến; và bạn có thể sử dụng biến này trong giai đoạn tiếp theo của tính toán.

Sử dụng các giá trị trả về trong các chức năng của riêng bạn

Để trả về giá trị từ một hàm tùy chỉnh, bạn cần sử dụng từ khóa trả về. Chúng tôi đã thấy điều này trong hành động gần đây trong ví dụ ngẫu nhiên của chúng tôi. Hàm

function draw() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = "rgba(255,0,0,0.5)";
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

function draw() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = "rgba(255,0,0,0.5)";
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

function draw() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = "rgba(255,0,0,0.5)";
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

Bên trong mỗi lần lặp vòng lặp, ba cuộc gọi được thực hiện cho hàm

function random(number) {
  return Math.floor(Math.random() * number);
}

function random(number) {
  return Math.floor(Math.random() * number);
}

function random(number) {
  return Math.floor(Math.random() * number);
}

function random(number) {
  return Math.floor(Math.random() * number);
}

Điều này có thể được viết như sau:

function random(number) {
  const result = Math.floor(Math.random() * number);
  return result;
}

Nhưng phiên bản đầu tiên nhanh hơn để viết, và nhỏ gọn hơn.

Chúng tôi đang trả về kết quả của phép tính

function random(number) {
  return Math.floor(Math.random() * number);
}

Vì vậy, khi bạn thực hiện những điều sau:

ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);

Nếu ba cuộc gọi

function random(number) {
  return Math.floor(Math.random() * number);
}

function random(number) {
  return Math.floor(Math.random() * number);
}

function random(number) {
  return Math.floor(Math.random() * number);
}

function random(number) {
  return Math.floor(Math.random() * number);
}

ctx.arc(500, 200, 35, 0, 2 * Math.PI);

Các lệnh gọi hàm trên dòng được chạy trước và các giá trị trả về của chúng được thay thế cho các cuộc gọi hàm, trước khi dòng sau đó được thực thi.

Học tập tích cực: Chức năng giá trị trả lại của chúng ta

Hãy cùng đi viết các chức năng của riêng chúng tôi có các giá trị trả về.

1. Trước hết, tạo một bản sao cục bộ của tệp chức năng-Library.html từ GitHub. Đây là một trang HTML đơn giản chứa trường văn bản

   function random(number) {
     return Math.floor(Math.random() * number);
   }
   

   8 và một đoạn văn. Ngoài ra còn có một phần tử

   function random(number) {
     return Math.floor(Math.random() * number);
   }
   

   9, trong đó chúng tôi đã lưu trữ một tham chiếu đến cả hai phần tử HTML trong hai biến. Trang nhỏ này sẽ cho phép bạn nhập một số vào hộp văn bản và hiển thị các số khác nhau liên quan đến nó trong đoạn bên dưới.
2. Hãy thêm một số chức năng hữu ích vào phần tử

   function random(number) {
     return Math.floor(Math.random() * number);
   }
   

   9 này. Bên dưới hai dòng JavaScript hiện có, thêm các định nghĩa chức năng sau:

   function squared(num) {
     return num * num;
   }
   
   function cubed(num) {
     return num * num * num;
   }
   
   function factorial(num) {
     if (num < 0) return undefined;
     if (num === 0) return 1;
     let x = num - 1;
     while (x > 1) {
       num *= x;
       x--;
     }
     return num;
   }
   

   Các hàm

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   1 và

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   2 khá rõ ràng - chúng trả lại hình vuông hoặc khối lập phương của số được đưa ra dưới dạng tham số. Hàm

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   3 trả về giai thừa của số đã cho.
3. Tiếp theo, chúng tôi sẽ bao gồm một cách để in ra thông tin về số được nhập vào đầu vào văn bản. Nhập trình xử lý sự kiện sau đây bên dưới các chức năng hiện có:

   input.addEventListener("change", () => {
     const num = parseFloat(input.value);
     if (isNaN(num)) {
       para.textContent = "You need to enter a number!";
     } else {
       para.textContent = `${num} squared is ${squared(num)}. `;
       para.textContent += `${num} cubed is ${cubed(num)}. `;
       para.textContent += `${num} factorial is ${factorial(num)}. `;
     }
   });
   

   Ở đây chúng tôi đang thêm một người nghe sự kiện

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   4. Nó chạy bất cứ khi nào sự kiện

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   4 bắn vào đầu vào văn bản-nghĩa là, khi một giá trị mới được nhập vào văn bản

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   6 và đã gửi (ví dụ: nhập một giá trị, sau đó không tập trung vào đầu vào bằng cách nhấn Tab hoặc trả về). Khi hàm ẩn danh này chạy, giá trị trong

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   6 được lưu trữ trong hằng số

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   8. Tiếp theo, chúng tôi làm một bài kiểm tra có điều kiện. Nếu giá trị đã nhập không phải là một số, một thông báo lỗi được in vào đoạn văn. Bài kiểm tra xem xét liệu biểu thức

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   9 trả về

   ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
   

   0. Hàm

   ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
   

   1 kiểm tra xem giá trị

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   8 không phải là số - nếu vậy, nó trả về

   ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
   

   0 và nếu không, nó sẽ trả về

   ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
   

   4. Nếu bài kiểm tra trả về

   ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
   

   4, giá trị

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   8 là một số. Do đó, một câu được in ra bên trong phần tử đoạn văn nêu các giá trị hình vuông, khối lập phương và giai thừa của số. Câu gọi các hàm

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   1,

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   2 và

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   3 để tính toán các giá trị cần thiết.
4. Lưu mã của bạn, tải nó trong trình duyệt và dùng thử.

Bây giờ đến lượt của bạn!

Tại thời điểm này, chúng tôi muốn bạn có thể viết ra một vài chức năng của riêng bạn và thêm chúng vào thư viện. Làm thế nào về rễ hình vuông hoặc khối lập phương của số? Hoặc chu vi của một vòng tròn có bán kính nhất định?

Một số mẹo liên quan đến chức năng bổ sung:

• Nhìn vào một ví dụ khác về việc viết lỗi xử lý thành các chức năng. Nói chung, bạn nên kiểm tra xem bất kỳ tham số cần thiết nào cũng được xác thực và bất kỳ tham số tùy chọn nào cũng có một số loại giá trị mặc định được cung cấp. Bằng cách này, chương trình của bạn sẽ ít có khả năng ném lỗi.
• Hãy suy nghĩ về ý tưởng tạo một thư viện chức năng. Khi bạn đi sâu hơn vào sự nghiệp lập trình của mình, bạn sẽ bắt đầu làm những điều tương tự nhiều lần. Đó là một ý tưởng tốt để tạo ra thư viện các chức năng tiện ích của riêng bạn để thực hiện những điều này. Bạn có thể sao chép chúng vào mã mới hoặc thậm chí chỉ áp dụng chúng vào các trang HTML bất cứ nơi nào bạn cần.

Kiểm tra kỹ năng của bạn!

Bạn đã đạt đến cuối bài viết này, nhưng bạn có thể nhớ thông tin quan trọng nhất không? Bạn có thể tìm thấy một số bài kiểm tra tiếp theo để xác minh rằng bạn đã giữ lại thông tin này trước khi bạn tiếp tục - xem Kiểm tra các kỹ năng của bạn: các chức năng.

Sự kết luận

Vì vậy, chúng tôi có nó - các chức năng rất thú vị, rất hữu ích và mặc dù có rất nhiều điều để nói về cú pháp và chức năng của chúng, nhưng chúng khá dễ hiểu.

Nếu có bất cứ điều gì bạn không hiểu, vui lòng đọc lại bài viết hoặc liên hệ với chúng tôi để yêu cầu giúp đỡ.

Xem thêm

• Chức năng chuyên sâu-Một hướng dẫn chi tiết bao gồm thông tin liên quan đến các chức năng nâng cao hơn.
• Các chức năng gọi lại trong JavaScript - Một mẫu JavaScript phổ biến là chuyển một hàm vào một hàm khác như một đối số. Sau đó nó được gọi bên trong hàm đầu tiên. Điều này là một chút ngoài phạm vi của khóa học này, nhưng đáng để học trước khi quá lâu.

• Trước
• Tổng quan: Khối xây dựng
• Tiếp theo

Trong mô -đun này