Hướng dẫn print return value of function javascript - in giá trị trả về của hàm javascript

Làm cách nào để in giá trị của một hàm trả về?

Để in một giá trị trong Python, bạn gọi hàm in (). Sau khi in một giá trị, bạn không còn có thể sử dụng nó nữa. Trả về được sử dụng để trả về một giá trị từ một hàm và thoát chức năng. Để trả về một giá trị từ một hàm, hãy sử dụng từ khóa trả về. 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.

Làm thế nào để bạn trả về một giá trị từ hàm javascript?

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

JavaScript cung cấp để chuyển một giá trị trở lại mã gọi nó sau khi mọi thứ trong hàm cần chạy đã hoàn thành chạy. JavaScript chuyển một giá trị từ một hàm trở lại mã gọi nó bằng cách sử dụng câu lệnh trả về. Giá trị được trả về được chỉ định trong từ khóa trả về.

1. Làm thế nào để bạn trả về một giá trị từ một hàm?
2. Để trả về một giá trị từ một hàm, bạn phải bao gồm một câu lệnh trả về, theo sau là giá trị sẽ được trả về, trước câu lệnh cuối của hàm. Nếu bạn không bao gồm câu lệnh trả về hoặc nếu bạn không chỉ định giá trị sau khi trả về từ khóa, giá trị được trả về bởi hàm là không thể đoán trước.

Return () trong javascript là gì?

Câu lệnh trả về kết thúc thực thi chức năng và chỉ định một giá trị sẽ được trả về người gọi hàm.

Có một khái niệm thiết yếu cuối cùng về các chức năng để chúng ta thảo luận - các giá trị trả về. Một số chức năng không trả về một giá trị quan trọng, nhưng những chức năng khác thì có. Điều quan trọng là phải hiểu giá trị của chúng là gì, làm thế nào để sử dụng chúng trong mã của bạn và cách tạo các hàm trả về các giá trị hữu ích. Chúng tôi sẽ bao gồm tất cả những thứ này dưới đây.

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.

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):

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();
  }
}

Hàm

[ [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function] ]

[ [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function] ]

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

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

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],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function] ]

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

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

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

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 một trường văn bản ____27 và một đoạn văn. Ngoài ra còn có một yếu tố

   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
   

   8, 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ử

   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
   

   8 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 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();
     }
   }
   

   0 và

   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 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 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();
     }
   }
   

   2 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 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();
     }
   }
   

   3. Nó chạy bất cứ khi nào sự kiệ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();
     }
   }
   

   3 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 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();
     }
   }
   

   5 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 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();
     }
   }
   

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

   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();
     }
   }
   

   7. 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 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();
     }
   }
   

   8 trả về

   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();
     }
   }
   

   9. Hàm

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

   0 kiểm tra xem giá trị

   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();
     }
   }
   

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

   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();
     }
   }
   

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

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

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

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

   3, giá trị

   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();
     }
   }
   

   7 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 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();
     }
   }
   

   0,

   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 và

   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();
     }
   }
   

   2 để 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