Nhiều giá trị trong đối tượng javascript 2024

Xem Nhiều giá trị trong đối tượng javascript 2024

Các đối tượng hoạt động trong JavaScript hơi khác một chút so với các ngôn ngữ lập trình khác. Điều này dẫn đến cả ưu và nhược điểm cho việc sử dụng nó. Chẳng hạn, có nhiều cách để cập nhật giá trị thuộc tính trong một đối tượng JavaScript

ví dụ 1. Cập nhật giá trị thuộc tính riêng lẻ

Bạn có thể cập nhật từng giá trị thuộc tính bằng cách truy cập trực tiếp vào khóa của đối tượng như sau. Ở đây tôi đang cập nhật thuộc tính favoriteColor của đối tượng

const someObject = {
  id: 1,
  name: 'Gautam',
  age: 27,
  nationality: 'Indian',
  favoriteColor: 'Purple',
}

someObject.favoriteColor = 'Blue' 
// OR
// someObject['favoriteColor'] = 'Blue' 

console.log(someObject)
Code language: JavaScript (javascript)

Kết quả của đoạn mã trên sẽ là

{
  id: 1,
  name: 'Gautam',
  age: 27,
  nationality: 'Indian',
  favoriteColor: 'Blue'
}
Code language: CSS (css)

Tương tự, bạn cũng có thể cập nhật các thuộc tính khác

ví dụ 2. Cập nhật nhiều thuộc tính với toán tử trải rộng

Bạn có thể cập nhật nhiều thuộc tính cùng một lúc mà không ảnh hưởng đến các thuộc tính hiện có như sau

let someObject = {
  id: 1,
  name: 'Gautam',
  age: 27,
  nationality: 'Indian',
  favoriteColor: 'Purple',
}

someObject = { ...someObject, id: 2, favoriteColor: 'Red' }

console.log(someObject)
Code language: JavaScript (javascript)

Với đoạn mã trên, id và favoriteColor sẽ được cập nhật. Kết quả của đoạn mã trên sẽ là

{
  id: 2,
  name: 'Gautam',
  age: 27,
  nationality: 'Indian',
  favoriteColor: 'Red'
}



Code language: CSS (css)

Xin lưu ý rằng tôi đã khai báo đối tượng someObject bằng từ khóa let thay vì const, so với Ví dụ 1. Điều này là do ở dòng 9, someObject đang được khởi tạo lại hoàn toàn với các giá trị cũ cũng như các giá trị mới được cập nhật

ví dụ 3. Cập nhật nhiều thuộc tính trên đối tượng cũ bằng một đối tượng mới

Tất nhiên, bạn có thể cập nhật các phần của một đối tượng hiện có bằng cách hợp nhất nó với một đối tượng mới như sau.

let someObject = {
  id: 1,
  name: 'Gautam',
  age: 27,
  nationality: 'Indian',
  favoriteColor: 'Purple',
}

const newObject = {
  id: 2,
  name: 'Gautam',
  nationality: 'Indian',
  favoriteColor: 'Green',
}

someObject = { ...someObject, ...newObject }

console.log(someObject)
Code language: JavaScript (javascript)

Nếu bạn nhận thấy trong đoạn mã trên, thuộc tính age bị thiếu trong đối tượng newObject. Ngoài ra, tôi đã cập nhật favoriteColor thành ‘Green’ trong newObject. Đối tượng kết quả sẽ có sự kết hợp (liên kết) của cả hai đối tượng

Cách dễ nhất để trả về nhiều giá trị trong JavaScript là trả về một mảng gồm nhiều phần tử

function getVals() {
    return [val1, val2]
}

Sau đó, bạn có thể truy cập các giá trị được trả về như thế này

let values = getVals()

let first = values[0]
let second = values[1]

Nếu bạn đang tìm kiếm một câu trả lời nhanh chóng, thì bạn đã có nó. Nhưng để viết mã sạch, cách trên không phải lúc nào cũng là cách tốt nhất để trả về hai giá trị. Thay vào đó, bạn có thể trả về các giá trị “được gắn nhãn” bằng cách trả về một đối tượng

Hướng dẫn này hướng dẫn bạn cách trả về nhiều giá trị trong JavaScript theo một số cách

