Bạn đang xem : javascript thêm thuộc tính vào đối tượng hiện có

Để chứng minh thêm thuộc tính mới vào đối tượng JavaScript, chúng ta sẽ xem xét ví dụ sau về đối tượng nhân viên:

  var worker = {name: "Jone Doe", age: 35}  

< p class = "ezoic-adpicker-ad" id = "ezoic-pub-ad-placeholder-613">

Có nhiều trường hợp cần xem xét, như sau:

  1. Tên thuộc tính tĩnh : Thêm thuộc tính “id” vào đối tượng nhân viên.
  2. Tên thuộc tính động : Bao gồm thuộc tính dựa trên giá trị của Biến “customProp”.
  3. Thêm thuộc tính từ một đối tượng khác : Thêm lo thuộc tính cation từ đối tượng người sang đối tượng nhân viên.

1. Cú pháp “object.property_name”

Kí hiệu dấu chấm là cách đơn giản nhất để truy cập / sửa đổi các thuộc tính của một đối tượng JavaScript. Một thuộc tính mới có thể được khởi tạo theo cú pháp sau:

  object.new_property = new_value   

Trong ví dụ dưới đây, chúng tôi đang tạo thuộc tính " id "với giá trị 130 cho đối tượng nhân viên.

  // Thêm thuộc tính mới
nhân viên.id = 130

// cập nhật thuộc tính hiện có
nhân viên.age = 29

// Kết quả: {id: 130, name: "Jone Doe", age: 29}  

Ngoài ra, việc thêm thuộc tính cho các đối tượng lồng nhau tuân theo cú pháp tương tự:

  object.parent_prop.property = new_value  

Dưới đây, thuộc tính “ country ”được thêm vào một đối tượng lồng nhau là giá trị của thuộc tính mẹ “location” trong đối tượng worker.

  worker.location = {}

nhân viên.location.country = "Hoa Kỳ"

// Kết quả: {name: "Jone Doe", age: 35, location: {country: "USA"}}  

Cách tiếp cận này lý tưởng nhất cho các trường hợp sau:

  1. Tên thuộc tính là giá trị tĩnh và cần được khởi chạy theo cách thủ công.
  2. Tên thuộc tính không bao gồm các ký tự đặc biệt như thêm khoảng trắng, v.v.

2. Truy cập thuộc tính mặc dù “object [‘ property_name ’]”

Cú pháp dựa trên dấu ngoặc vuông là một cách tiếp cận thay thế với các khả năng tương tự và tránh được hầu hết các nhược điểm của toán tử dấu chấm. Cú pháp để thêm thuộc tính mới bằng dấu ngoặc vuông như sau:

  object ["property_name"] = property_value;  

