Cách lấy giá trị trả về của hàm trong javascript

Bản tóm tắt. trong hướng dẫn này, bạn sẽ học cách xác định các hàm JavaScript trả về nhiều giá trị

Hàm JavaScript có thể trả về một giá trị. Để trả về nhiều giá trị từ một hàm, bạn có thể đóng gói các giá trị trả về dưới dạng phần tử của mảng hoặc dưới dạng thuộc tính của đối tượng

Trả về nhiều giá trị từ một hàm sử dụng một mảng

Giả sử hàm

const [firstName, lastName] = getNames[];
Code language: JavaScript [javascript]

4 sau truy xuất họ và tên từ cơ sở dữ liệu ở phần phụ trợ hoặc từ kết quả của lệnh gọi API của bên thứ ba và trả về chúng dưới dạng các phần tử của một mảng

function getNames[] {
    // get names from the database or API
    let firstName = 'John',
        lastName = 'Doe';

    // return as an array
    return [firstName, lastName];
}
Code language: JavaScript [javascript]

Phần sau đây trình bày cách lấy giá trị trả về từ hàm

const [firstName, lastName] = getNames[];
Code language: JavaScript [javascript]

4

let names = getNames[];
Code language: JavaScript [javascript]

Vì biến

let names = getNames[];
Code language: JavaScript [javascript]

0 là một mảng nên bạn có thể tham chiếu các phần tử của nó bằng cách sử dụng dấu ngoặc vuông, như thế này

const firstName = names[0],
      lastName  = names[1];
Code language: JavaScript [javascript]

Trong ES6, bạn có thể sử dụng cú pháp gán hàm hủy để giải nén các giá trị từ một mảng một cách trực quan hơn, như thế này

const [firstName, lastName] = getNames[];
Code language: JavaScript [javascript]

Trong mã này, các biến

let names = getNames[];
Code language: JavaScript [javascript]

1 và

let names = getNames[];
Code language: JavaScript [javascript]

2 sẽ nhận phần tử thứ nhất và thứ hai của mảng trả về

Trả về nhiều giá trị từ một hàm bằng cách sử dụng một đối tượng

Nếu bạn muốn gán tên cho từng giá trị được trả về để dễ đọc hơn và dễ bảo trì hơn, bạn có thể sử dụng một đối tượng

function getNames[] {
  // get names from the database or API
  let firstName = 'John',
      lastName = 'Doe';

  // return values
  return {
    'firstName': firstName,
    'lastName': lastName
  };
}
Code language: JavaScript [javascript]

Vì tên của các thuộc tính giống với tên của các biến, nên bạn có thể rút ngắn nó bằng cách sử dụng các phần mở rộng cú pháp theo nghĩa đen của đối tượng trong ES6 như sau

________số 8

Và bạn có thể lấy giá trị trả về dưới dạng một đối tượng như thế này

let names = getNames[];

let firstName = names.firstName,
    lastName  = names.lastName;
Code language: JavaScript [javascript]

Nếu bạn muốn giải nén các thuộc tính từ một đối tượng, bạn có thể sử dụng cú pháp hủy đối tượng như sau

Một trong những nhiệm vụ cơ bản với JavaScript là cách viết và gọi các hàm trong mã của bạn. Đây có vẻ là một việc đơn giản và về cơ bản là như vậy, tuy nhiên, có một số mẹo và thủ thuật bạn có thể sử dụng để giúp việc sử dụng Hàm JavaScript của bạn dễ dàng và trực quan hơn. Bài viết này hướng dẫn bạn những kiến ​​thức cơ bản về cách gọi các hàm trong mã của bạn, cũng như một số mẹo và thủ thuật nâng cao hơn để viết các hàm JavaScript tốt hơn có thể giúp đưa mã JavaScript của bạn lên một tầm cao mới

Cách gọi một hàm trong JavaScript

Gọi một hàm [còn gọi là phương thức] trong JavaScript tương tự như bất kỳ ngôn ngữ lập trình nào khác sử dụng cú pháp giống như C. Chỉ cần gọi hàm theo tên, sau đó chuyển vào bất kỳ tham số bắt buộc nào trong danh sách được phân tách bằng dấu phẩy được đặt trong dấu ngoặc đơn

Để đưa điều này vào một ví dụ tuyệt vời có thể dễ dàng hình dung, hãy lấy hàm

let names = getNames[];
Code language: JavaScript [javascript]

05 sau đây chấp nhận một tham số có tên là