Trả về nhiều giá trị trong JavaScript

Trong JavaScript, có lẽ bạn đã viết một loạt các hàm trả về một giá trị duy nhất. Ví dụ

function sum(a, b) {
   return a + b
}

Nhưng nếu bạn muốn viết một hàm trả về nhiều giá trị thì sao?

Giải pháp 1. Trả về nhiều giá trị trong một mảng

Một cách ngây thơ nhưng đơn giản để trả về nhiều giá trị là trả về các giá trị trong một mảng

Ví dụ: hãy tạo một hàm trả về tổng và tích của hai số

________số 8

Bây giờ, khi bạn gọi hàm này, bạn cần lưu mảng trả về vào một biến và sau đó truy cập vào hai giá trị

let results = sumMul(2, 5)

let sum = results[0]
let mul = results[1]

console.log(sum, mul)

đầu ra

{
  id: 1,
  name: 'Gautam',
  age: 27,
  nationality: 'Indian',
  favoriteColor: 'Blue'
}
Code language: CSS (css)

0

Ngoài ra, nhờ các bản cập nhật mới nhất trong JavaScript (ECMAScript 6), bạn có thể cấu trúc lại giá trị trả về một cách trực quan hơn

Vì vậy, thay vì lưu trữ giá trị trả về vào một biến và sau đó chọn từng giá trị từ nó, bạn có thể sử dụng tốc ký. Đây là cách

{
  id: 1,
  name: 'Gautam',
  age: 27,
  nationality: 'Indian',
  favoriteColor: 'Blue'
}
Code language: CSS (css)

1

đầu ra

{
  id: 1,
  name: 'Gautam',
  age: 27,
  nationality: 'Indian',
  favoriteColor: 'Blue'
}



Code language: CSS (css)

0

Mã này trông đã dễ hiểu hơn

Nhưng có một cách khác để trả về nhiều giá trị, cách này thậm chí còn trực quan và dễ bảo trì hơn

Giải pháp 2. Trả về nhiều giá trị trong một đối tượng

Thay vì trả về các giá trị trong một mảng, bạn có thể đặt chúng bên trong một đối tượng và gắn nhãn các giá trị. Điều này giúp truy cập dễ dàng và trực quan hơn

Hãy viết lại hàm sumMul trong ví dụ trước để sử dụng chiến lược này

{
  id: 1,
  name: 'Gautam',
  age: 27,
  nationality: 'Indian',
  favoriteColor: 'Blue'
}
Code language: CSS (css)

3

Nếu bây giờ bạn gọi hàm này, có một cách trực quan hơn để truy cập các giá trị được trả về

{
  id: 1,
  name: 'Gautam',
  age: 27,
  nationality: 'Indian',
  favoriteColor: 'Blue'
}
Code language: CSS (css)

4

đầu ra

{
  id: 1,
  name: 'Gautam',
  age: 27,
  nationality: 'Indian',
  favoriteColor: 'Blue'
}
Code language: CSS (css)

0

Như bạn có thể thấy, bây giờ bạn có thể tham chiếu các giá trị trả về theo tên của chúng. Điều này làm cho mã dễ đọc hơn và ít bị lỗi hơn. Giờ đây, việc vô tình nhầm lẫn các giá trị trở nên khó khăn hơn vì chúng được dán nhãn rõ ràng

Làm cách nào để thêm nhiều giá trị vào đối tượng trong JavaScript?

Một đối tượng có thể có nhiều giá trị không?

Khóa đối tượng có thể có nhiều giá trị JavaScript không?

Làm cách nào để kiểm tra nhiều giá trị trong đối tượng JavaScript?

Bạn đang tìm hiểu bài viết:  Nhiều giá trị trong đối tượng javascript 2024

HỆ THỐNG CỬA HÀNG TRÙM SỈ QUẢNG CHÂU

Điện thoại: 092.484.9483

Zalo: 092.484.9483

Facebook: https://facebook.com/giatlathuhuongcom/

Website: Trumsiquangchau.com

Địa chỉ: Ngõ 346 Nam Dư, Trần Phú, Hoàng Mai, Hà Nội.