Làm cách nào để trả về một đối tượng JavaScript theo nghĩa đen?

Trong bài đăng này, bạn sẽ tìm hiểu một số cách khác nhau để trả về một đối tượng từ hàm mũi tên. Đôi khi bạn chỉ muốn trả về một đối tượng và không sử dụng bất kỳ biến cục bộ nào bên trong hàm

Hãy cùng khám phá một số ví dụ sẽ làm gọn cơ sở mã của bạn và giúp bạn hiểu thêm cách hoạt động của ngôn ngữ JavaScript

Cách phổ biến và tiêu chuẩn nhất để trả về một đối tượng từ hàm mũi tên là sử dụng cú pháp dạng dài

const createMilkshake = (name) => {
  return {
    name,
    price: 499
  };
};

const raspberry = createMilkshake('Raspberry');

// 'Raspberry'
console.log(raspberry.name);

Mẫu này rất tuyệt, vì nó cho phép chúng ta dễ dàng thêm một số biến cục bộ phía trên câu lệnh return, một phương pháp phổ biến đối với chúng ta

Nhưng nếu chúng ta không cần khai báo bất kỳ biến cục bộ nào và chỉ muốn trả về một đối tượng thì sao?

Chúng ta đã nghe nói về tính năng trả về ẩn của một hàm mũi tên - chỉ cần xóa câu lệnh return và dấu ngoặc nhọn {} phải không?

// ❌ Uncaught SyntaxError: Unexpected token ':'
const createMilkshake = (name) => {
  name,
  price: 499
};

Và bam - một lỗi cú pháp. Đây là điều khiến nhiều nhà phát triển vấp ngã

Điều này là do {} mà chúng ta mong đợi là dấu ngoặc đối tượng mở/đóng giờ đây đã trở thành hàm curlies ngay sau khi chúng ta xóa câu lệnh return - trình phân tích cú pháp JavaScript hoạt động như bình thường

Vì vậy, làm thế nào để chúng ta giải quyết nó?

Điều thú vị về JavaScript là khả năng tạo biểu thức bằng cách sử dụng dấu ngoặc đơn (). Bằng cách thực hiện chính xác điều này và bọc các đường cong đối tượng dự định của chúng ta trong ngoặc, chúng ta tạo một biểu thức và do đó trả về một biểu thức

Điều này có nghĩa là về cơ bản các đường cong được di chuyển trở lại “bên trong” hàm và tạo thành các đường cong đối tượng mở/đóng một lần nữa

// 👍 Perfect
const createMilkshake = (name) => ({
  name,
  price: 499
});

Và đó là nó. Một cách viết tắt thực sự hay để trả về các đối tượng từ một hàm mũi tên

Rất may, 'vấn đề' này chỉ áp dụng cho các đối tượng trả lại. Đối với tất cả các loại JavaScript khác, hàm trả về hoạt động hoàn hảo mà không cần thủ thuật này

Sách điện tử miễn phí

Chỉ thị, đơn giản phải không? . Nhìn bề ngoài chúng có vẻ đơn giản, nhưng ngay cả các nhà phát triển Angular lành nghề cũng chưa nắm hết mọi khái niệm trong eBook này

• Đài quan sát và ống không đồng bộ
• Kiểm tra danh tính và hiệu suất
• Cấu phần web syntax
• và Thành phần quan sát được
• Các mẫu kết xuất nâng cao
• Setters và Getters cho Styles và Class Bindings

Tải xuống

Điều đó diễn ra suôn sẻ, hãy kiểm tra email của bạn

Tôi hy vọng bạn thích bài đăng này và nếu bạn muốn tìm hiểu thêm, vui lòng xem các khóa học JavaScript của tôi, nơi bạn sẽ học mọi thứ bạn cần biết để cực kỳ giỏi và thành thạo ngôn ngữ, DOM và nhiều phương pháp nâng cao khác. Hãy thưởng thức và cảm ơn bạn đã đọc

Làm cách nào để trả lại đối tượng trong JavaScript?

JavaScript theo nghĩa đen đối tượng là gì?

Làm cách nào để trả về một đối tượng trong hàm mũi tên JavaScript?

Cú pháp nghĩa đen của đối tượng là gì?