Cú pháp dấu ngoặc vuông mang lại những ưu điểm sau so với toán tử dấu chấm truyền thống:

  1. Khi tên thuộc tính dựa trên một biến động . Ví dụ: tên thuộc tính được truy xuất từ ​​lệnh gọi API, đầu vào của người dùng, v.v.
  2. Giá trị của chuỗi tên thuộc tính chứa các ký tự đặc biệt như dấu cách thêm, v.v.
  3. < / ol>

    Trong ví dụ dưới đây, không thể thêm trực tiếp thuộc tính “Họ” bằng cú pháp toán tử dấu chấm do sự hiện diện của các ký tự khoảng trắng . Do đó, chúng tôi có thể hoàn thành việc tạo thuộc tính “Họ” bằng cú pháp dấu ngoặc vuông.

      var custom_prop = "Họ"
    
    nhân viên [custom_prop] = "Doe"
    
    // Kết quả: {name: "Jone Doe", age: 35, Last name: "doe"}  

    Các đối tượng lồng nhau được truy cập bằng cách sử dụng chuỗi nhiều cú pháp dấu ngoặc vuông hoặc cách khác, tổ hợp toán tử dấu chấm và dấu ngoặc vuông cũng có thể được sử dụng.

      nhân viên [" location "] = {}
    
    // Truy cập các đối tượng lồng nhau có dấu ngoặc vuông
    nhân viên ["location"] ["zip code"] = 1234
    
    // Kết hợp toán tử Dấu chấm với dấu ngoặc vuông
    nhân viên.location ["mã vùng"] = 1324
    
    // Kết quả: {name: "Jone Doe", age: 35, location: {zip code: 1324}}  

    3. Tạo thuộc tính mới bằng Object.defineProperty ()

    Lớp JavaScript Object cũng cung cấp phương thức “ defineProperty () ” riêng để xác định các thuộc tính mới cho một đối tượng. Ngoài việc chỉ định giá trị của thuộc tính mới, “ defineProperty () ” còn cho phép định cấu hình hành vi cho thuộc tính .

    Cú pháp chung cho “defineProperty ()” như sau:

    < pre class = "wp-block-lăng trụ-blocks"> Object.defineProperty (obj, property, configuration)

    Trong ví dụ dưới đây, chúng tôi xác định thuộc tính “id” cho đối tượng nhân viên với giá trị là 130 và có thể ghi là false . Do đó, những thay đổi tiếp theo trong giá trị của thuộc tính id sẽ bị loại bỏ. Đọc thêm về Object.defineProperty từ developer.mozilla.org/Object/defineProperty .

      Object.defineProperty (nhân viên, 'id ', {
      giá trị: 130,
      có thể ghi: false
    });
    
    // Loại bỏ các thay đổi trong giá trị thuộc tính
    nhân viên.id = 412;
    
    // Kết quả: {id: 130, name: "Jone Doe", age: 29}  

    4. Cú pháp của toán tử spread “{… object, property_name: property_value}

    Toán tử spread cho phép tạo bản sao mềm của một đối tượng với các thuộc tính hiện có. Toán tử Spread theo sau là định nghĩa thuộc tính nội tuyến cho phép thêm các thuộc tính mới. Hơn nữa, các thuộc tính của một đối tượng khác có thể được thêm vào bằng cách sử dụng toán tử spread nhiều lần.

      // Thêm thuộc tính1 & amp; property2 để phản đối
    object = {... object, property1: value1, property2: value2}
    
    // Thêm tất cả các thuộc tính từ new_object
    object = {... object, ... new_object}  

    Trong ví dụ dưới đây, chúng tôi tạo một bản sao của đối tượng nhân viên kết hợp với các thuộc tính vị trí và id. Dòng tiếp theo, đối tượng “id” được thêm vào đối tượng nhân viên bằng toán tử spread .

      // thêm thuộc tính vào đối tượng mới
    var worker_copy = {... nhân viên, vị trí: {}, id: 130}
    
    // Kết quả: {id: 130, name: "Jone Doe", age: 29, location: {}}
    
    // đối tượng thoát được cập nhật với thuộc tính mới
    nhân viên = {... nhân viên, id: 130}
    
    // Kết quả: {id: 130, name: "Jone Doe", age: 29}  

    5. Gán thuộc tính bằng Object.assign ()

    Phương thức “Object.assign ()” cho phép các thuộc tính của đối tượng nguồn được thêm vào đối tượng đích . Bằng cách xác định tất cả các thuộc tính mới cần được thêm vào đối tượng nguồn, chúng tôi đạt được việc bổ sung các thuộc tính cho đối tượng đích.

      Object.assign (target, source);  

    Trong ví dụ dưới đây, chúng tôi thêm thuộc tính“ id ”với giá trị 670 vào đối tượng nhân viên bằng Object.assign. < / p>

      Object.assign ( nhân viên, {id: 670});
    
    // Kết quả: {id: 670, name: "Jone Doe", age: 29}
    
    var person = {location: {}};
    
    Object.assign (nhân viên, người);
    
    // Kết quả: {id: 670, name: "Jone Doe", age: 29, location: {}}  

    Kết luận

    Cuối cùng, để kết luận tóm tắt về các phương thức thêm thuộc tính vào đối tượng như sau:

    1. Cú pháp của phương thức dấu chấm là lý tưởng cho các giá trị thuộc tính tĩnh.
    2. Cú pháp dấu ngoặc vuông hoạt động tốt nhất cho các giá trị động từ API bên ngoài, đầu vào của người dùng, v.v.
    3. Object.defineProperty () được sử dụng khi khả năng ghi, getter, setters, v.v. của thuộc tính cần được định cấu hình. < / li>
    4. Trong các hàm định dạng đối tượng / mảng và khi các thuộc tính từ một đối tượng khác được bao gồm, toán tử spread và Object.assign () lý tưởng hơn.


Xem thêm những thông tin liên quan đến chủ đề javascript thêm thuộc tính vào đối tượng hiện có

Sự Kiện Hàm JavaScript – Ngày 5

  • Tác giả: PHP & MySQL
  • Ngày đăng: 2021-11-06
  • Đánh giá: 4 ⭐ ( 7393 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Lập trình C

Thuộc tính và phương thức của đối tượng JavaScript String – Minh Hoàng Blog

  • Tác giả: minhhn.com
  • Đánh giá: 4 ⭐ ( 8808 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Các Thuộc Tính Của Object Trong JavaScript

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 3 ⭐ ( 1970 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các thuộc tính là phần của quan trọng bất của bất kì object nào trong JavaScript

Đối tượng (Object) trong Javascript?

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 9883 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Như các bạn đã biết, Javascript có 5 kiểu dữ liệu Number, String, Boolean, Undefined và Null và còn 1 kiểu khác nữa đó là Object (kiểu dữ liệu phức hợp). Kiểu Object là kiểu được sử dụng nhiều nhất…

Thuộc tính writable, enumerable và configurable của object trong Javascript

  • Tác giả: completejavascript.com
  • Đánh giá: 5 ⭐ ( 9531 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có thể bạn mới chỉ biết thuộc tính của object trong JavaScript có dạng key-value. Thực tế, thuộc tính trong object có các tính chất khác như writable, enumerable và configurable.

Object trong Javascript (đọc hiểu trong 5 phút)

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 6068 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu object trong javascript, giúp bạn hiểu được khái niệm đối tượng object là gì? Cách khởi tạo và các thêm thuộc tính / phương thức vào đối tượng.

Thuộc tính của đối tượng trong JavaScript

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 3 ⭐ ( 5038 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính của đối tượng trong JavaScript – Lập Trình Từ Đầu 2 Đối Tượng Trong JavaScript

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Thuộc tính kích thước nền CSS - kích thước nền hình ảnh bìa

By ads_php