Làm cách nào để thêm và xóa đối tượng trong JavaScript?

Các đối tượng trong JavaScript có vẻ khá đơn giản. Chúng có tên, chúng sử dụng nhiều dấu ngoặc nhọn kỳ lạ và chúng chứa dữ liệu ở dạng cặp thuộc tính/giá trị

let superHero = {
  firstName: "Tony",
  lastName: "Stark",
  misc: {
    color: "Red",
    name: "Iron Man",
    affiliate: "Stark Industries"
  }
};

Như chúng ta đã thấy trong các hướng dẫn khác, các đối tượng JavaScript thân thiện của chúng ta có nhiều thứ hơn là bắt mắt. Trong hướng dẫn này, chúng ta sẽ xem xét một thứ có vẻ khá đơn giản - thêm và xóa các thuộc tính khỏi các đối tượng. Chúng ta sẽ thấy điều này đơn giản như thế nào (hoặc không) trong giây lát

trở đi

Thêm thuộc tính

Sau khi bạn có một đối tượng, bạn có thể thực hiện một số đường dẫn để thêm các thuộc tính bổ sung vào đó. Con đường chúng ta sẽ thực hiện là một con đường đơn giản và hiệu quả, sử dụng ký hiệu dấu ngoặc giống như mảng với tên thuộc tính mới của bạn đóng vai trò là chỉ mục

Giả sử chúng ta có một đối tượng được gọi là colors trông như sau

let colors = {
  header: "blue",
  footer: "gray",
  content: {
    title: "black",
    body: "darkgray",
    signature: "light blue"
  }
}

Chúng tôi muốn thêm một thuộc tính mới gọi là logo và đặt cho nó một giá trị trong suốt. Cách chúng ta thêm thuộc tính này như sau

colors["logo"] = "transparent";

Thats tất cả để có nó. Khi bạn đã thêm thuộc tính này, bạn có thể truy cập thuộc tính này bằng một trong hai cách tiếp cận

// Approach 1
let logoColor = colors["logo"];

// Approach 2
let logoColor = colors.logo;

Không quan trọng bạn chọn cách tiếp cận nào. Sử dụng bất cứ thứ gì khiến bạn (hoặc nhóm của bạn) hài lòng. Tôi có xu hướng ủng hộ cách tiếp cận thứ hai với ký hiệu dấu chấm, vì nó phù hợp với cách chúng ta thường truy cập giá trị của một thuộc tính. Ngoại lệ là khi bạn có thể cần tạo động tên thuộc tính

let numbers = [0, 1, 2, 3, 4];

for (let i = 0; i < numbers.length; i++) {
  let objValue = myObject["data" + numbers[i]];
  console.log(objValue);
}

Trong những trường hợp đó, cách tiếp cận đầu tiên là cách có ý nghĩa nhất. Không có bất kỳ cách nào được đề xuất (vui lòng không sử dụng eval), bạn có thể sử dụng phương pháp thứ hai với tên thuộc tính cần được tạo nhanh chóng

Trước khi chúng ta kết thúc phần này, chỉ còn một chi tiết nữa về cách thêm thuộc tính mà chúng ta sẽ xem xét. Nếu bạn muốn thêm một thuộc tính vào một đối tượng khác nằm trong đối tượng của bạn (còn gọi là đối tượng lồng nhau), bạn kết hợp mọi thứ chúng tôi đã thấy ở đây để thực hiện việc này. Ví dụ: giả sử chúng ta muốn thêm một thuộc tính có tên là khung vào đối tượng được lưu trữ bởi thuộc tính nội dung trong đối tượng màu sắc của chúng ta

let colors = {
  header: "blue",
  footer: "gray",
  content: {
    title: "black",
    body: "darkgray",
    signature: "light blue"
  }
}

Cách chúng ta có thể làm điều đó là như sau

colors.content["frame"] = "yellow";

Nếu bạn muốn sử dụng ký hiệu ngoặc để truy cập thuộc tính nội dung, bạn có thể thực hiện việc này thay thế

colors["content"]["frame"] = "yellow";

