Thay thế cho bộ lọc JavaScript

Người dùng có thể sử dụng phương thức filter() cho mảng trong JavaScript chứ không phải với đối tượng. Vì vậy, có các phương pháp thay thế để lọc đối tượng bằng các phím. Người dùng có thể sử dụng Đối tượng. keys() để lọc các đối tượng JavaScript, sử dụng hàm reduce() và tích lũy các khóa đã lọc

Ngoài ra, người dùng có thể sử dụng kết hợp Object. các mục (), Mảng. bộ lọc() và đối tượng. fromEntries() để thực hiện lọc. Bài viết này sẽ thảo luận về hai phương pháp khác nhau để lọc các loại đối tượng trong JavaScript

Đối tượng trong JavaScript là gì?

JavaScript là một ngôn ngữ dựa trên đối tượng. Nói cách khác, người dùng có thể sử dụng bất kỳ thứ gì dưới dạng đối tượng trong JavaScript. Đối tượng JS trong JavaScript là một thùng chứa hoặc thực thể lưu trữ các giá trị được đặt tên gọi là thuộc tính và loại

Trong JavaScript, một đối tượng là một tập hợp các cặp khóa-giá trị không có thứ tự (nó ở dạng khóa. giá trị). Khóa đối tượng được gọi là thuộc tính và người dùng khai báo khóa dưới dạng chuỗi xác định tên thuộc tính

Nếu người dùng khai báo khóa không phải chuỗi, trình biên dịch JavaScript sẽ tự động sử dụng biểu diễn được xâu chuỗi của khóa đó. Các giá trị của đối tượng JS xác định danh sách các giá trị thuộc tính

Chúng ta sẽ thảo luận về hai phương pháp khác nhau để lọc các loại đối tượng

Phương pháp 1. Sử dụng đối tượng. keys() để lọc một đối tượng

Người dùng có thể lọc các khóa của một đối tượng bằng Đối tượng. keys() phương thức tạo ra một mảng chứa tên của các khóa của đối tượng

Đoạn mã

const demo = {
	Abhishek: 30,
	Pritam: 50,
	Sabbir: 40,
	Ram: 90
};
const demo1 = Object.keys(demo);
console.log(demo1);
document.write('Object By Key: ' + demo1);

đầu ra

Thay thế cho bộ lọc JavaScript

Chạy đoạn mã

Giải trình

Ở đây, trong ví dụ mã trên, chúng ta có một mảng các phần tử ở định dạng hai chiều đại diện cho đối tượng JS. Sau đó, chúng tôi đã sử dụng đối tượng. keys để chỉ lọc các khóa của mảng JavaScript

Phương pháp 2. Sử dụng đối tượng. keys() với filter() và include() để chỉ định một tiêu chí

Phương pháp này gần giống như phương pháp đầu tiên. Nhưng ở đây người dùng có thể chỉ định giá trị của các khóa bằng cách sử dụng Đối tượng. keys() với phương thức include() và filter(). đối tượng. keys() phương thức tạo tất cả các khóa của đối tượng JS dẫn đến một mảng và người dùng có thể sử dụng hàm mảng include() để đặt tiêu chí bên trong phương thức filter(). Ví dụ

Đoạn mã

const demo = {
	FirstNAME: "Abhishek",
	Secondname: "Pritam",
	ThirdNAME: "Rahul",
	FourthNAME: "Binayak",
};

const demo2 = Object.keys(demo)

//Filter Object with key contanis "NAME"
.filter((key) => key.includes("NAME"))
.reduce((obj, key) => {
return Object.assign(obj, {
  [key]: demo[key]
});
}, {});

console.log(demo2);
document.write('Object By Key: ' + JSON.stringify(demo2));

đầu ra

Thay thế cho bộ lọc JavaScript

Chạy đoạn mã

Giải trình

Chúng tôi cũng có thể sử dụng bộ lọc() để lặp qua các giá trị hiện tại sẽ chỉ trả về các giá trị đáp ứng tiêu chí đã chỉ định sau khi chúng tôi tạo khóa. Phương thức include() bên trong phương thức filter() tạo ra một điều kiện kiểm tra xem mảng các khóa có thỏa mãn điều kiện đã cho hay không và dựa trên điều kiện đó, nó sẽ trả về các mảng khóa mới

