Học viên: Phạm Thanh Huấn
Lớp: Web Frontend - React Js 29
Emai: HuanPT99@gmail.com
Link tham khảo: https://www.syncfusion.com/blogs/post/10-tips-and-tricks-to-handle-javascript-objects.aspx
10 mẹo và thủ thuật để xử lý JavaScript Objects.
Một object là khối xây dựng cơ bản của các chương trình trong JavaScript, được sử dụng trong các class xây dựng và dữ liệu phức tạp, và như một phần không thể thiếu của lập trình hướng object.
Trong suốt hơn năm năm qua, tôi đã sử dụng JavaScript hàng ngày như một developer phần mềm toàn diện. Các objects của JavaScript đã đóng một vai trò quan trọng trong quá trình đó.
Trong bài viết này, tôi sẽ chia sẻ 10 thủ thuật và mẹo bạn có thể sử dụng với tư cách là JavaScript developer để điều khiển và làm việc hiệu quả với JavaScript Objects.
1. Tạo ra một Object hoàn toàn trống rỗng
Tạo các objects trống dường như không có gì ngoài việc sử dụng {}. Tuy nhiên, bạn có nhận thấy rằng các phương thức object như proto và hasOwnProperty vẫn ở đó khi bạn tạo một object trong một phương thức như vậy không? Điều này là do việc sử dụng {} sẽ tạo ra một đối tượng kế thừa từ Object class.
Nếu bạn cần tạo một Object hoàn toàn trống rỗng, tốt hơn là sử dụng Object.create(null), tạo ra một object không được kế thừa từ bất kỳ thứ gì và không có thuộc tính.
let vehical = Object.create(null);
// vehicle.__proto__ === "undefined"
// There are no object properties, keys, or methods until we add
2. Kết hợp hai Object bằng cách sử dụng toán tử spread
Có nhiều tình huống mà bạn phải kết hợp hai hoặc nhiều bộ dữ liệu từ các nguồn khác nhau. Trong những trường hợp như vậy, có nhiều cách để làm điều này trong JavaScript.
Phương thức được sử dụng phổ biến nhất là sử dụng Object.assign(). Phương pháp này có nhiều tham số. Cái đầu tiên là object được chỉ định, và phần còn lại của các tham số là các objects chúng ta cần kết hợp.
const name = { id: '1234', name: 'Charuka'};
const university = { id: '1234', university: 'Harvard'};
const PersonalDetails = Object.assign({}, name, university);
console.log(PersonalDetails);
// { id: '1234', name: 'Charuka', university: 'Harvard' }
Tuy nhiên, mà không làm phức tạp việc này, bạn có thể sử dụng toán tử spread để kết hợp. Bạn có thể sử dụng toán tử spread để kết hợp bất kỳ số lượng đối tượng nào thành một object duy nhất.
const PersonalDetails = { ...name, ...university };
console.log(PersonalDetails);
// { id: '1234', name: 'Charuka', university: 'Harvard' }
Một điểm quan trọng cần lưu ý là các khóa trùng lặp sẽ ghi đè lên các objects trước đó trong cả hai phương pháp.
3a. Lấy danh sách các khóa và giá trị từ một Object
Trong quá trình phát triển, có những trường hợp chúng ta chỉ cần lấy các khóa hoặc chỉ các giá trị từ một object. Cả hai chức năng tích hợp sau đây đều khá đơn giản:
•Object.keys(): Được sử dụng để lấy danh sách các khóa (keys).
•Object.values(): Được sử dụng để lấy danh sách các giá trị.
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'};
//get keys
console.log(Object.keys(vehicle)); // [ 'brand', 'year', 'type' ]
//get values
console.log(Object.values(vehicle)); // [ 'BWM', 2022, 'suv' ]
3b. Sử dụng hasOwnProperty() để kiểm tra một mục
Khi sử dụng vòng lặp for-in, việc kiểm tra thuộc tính của một object có thể hữu ích để tránh lặp lại các thuộc tính từ nguyên mẫu của object. Thay vì sử dụng khối if-else, ở đây chúng ta có thể sử dụng Object.hasOwnProperty().
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'};
for (var item in vehicle) {
if (vehicle.hasOwnProperty(item)) {
console.log(item);
};
};
// brand
// year
// type
4. Sử dụng splice thay vì delete
Khi sử dụng phương thức delete, một ứng dụng sẽ thay thế một mục bằng undefined thay vì xóa nó khỏi array. Vì vậy, tốt hơn là sử dụng splice() để xóa một mục khỏi một array.
Hãy xem điều gì sẽ xảy ra khi sử dụng delete.
var arrayItems = ['a' , 2 , 'b', '3', 'c', '4'];
arrayItems.length; // returns 6
delete arrayItems[2]; // returns true
arrayItems.length; // returns 6
console.log(arrayItems); // [ 'a', 2, undefined, '3', 'c', '4' ]
Khi sử dụng splice(), điều sau đây xảy ra.
var arrayItems = ['a' , 2 , 'b', '3', 'c', '4'];
arrayItems.length; // returns 6
arrayItems.splice(2,1); // returns true
arrayItems.length; // returns 5
console.log(arrayItems); // [ 'a', 2, '3', 'c', '4' ]
Phương thức delete nên được sử dụng để xóa một thuộc tính object.
5. Nhân bản một Object một cách chính xác
Giả sử bạn có một object và cần sao chép nó để thay đổi giá trị của nó, nhưng object ban đầu sẽ không thay đổi. Có hai phương pháp để bạn có thể làm điều đó.
Phương pháp đầu tiên là sử dụng Object.assign(), sao chép các giá trị của tất cả các thuộc tính có thể liệt kê từ object này sang object khác.
var initialVehicle = { brand: 'BWM', year: 2022, type: 'suv'};
var secondaryVehicle = Object.assign({}, initialVehicle);
console.log(secondaryVehicle); // { brand: 'BWM', year: 2022, type: 'suv'};
Phương pháp thứ hai là sao chép object bằng JSON.parse().
var initialVehicle = { brand: 'BWM', year: 2022, type: 'suv'};
var secondaryVehicle = JSON.parse(JSON.stringify(initialVehicle));
console.log(secondaryVehicle); // { brand: 'BWM', year: 2022, type: 'suv'};
6. Chọn dữ liệu cụ thể từ một Object
Có một số phương pháp để lựa chọn các keys từ một object. Phương pháp bạn chọn phụ thuộc vào những gì bạn muốn làm với các giá trị. Ví dụ sau đây cho thấy một cách tổ chức để lựa chọn dữ liệu từ một object.
Tại đây, bạn có thể chọn các keys bạn cần và kéo chúng vào một object mới.
const selectObj = (obj, items) => {
return items.reduce((result, item) => {
result[item] = obj[item];
return result;
}, {});
};
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'};
const selected = selectObj(vehicle, ['brand', 'type']);
console.log(selected); // { brand: 'BWM', type: 'suv' }
7. Loại bỏ chìa khóa khỏi một Object
Đôi khi cần phải loại bỏ các khóa cụ thể và giá trị của chúng khỏi một object.
Điều này có thể cần thiết cho một trường hợp mà bạn đang xây dựng một API và muốn xóa dữ liệu nhạy cảm.
Phương pháp phù hợp nhất là viết một phương thức remove có thể tái sử dụng, nhận đối tượng và danh sách các khóa cần loại bỏ làm đầu vào. Sau đó, bạn có thể lặp qua từng khóa cần loại bỏ và xóa nó khỏi object.
const remove = (object, removeList = []) => {
const result = { ...object };
removeList.forEach((item) => {
delete result[item];
});
return result;
}
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'}
const itemRemoved = remove(vehicle, ['year']);
console.log(itemRemoved); // Result { brand: 'BWM', type: 'suv' }
8. Kéo dữ liệu Object vào một array
Có các tình huống mà bạn cần đưa dữ liệu của object vào một array, ví dụ như một menu thả xuống. Bạn có thể sử dụng hàm Object.entries(), nhận object làm đối số đầu tiên và trả về một array.
Object được trả về là một array của một array. Các array bên trong sẽ có hai giá trị: giá trị đầu tiên là key và giá trị thứ hai là giá trị.
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'}
console.log(Object.entries(vehicle));
// [ [ 'brand', 'BWM' ], [ 'year', 2022 ], [ 'type', 'suv' ] ]
9. Vòng lặp qua một JavaScript Object
Có một số phương thức trong JavaScript có thể được sử dụng để lặp qua một object. Tôi sẽ so sánh hai trong số những phương pháp tốt nhất mà tôi sử dụng.
Phương pháp đầu tiên là sử dụng Object.entries(), một hàm tránh tra cứu từng giá trị trong objects ban đầu.
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'}
Object.entries(vehicle).forEach(
([key, value]) => console.log(key, value)
);
// brand BWM
// year 2022
// type suv
Là một phương pháp tốt hơn và rõ ràng hơn nhiều, bạn có thể sử dụng tính năng hủy cấu trúc object với Object.entries().
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'}
for (const [key, value] of Object.entries(vehicle)) {
console.log(key, value);
}
// brand BWM
// year 2022
// type suv
10. Thêm các thuộc tính có điều kiện vào các Object
Thông thường, các developers sử dụng một điều kiện if-else như một phương pháp dài hơn để thêm một phần tử mới vào object một cách có điều kiện. Tuy nhiên, cách đơn giản nhất là sử dụng cú pháp phân rã object destructuring và toán tử spread.
const type = { type: 'suv' };
const vehicle = {
brand: 'BMW',
year: 2022,
...(!type ? {} : type)
}
console.log(vehicle); //{ brand: 'BMW', year: 2022, type: 'suv' }
Tương tự như vậy, sử dụng các điều kiện khác nhau, bạn có thể thêm bao nhiêu yếu tố tùy thích vào một object.
Kết luận
Giống như bất kỳ ngôn ngữ lập trình nào khác, JavaScript có nhiều thủ thuật để xử lý các Objects, cho phép chúng tôi viết các chương trình của mình đơn giản và đẹp mắt hơn. Bài viết này đã thảo luận về 10 mẹo và thủ thuật tôi sử dụng nhiều nhất khi xử lý object.
Cảm ơn mọi người đã dành thời gian đọc bài dịch của mình!
Bình luận