Trước khi chúng ta kết thúc phần này, tôi đã đề cập ngay từ đầu rằng bạn có một số đường dẫn mà bạn có thể thực hiện để thêm các thuộc tính vào một đối tượng. Chúng tôi đã xem xét một con đường như vậy. Một con đường phức tạp hơn mà bạn có thể thực hiện có thể liên quan đến Đối tượng. định nghĩaProperty và đối tượng. phương pháp định nghĩaProperties. Các phương thức này cho phép bạn đặt một thuộc tính và giá trị của nó, nhưng chúng cho phép bạn làm nhiều việc hơn như xác định getters/setters, chỉ định liệu một thuộc tính có thể được liệt kê hay không, chỉ định liệu một thuộc tính có thể được tùy chỉnh hay không, v.v. Nó chắc chắn là quá mức cần thiết cho những gì bạn sẽ muốn làm trong 99% thời gian, nhưng hãy biết điều này. nếu quá mức cần thiết là những gì bạn muốn, thì hai phương pháp này sẽ mang lại. Tài liệu MDN thực hiện tốt công việc cung cấp các ví dụ về cách bạn có thể sử dụng chúng để thêm một hoặc nhiều thuộc tính vào một đối tượng

Xóa thuộc tính

Nếu bạn nghĩ rằng việc thêm các thuộc tính vào một đối tượng là thú vị, thì việc xóa các thuộc tính khỏi một đối tượng sẽ hơi nhàm chán. Nó cũng đơn giản hơn. Hãy tiếp tục làm việc với đối tượng colors của chúng ta

let colors = {
  header: "blue",
  footer: "gray",
  content: {
    title: "black",
    body: "darkgray",
    signature: "light blue"
  }
}

Điều chúng tôi muốn làm là xóa thuộc tính footer. Chúng tôi có hai cách để thực hiện việc này tùy thuộc vào việc chúng tôi muốn truy cập thuộc tính chân trang bằng ký hiệu dấu ngoặc hay chúng tôi muốn truy cập thuộc tính đó bằng ký hiệu dấu chấm

delete colors.footer;

// or

delete colors["footer"];

Chìa khóa để thực hiện tất cả công việc này là từ khóa xóa. Chỉ cần sử dụng từ khóa xóa và theo dõi nó với thuộc tính bạn muốn xóa. Thats tất cả để có nó

Bây giờ, đây sẽ không phải là JavaScript nếu tôi không đề cập đến một lời cảnh báo. Cái này liên quan đến hiệu suất. Nếu bạn thường xuyên xóa nhiều thuộc tính trên một số lượng lớn đối tượng, thì việc xóa sẽ chậm hơn nhiều so với việc chỉ đặt giá trị của thuộc tính thành giá trị như không xác định

let colors = {
  header: "blue",
  footer: "gray",
  content: {
    title: "black",
    body: "darkgray",
    signature: "light blue"
  }
}

Mặt trái là việc đặt thuộc tính thành không xác định có nghĩa là thuộc tính vẫn tồn tại trong bộ nhớ. Bạn sẽ cần tính toán sự đánh đổi (tốc độ so với. bộ nhớ) trong tình huống của bạn và tối ưu hóa cho tình huống có ý nghĩa nhất đối với bạn

Phần kết luận

Dù sao, thực sự còn rất nhiều điều chúng ta có thể nói ở đây. Ví dụ: ES6 giới thiệu một số cách mới điên rồ để xử lý các thuộc tính bên trong một đối tượng và một số trong số chúng cũng thay đổi cách chúng ta có thể thêm và xóa các thuộc tính. Giống như bất kỳ câu chuyện hay nào, mẹo là biết khi nào nên dừng lại. Rõ ràng, tôi còn nhiều điều phải học

Làm cách nào để thêm và xóa các đối tượng trong js?

Làm cách nào để thêm bớt dữ liệu trong JavaScript?

Làm cách nào để xóa một đối tượng trong JavaScript?

Làm cách nào để thêm thuộc tính vào đối tượng trong JavaScript?