Ở đây, chúng tôi đã sử dụng tiêu chí trong đó nó sẽ duyệt qua từng phần tử trong mảng để xác định xem có bất kỳ khóa nào bao gồm từ "NAME. " Sau đó, chúng tôi sử dụng phương thức reduce() để giảm mảng được tạo thành một đối tượng mới. Nó trả về tất cả các khóa có thuật ngữ "NAME. "

Ghi chú

JavaScript không bao gồm bất kỳ phương thức filter() nào mà người dùng có thể sử dụng trực tiếp. Trước tiên, họ phải chuyển đổi đối tượng thành một mảng và sau đó sử dụng phương thức filter() trên mảng JS đó. Chẳng hạn, với các phương thức trên, người dùng cũng có thể sử dụng phương thức reduce() để sắp xếp các khóa và giá trị đã lọc vào một đối tượng mới

Ngoài ra, người dùng có thể lọc đối tượng Keys bằng Object. keys(), trong khi chúng có thể lọc các giá trị đối tượng bằng Object. giá trị(). Ngoài ra, người dùng có thể truy xuất cả khóa và giá trị; . mục()

Nhưng vì bài viết này chỉ liên quan đến việc lọc các khóa của một đối tượng JS, nên chúng ta sẽ cần Object. keys() với phương thức reduce() nếu người dùng muốn rút gọn mảng thành một đối tượng

Phương pháp 3. Lọc mảng Đối tượng theo khóa

Nói chung, khi người dùng xử lý một đối tượng ở dạng mảng, họ có thể chỉ cần lọc từng giá trị của đối tượng bằng cách sử dụng phương thức filter() như đã sử dụng ở trên và lặp qua mảng và áp dụng các bước tương tự

Đoạn mã

const demo = {
	Abhishek: { username: 'dtrfrt34', age: 20 },
	Pritam: { key: 'atfgr354', age: 19 },
	Rahul: { username: 'rrtyny445', age: 26 },
	Binayak: { key: 'Jjrgk456', age: 23 },
};
const users= ['Rahul', 'Pritam'];

const demo2 = Object.keys(demo)
	.filter(key => users.includes(key))
	.reduce((obj, key) => {
		obj[key] = demo[key];
		return obj;
  }, {});
console.log(demo2);
document.write('Object By Key: ' + JSON.stringify(demo2));

đầu ra

Thay thế cho bộ lọc JavaScript

Chạy đoạn mã

Giải trình

Trong ví dụ này, chúng tôi đã áp dụng phương thức filter() với phương thức reduce() và lọc đối tượng "demo" để chỉ trả về các đối tượng của người dùng, lọc những đối tượng này bằng khóa

Phần kết luận

Trong bài viết này, chúng ta đã thảo luận về ba phương pháp khác nhau để lọc đối tượng theo khóa. Người dùng có thể xem qua các phương pháp lọc này để lọc Đối tượng theo khóa, cụ thể là Đối tượng. keys() và filter() với phương pháp reduce() để lọc các khóa thỏa mãn điều kiện đã cho

Cái gì có thể được sử dụng thay cho bộ lọc trong JavaScript?

Phương thức find() là tùy chọn tốt hơn để sử dụng trên các trình duyệt hiện đại, nhưng nếu bạn quan tâm đến trình duyệt IE, hãy sử dụng phương thức filter(). .
Tìm trong JavaScript
Bộ lọc trong JavaScript
trong JavaScript

Đâu là sự khác biệt giữa filter() và find()?

filter() trả về một mảng chứa phần tử thỏa mãn điều kiện, nhưng find() trả về chính phần tử thỏa mãn điều kiện . Trong filter() , toàn bộ mảng được lặp lại mặc dù thực tế là phần tử được tìm kiếm đã xuất hiện ngay từ đầu.

Bộ lọc JavaScript có nhanh không?

Thật ngạc nhiên, vòng lặp for nhanh hơn nhiều so với Array. phương pháp lọc. Nói chính xác, phương thức Filter chậm hơn 77% so với vòng lặp for .

Điều ngược lại với phương thức lọc trong JavaScript là gì?

Từ chối nên hoạt động theo cách ngược lại với 'bộ lọc' — nếu một hàm trả về 'true', thì mục đó *không* nên được đưa vào mảng mới.