let names = getNames[];
Code language: JavaScript [javascript]

06 của kiểu chuỗi

let names = getNames[];
Code language: JavaScript [javascript]

2

Để gọi hàm này, bạn chỉ cần gọi trực tiếp bằng tên, sau đó truyền vào giá trị tham số

let names = getNames[];
Code language: JavaScript [javascript]

0

Bây giờ, nếu bạn có một hàm cần gọi mà không có bất kỳ tham số nào, bạn có thể gọi nó tương tự. Một hàm không có bất kỳ tham số nào có thể được gọi bằng cách bỏ qua bất kỳ tham số nào và gọi nó theo cách tương tự

let names = getNames[];
Code language: JavaScript [javascript]

4

Nếu hàm chấp nhận nhiều tham số, thì bạn có thể gọi nó tương tự với tất cả các giá trị tham số dưới dạng danh sách được phân cách bằng dấu phẩy

let names = getNames[];
Code language: JavaScript [javascript]

5

Ví dụ trước này chấp nhận ba tham số. Hai tham số đầu tiên là các giá trị chuỗi, trong khi tham số thứ ba chấp nhận một số

Gọi hàm JavaScript có giá trị trả về

Mặc dù các tham số được sử dụng để chuyển một hoặc nhiều giá trị vào hàm JavaScript, nhưng bạn cũng có thể sử dụng giá trị trả về để chuyển một giá trị ra khỏi hàm. Hàm có thể sử dụng câu lệnh

let names = getNames[];
Code language: JavaScript [javascript]

07 để thoát và chuyển một số giá trị trở lại người gọi khi thực hiện xong

Đây là một ví dụ về hàm JavaScript có giá trị trả về

let names = getNames[];
Code language: JavaScript [javascript]

7

Hàm này có thể được gọi bằng cách sử dụng cùng một phương thức như bất kỳ hàm nào khác. Chỉ cần gọi nó theo cùng một cách, bạn sẽ chỉ cần bỏ qua giá trị trả về và tiếp tục

let names = getNames[];
Code language: JavaScript [javascript]

8

Nếu bạn cần nắm bắt giá trị trả về từ hàm, thì bạn có thể gán kết quả đó cho một biến. Khi đó biến sẽ chứa giá trị trả về từ hàm sau khi thực hiện

let names = getNames[];
Code language: JavaScript [javascript]

9

Khi giá trị trả về đã được ghi vào một biến, thì biến đó có thể được sử dụng như bất kỳ biến nào khác. Bạn có thể sử dụng trực tiếp giá trị của nó trong mã này cho một thứ gì đó hoặc thậm chí chuyển nó dưới dạng tham số cho một chức năng khác

Nếu giá trị trả về của hàm sẽ chỉ được sử dụng làm tham số đầu vào của hàm khác, bạn có thể chuyển trực tiếp giá trị trả về cho tham số hàm. Điều này được thực hiện bằng cách đặt lời gọi hàm trong danh sách tham số của lời gọi hàm khác, giống như bạn làm với một biến

Dưới đây là một ví dụ về việc truyền một biến dưới dạng tham số cho lệnh gọi hàm và một ví dụ khác truyền trực tiếp giá trị trả về của một hàm cho các tham số của một hàm khác

let names = getNames[];
Code language: JavaScript [javascript]

0

Truyền hàm dưới dạng tham số

JavaScript là một ngôn ngữ lập trình chức năng. Điều này có nghĩa là các hàm cũng là các biến. Do đó, bạn cũng có thể chuyển các hàm xung quanh dưới dạng tham số cho các hàm khác. Điều này mang lại một số lợi ích linh hoạt tuyệt vời cho việc sử dụng lại mã, đệ quy và các lợi ích lập trình chức năng khác

Đây là một ví dụ về việc truyền một hàm dưới dạng tham số cho một hàm khác dựa trên các ví dụ về hàm

let names = getNames[];
Code language: JavaScript [javascript]

08 ở trên

let names = getNames[];
Code language: JavaScript [javascript]

2

Phương thức đối tượng JavaScript

Hướng đối tượng nhiều hơn một chút [toàn bộ JavaScript OOP sẽ được thảo luận cho một bài viết khác], bạn có thể có một đối tượng JavaScript với các thuộc tính và phương thức riêng của nó. Các phương thức này cũng là các hàm. Cư trú trên đối tượng và khi được gọi trực tiếp có quyền truy cập vào đối tượng bằng từ khóa

let names = getNames[];
Code language: JavaScript [javascript]

