Cập nhật giá trị của đối tượng javascript

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

Dữ liệu được lưu trữ trong bất kỳ cấu trúc dữ liệu nào cần được cập nhật - Bao gồm các đối tượng. Việc cập nhật một giá trị có thể tương đối dễ dàng, nhưng nếu chúng ta muốn cập nhật tất cả các giá trị của Đối tượng, chúng ta cần một cách tiếp cận toàn diện hơn để bao gồm các giá trị đó. Đó là những gì bài báo dự định giải thích

Trong các đối tượng (trừ khi trống), chúng ta có ít nhất một cặp

{ name: 'david mouse' }

6 và để cập nhật giá trị của thuộc tính (còn được gọi là

{ name: 'david mouse' }

7), chúng ta chỉ cần sử dụng ký hiệu

{ name: 'david mouse' }

8

________số 8

đầu ra

{ name: 'david mouse' }

Đoạn mã trên thêm vào giá trị chuỗi được liên kết với khóa

{ name: 'david mouse' }

9. Tuy nhiên, nếu chúng ta cần cập nhật tất cả giá trị của đối tượng, chúng ta cần một thuật toán hiệu quả và đơn giản. Đó là nơi mà

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

10 và

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

11 trong JavaScript xuất hiện

 

Phương pháp-1. Sử dụng forEach để cập nhật khóa với giá trị mới

Chúng tôi có một đối tượng, và do đó, có một phương tiện để lặp lại nó. Chúng tôi có thể sử dụng quy trình lặp để lấy từng khóa và áp dụng ký hiệu ngoặc để lấy từng giá trị và thao tác với nó theo ý muốn

CŨNG ĐỌC. Hướng dẫn đầy đủ về nút. js Passport [Ví dụ thực tế]

Hãy lấy một dữ liệu đơn giản chứa điểm của năm sinh viên được lưu trữ trong ràng buộc

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

12 và in từng điểm bằng vòng lặp foreach

Quảng cáo

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

5

Giả sử chúng tôi muốn thêm năm điểm nữa cho mỗi điểm vì có lỗi trong bài kiểm tra, chúng tôi có thể cập nhật từng giá trị bằng cách sử dụng cùng một mã chỉ với một chút bổ sung

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

6

đầu ra

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

7

Với những thứ này, chúng tôi đã đạt được mục tiêu cập nhật khóa với giá trị mới, tuy nhiên, chúng tôi có thể tạo mã sáng tác hơn cho việc này bằng cách sử dụng phương pháp

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

13 và

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

10

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

13 trả về tên của vô số thuộc tính chuỗi và phương thức của một đối tượng trong một mảng và phương thức

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

16 thực hiện một hành động cụ thể được truyền dưới dạng đối số cho từng phần tử trong mảng

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)

2

đầu ra

Quảng cáo

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)

3

Tương tự,

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

16 đang hoạt động

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)

5

đầu ra

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)

6

Chúng tôi sẽ sử dụng phương thức

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

13 để lấy một mảng chứa

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

19 của sinh viên trong đối tượng

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

12 và chuyển mảng được trả về phương thức

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

10 sẽ giữ một hàm ẩn danh sẽ cập nhật giá trị với năm điểm thưởng

{ name: 'david mouse' }

0

đầu ra

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

7

Và như vậy, chúng ta có thể cập nhật khóa với giá trị mới trong một kiểu dữ liệu đối tượng

CŨNG ĐỌC. Cách lấy tất cả các tệp trong thư mục trong Node. js [Ví dụ thực tế]

 

Phương pháp-2. Sử dụng bản đồ để cập nhật khóa với giá trị mới

Giống như chúng ta đã tạo một mã tổng hợp bằng cách sử dụng phương pháp

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

52 và phương pháp

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

16, chúng ta có thể làm tương tự với phương pháp

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



Code language: CSS (css)

13 và

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

55

Phương thức

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

55 giống như phương thức

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

16 là một hàm bậc cao hoạt động với mảng bằng cách gọi một hàm trên từng phần tử của mảng và trả về một mảng với kết quả

{ name: 'david mouse' }

2

đầu ra

Quảng cáo

{ name: 'david mouse' }

3

Hàm chứa câu lệnh

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

58 được gọi trên từng phần tử trong mảng

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

59

Bây giờ, hãy áp dụng phương pháp

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

60 trên

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

13 để cập nhật điểm của học sinh

{ name: 'david mouse' }

4

đầu ra

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

7

 

Tóm lược

Để cập nhật khóa với giá trị mới, đặc biệt là trên toàn bộ đối tượng, việc sử dụng mã có thể kết hợp sẽ hiệu quả và dễ dàng hơn. Các phương pháp

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

13,

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

16 và

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

60 giúp đạt được mục tiêu cập nhật khóa. Mối liên kết giữa các phương thức trong đó kết quả của phương thức thứ nhất được chuyển sang phương thức thứ hai là chức năng giúp đạt được kết quả

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

Làm cách nào để sửa đổi đối tượng trong JavaScript?

Làm cách nào để cập nhật giá trị đối tượng lồng nhau trong JavaScript?