Hướng dẫn how do you return a javascript function? - làm thế nào để bạn trả về một chức năng javascript?

Thử nó

Cú pháp

return;
return true;
return false;
return x;
return x + y / 3;

Biểu thức có giá trị được trả về. Nếu bị bỏ qua,

return;
return true;
return false;
return x;
return x + y / 3;

Sự mô tả

Khi một câu lệnh

return;
return true;
return false;
return x;
return x + y / 3;

return;
return true;
return false;
return x;
return x + y / 3;

return;
return true;
return false;
return x;
return x + y / 3;

function square(x) {
  return x * x;
}
const demo = square(3);
// demo will equal 9

Nếu giá trị bị bỏ qua,

return;
return true;
return false;
return x;
return x + y / 3;

Các câu lệnh trả về sau đều phá vỡ thực thi chức năng:

return;
return true;
return false;
return x;
return x + y / 3;

Chèn dấu chấm phẩy tự động

Tuyên bố

return;
return true;
return false;
return x;
return x + y / 3;

return;
return true;
return false;
return x;
return x + y / 3;

được chuyển đổi bởi ASI thành:

Bảng điều khiển sẽ cảnh báo "mã không thể truy cập sau tuyên bố trả lại".

Lưu ý: Bắt đầu với Firefox 40, một cảnh báo được hiển thị trong bảng điều khiển nếu mã không thể truy cập được tìm thấy sau một câu lệnh

return;
return true;
return false;
return x;
return x + y / 3;

return;
return true;
return false;
return x;
return x + y / 3;

Để tránh vấn đề này (để ngăn chặn ASI), bạn có thể sử dụng dấu ngoặc đơn:

Ví dụ

Làm gián đoạn một hàm

Một chức năng ngay lập tức dừng tại điểm mà

return;
return true;
return false;
return x;
return x + y / 3;

function counter() {
  for (let count = 1; ; count++) {  // infinite loop
    console.log(`${count}A`); // until 5
    if (count === 5) {
      return;
    }
    console.log(`${count}B`);  // until 4
  }
  console.log(`${count}C`);  // never appears
}

counter();

// Logs:
// 1A
// 1B
// 2A
// 2B
// 3A
// 3B
// 4A
// 4B
// 5A

Trả lại một chức năng

Xem thêm bài viết về đóng cửa.

function magic() {
  return function calc(x) { return x * 42; };
}

const answer = magic();
answer(1337); // 56154

Xem thêm

Trả về của một hàm là gì?

Trả về là một giá trị mà một hàm trở về tập lệnh gọi hoặc hàm khi hoàn thành nhiệm vụ của nó. Giá trị trả về có thể là bất kỳ một trong bốn loại biến: xử lý, số nguyên, đối tượng hoặc chuỗi. Loại giá trị mà chức năng của bạn trả về phần lớn phụ thuộc vào nhiệm vụ mà nó thực hiện. 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.

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.

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

Kiến thức máy tính cơ bản, sự hiểu biết cơ bản về HTML và CSS, JavaScript bước đầu tiên, Chức năng - các khối mã có thể tái sử dụng.

1. Để hiểu các giá trị trả về chức năng và cách sử dụng chúng.
2. 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):

Hàm

function counter() {
  for (let count = 1; ; count++) {  // infinite loop
    console.log(`${count}A`); // until 5
    if (count === 5) {
      return;
    }
    console.log(`${count}B`);  // until 4
  }
  console.log(`${count}C`);  // never appears
}

counter();

// Logs:
// 1A
// 1B
// 2A
// 2B
// 3A
// 3B
// 4A
// 4B
// 5A

function counter() {
  for (let count = 1; ; count++) {  // infinite loop
    console.log(`${count}A`); // until 5
    if (count === 5) {
      return;
    }
    console.log(`${count}B`);  // until 4
  }
  console.log(`${count}C`);  // never appears
}

counter();

// Logs:
// 1A
// 1B
// 2A
// 2B
// 3A
// 3B
// 4A
// 4B
// 5A

các nền tảng để tìm ('lạnh').

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 counter() {
  for (let count = 1; ; count++) {  // infinite loop
    console.log(`${count}A`); // until 5
    if (count === 5) {
      return;
    }
    console.log(`${count}B`);  // until 4
  }
  console.log(`${count}C`);  // never appears
}

counter();

// Logs:
// 1A
// 1B
// 2A
// 2B
// 3A
// 3B
// 4A
// 4B
// 5A

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 magic() {
  return function calc(x) { return x * 42; };
}

const answer = magic();
answer(1337); // 56154

function magic() {
  return function calc(x) { return x * 42; };
}

const answer = magic();
answer(1337); // 56154

function magic() {
  return function calc(x) { return x * 42; };
}

const answer = magic();
answer(1337); // 56154

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 magic() {
  return function calc(x) { return x * 42; };
}

const answer = magic();
answer(1337); // 56154

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 magic() {
  return function calc(x) { return x * 42; };
}

const answer = magic();
answer(1337); // 56154

function magic() {
  return function calc(x) { return x * 42; };
}

const answer = magic();
answer(1337); // 56154

function magic() {
  return function calc(x) { return x * 42; };
}

const answer = magic();
answer(1337); // 56154

function magic() {
  return function calc(x) { return x * 42; };
}

const answer = magic();
answer(1337); // 56154

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

   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
   

   0 và một đoạn văn. Ngoài ra còn có một 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
   

   1, 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
   

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

   return;
   return true;
   return false;
   return x;
   return x + y / 3;
   

   0
   Các hàm

   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
   

   3 và

   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
   

   4 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

   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
   

   5 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ó:

   return;
   return true;
   return false;
   return x;
   return x + y / 3;
   

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

   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
   

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

   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
   

   6 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

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

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

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

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

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

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

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

   2 và nếu không, nó sẽ 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();
     }
   }
   

   6. Nếu bài kiểm tra 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();
     }
   }
   

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

   0 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

   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
   

   3,

   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
   

   4 và

   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
   

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