09. Từ khóa

let names = getNames[];
Code language: JavaScript [javascript]

09 có thể được sử dụng để tham chiếu đối tượng và các thuộc tính của nó

Đây là một ví dụ về việc xác định một đối tượng JavaScript có một số thuộc tính và phương thức

let names = getNames[];
Code language: JavaScript [javascript]

5

Gọi các hàm JavaScript bằng phương thức

let names = getNames[];
Code language: JavaScript [javascript]

41

Nếu bạn có một đối tượng JavaScript có các thuộc tính và phương thức riêng, bạn cũng có thể gọi các phương thức đó bằng cách sử dụng phương thức

let names = getNames[];
Code language: JavaScript [javascript]

41. Phương thức

let names = getNames[];
Code language: JavaScript [javascript]

41 cho phép bạn gọi một hàm bằng cách chuyển ngữ cảnh cho từ khóa

let names = getNames[];
Code language: JavaScript [javascript]

09 trong hàm và bất kỳ tham số bắt buộc nào. Điều này cho phép bạn xác định phạm vi từ khóa

let names = getNames[];
Code language: JavaScript [javascript]

09 cho phương thức tham chiếu đối tượng

Đây là một ví dụ về việc sử dụng phương thức

let names = getNames[];
Code language: JavaScript [javascript]

41 để gọi phương thức

let names = getNames[];
Code language: JavaScript [javascript]

47 của đối tượng

let names = getNames[];
Code language: JavaScript [javascript]

48 ở trên

let names = getNames[];

  

Code language: JavaScript [javascript]

00

Đây là một ví dụ về việc xác định một chức năng mới không tồn tại như một phương thức của đối tượng, sau đó gọi nó với ngữ cảnh của từ khóa

let names = getNames[];
Code language: JavaScript [javascript]

09 cho đối tượng

let names = getNames[];
Code language: JavaScript [javascript]

01

Phương thức

let names = getNames[];
Code language: JavaScript [javascript]

41 chấp nhận ngữ cảnh

let names = getNames[];
Code language: JavaScript [javascript]

09 để gọi phương thức cùng với bất kỳ tham số nào cần thiết cho hàm đó. Bạn có thể truyền các tham số này cho hàm bằng cách thêm các giá trị tham số này vào danh sách tham số được gửi tới phương thức

let names = getNames[];
Code language: JavaScript [javascript]

41

Đây là một ví dụ khác chấp nhận một giá trị tham số

let names = getNames[];
Code language: JavaScript [javascript]

02

Chức năng như giá trị trả về của chức năng

Điều này thoạt nghe có vẻ khó hiểu. Một hàm JavaScript có thể được truyền dưới dạng giá trị trả về từ một hàm khác. Điều này có thể dẫn đến một số tình huống nâng cao hơn và rất hữu ích khi biết là có thể. Đặc biệt nếu bạn đang sử dụng một thư viện JavaScript hoặc gói NPM có các phương thức/hàm trả về các hàm do đó sẽ được sử dụng sau này

Đây là một ví dụ về định nghĩa hàm trả về một hàm dưới dạng giá trị trả về từ chính hàm đó

let names = getNames[];
Code language: JavaScript [javascript]

03

Bây giờ gọi hàm này sẽ trả về một hàm, không phải bất kỳ loại giá trị nào khác. Ví dụ trước không trả về

let names = getNames[];
Code language: JavaScript [javascript]

53, nhưng một hàm có thể khi được gọi sẽ trả về giá trị đó. Sau đó, bạn có thể gọi hàm này khi cần để tạo giá trị đó;

Bây giờ, hãy gọi hàm được trả về từ hàm khác để nhận kết quả cuối cùng được trả về

let names = getNames[];
Code language: JavaScript [javascript]

04

Sự kết luận

Việc gọi các hàm JavaScript ban đầu rất đơn giản, nhưng bạn có thể thấy có một số kỹ thuật lập trình hàm có thể được sử dụng. Khi bạn hiểu rõ hơn rằng Hàm JavaScript là một đối tượng, tương tự như chuỗi và số, thì bạn có kiến ​​thức để viết mã JavaScript tốt hơn

Rõ ràng những kỹ thuật này sẽ hữu ích nếu bạn đang viết một thư viện JavaScript, khung hoặc gói NPM mới. Tuy nhiên, biết những kỹ thuật này cũng sẽ giúp bạn sử dụng tốt hơn các thư viện, khung và gói NPM khác trong mã của riêng bạn