Cách trả về bảng trong javascript

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

Các giá trị trả về đúng như tên gọi của chúng — các giá trị mà một hàm trả về khi hoàn thành. Bạn đã gặp các giá trị trả về nhiều lần, mặc dù bạn có thể chưa 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)

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. chuỗi con cần tìm ('cold')
2. chuỗi để thay thế nó bằng ('warm')

Khi hàm hoàn thành (chạy xong), nó trả về một giá trị, là một chuỗi mới với sự thay thế được thực hiện. Trong đoạn 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 xem trang tham chiếu MDN của 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ố hàm không trả về bất kỳ giá trị nào. (Trong những trường hợp này, các trang tham khảo của chúng tôi liệt kê giá trị trả về là

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

Nói chung, giá trị trả về được sử dụng khi hàm là bước trung gian trong phép tính thuộc loại nào đó. Bạn muốn đạt được kết quả cuối cùng, bao gồm một số giá trị cần được tính toán bởi 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;

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ừ 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òng kết nối ngẫu nhiên của chúng tôi. ví dụ html. 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 lệnh gọi được thực hiện cho 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();
  }
}

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

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

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

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

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

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

Vì vậy, khi bạn thực hiện như sau

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 ba lệnh gọi

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

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

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 lệnh gọi hàm, trước khi chính dòng đó được thực thi

học tích cực. hàm giá trị trả về của riêng chúng ta

Hãy bắt đầu viết các hàm của riêng chúng ta có các giá trị trả về

1. Trước hết, tạo một bản sao cục bộ của thư viện chức năng. tệp html từ GitHub. Đây là một trang HTML đơn giản chứa trường 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();
     }
   }
   

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

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

   16, 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 văn bên dưới
2. Hãy thêm một số hàm hữu ích vào phần tử

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

   16 này. Bên dưới hai dòng JavaScript hiện có, hãy thêm các định nghĩa hàm sau

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

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

   19 khá rõ ràng — chúng trả về bình phương hoặc lập phương của số được cung cấp 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();
     }
   }
   

   20 trả về giai thừa của một 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ố đã nhập vào kiểu nhập văn bản. Nhập trình xử lý sự kiện sau bên dưới các chức năng hiện 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();
     }
   }
   

   7
   Ở đây chúng tôi đang thêm một người nghe và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();
     }
   }
   

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

   21 kích hoạt đầ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();
     }
   }
   

   23 và được gửi (e. g. , nhập một giá trị, sau đó bỏ tiêu điểm đầu vào bằng cách nhấn Tab hoặc Return). Khi chức năng ẩ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();
     }
   }
   

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

   25. 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à số, thông báo lỗi sẽ được in ra đoạn văn. Kiểm tra xem 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();
     }
   }
   

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

   27 hay không. 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();
     }
   }
   

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

   25 không phải là số hay không — nếu có, 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();
     }
   }
   

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

   41. Nếu 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();
     }
   }
   

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

   25 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ị bình phương, 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();
     }
   }
   

   18,

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

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

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

Ghi chú. Nếu bạn gặp sự cố khi làm cho ví dụ hoạt động, vui lòng kiểm tra mã của bạn với phiên bản đã hoàn thành trên GitHub (cũng có thể xem mã đang chạy trực tiếp) hoặc yêu cầu chúng tôi trợ giúp

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 viết ra một số 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ề căn bậc hai hoặc khối lập phương của số?

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

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

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

Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . Chức năng

Sự kết luận

Vì vậy, chúng ta có nó — các hàm 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ó gì chưa hiểu vui lòng đọc lại bài viết hoặc liên hệ với chúng tôi để được trợ giúp

Làm cách nào để hiển thị bảng trong JavaScript?

Làm cách nào để có được một hàng trong bảng trong JavaScript?