Chúng tôi được yêu cầu viết một hàm JavaScript nhận hai mảng như vậy. Hàm của chúng ta sẽ trả về một phiên bản đã lọc mới của mảng đầu tiên [trong trường hợp này là mảng 1] chỉ chứa các đối tượng có thuộc tính tên không có trong mảng thứ hai [trong trường hợp này là mảng 2] có cùng thuộc tính tên
Do đó, đầu ra, trong trường hợp này, sẽ giống như -
const output = [{id:'2',name:'B'},{id:'4',name:'D'}];
Thí dụ
Mã cho điều này sẽ là -
const arr1 = [{id:'1',name:'A'},{id:'2',name:'B'},{id:'3',name:'C'},{id:'4',name:'D'}]; const arr2 = [{id:'1',name:'A',state:'healthy'},{id:'3',name:'C',state:'healthy'}]; const filterByReference = [arr1, arr2] => { let res = []; res = arr1.filter[el => { return !arr2.find[element => { return element.id === el.id; }]; }]; return res; } console.log[filterByReference[arr1, arr2]];
đầu ra
Và đầu ra trong bảng điều khiển sẽ là -
[ { id: '2', name: 'B' }, { id: '4', name: 'D' } ]
Bộ lọc mảng Javascript[] tạo một mảng mới gồm các phần tử từ một mảng hiện có đáp ứng một điều kiện đã chỉ định
Phương thức
const arr1 = [{id:'1',name:'A'},{id:'2',name:'B'},{id:'3',name:'C'},{id:'4',name:'D'}]; const arr2 = [{id:'1',name:'A',state:'healthy'},{id:'3',name:'C',state:'healthy'}]; const filterByReference = [arr1, arr2] => { let res = []; res = arr1.filter[el => { return !arr2.find[element => { return element.id === el.id; }]; }]; return res; } console.log[filterByReference[arr1, arr2]];1 một lần gọi hàm gọi lại được cung cấp cho từng phần tử mảng và xây dựng một mảng mới với tất cả các giá trị mà hàm gọi lại trả về giá trị
const arr1 = [{id:'1',name:'A'},{id:'2',name:'B'},{id:'3',name:'C'},{id:'4',name:'D'}]; const arr2 = [{id:'1',name:'A',state:'healthy'},{id:'3',name:'C',state:'healthy'}]; const filterByReference = [arr1, arr2] => { let res = []; res = arr1.filter[el => { return !arr2.find[element => { return element.id === el.id; }]; }]; return res; } console.log[filterByReference[arr1, arr2]];2
- Hàm gọi lại chỉ được gọi cho các chỉ mục mảng có giá trị
- Các phần tử mảng không vượt qua kiểm tra gọi lại không được đưa vào mảng mới
- Mảng. filter[] không sửa đổi mảng ban đầu
Bộ lọc mảng Javascript sintaxe
const arr1 = [{id:'1',name:'A'},{id:'2',name:'B'},{id:'3',name:'C'},{id:'4',name:'D'}]; const arr2 = [{id:'1',name:'A',state:'healthy'},{id:'3',name:'C',state:'healthy'}]; const filterByReference = [arr1, arr2] => { let res = []; res = arr1.filter[el => { return !arr2.find[element => { return element.id === el.id; }]; }]; return res; } console.log[filterByReference[arr1, arr2]];
3 là phần tử hiện đang được thực thi – bắt buộcconst arr1 = [{id:'1',name:'A'},{id:'2',name:'B'},{id:'3',name:'C'},{id:'4',name:'D'}]; const arr2 = [{id:'1',name:'A',state:'healthy'},{id:'3',name:'C',state:'healthy'}]; const filterByReference = [arr1, arr2] => { let res = []; res = arr1.filter[el => { return !arr2.find[element => { return element.id === el.id; }]; }]; return res; } console.log[filterByReference[arr1, arr2]];
4 chỉ mục của phần tử – tùy chọnconst arr1 = [{id:'1',name:'A'},{id:'2',name:'B'},{id:'3',name:'C'},{id:'4',name:'D'}]; const arr2 = [{id:'1',name:'A',state:'healthy'},{id:'3',name:'C',state:'healthy'}]; const filterByReference = [arr1, arr2] => { let res = []; res = arr1.filter[el => { return !arr2.find[element => { return element.id === el.id; }]; }]; return res; } console.log[filterByReference[arr1, arr2]];
5 là mảng hiện đang được xử lý – tùy chọnconst arr1 = [{id:'1',name:'A'},{id:'2',name:'B'},{id:'3',name:'C'},{id:'4',name:'D'}]; const arr2 = [{id:'1',name:'A',state:'healthy'},{id:'3',name:'C',state:'healthy'}]; const filterByReference = [arr1, arr2] => { let res = []; res = arr1.filter[el => { return !arr2.find[element => { return element.id === el.id; }]; }]; return res; } console.log[filterByReference[arr1, arr2]];
6 là một đối số được truyền để sử dụng làm giá trị this trong hàm gọi lại – tùy chọn
const filteredArray = originalArray.filter[callbackFunction[currentValue, index, arr], thisValue];
1 – Lọc mảng số
Ví dụ đầu tiên khá đơn giản, giả sử chúng ta có một mảng có nhiều độ tuổi. Và rằng chúng ta chỉ cần tạo một mảng mới với độ tuổi trên hoặc bằng 18. Đơn giản phải không?
Cú pháp thậm chí còn rõ ràng hơn khi chúng ta sử dụng cú pháp Hàm mũi tên
2 – Lọc mảng đối tượng
Đối với trường hợp thứ hai của chúng tôi, chúng tôi có một Mảng đối tượng với một số sản phẩm mà chúng tôi cần lọc theo sở thích của người dùng. Trong trường hợp này, giá
Chúng ta cần tương tác trên mảng này để tìm tất cả những sản phẩm phù hợp với điều kiện của chúng ta. Thera có bốn sản phẩm bên trong mảng này và mỗi sản phẩm là một Đối tượng, chúng ta cũng cần tương tác với các đối tượng, nếu bạn không biết cách thực hiện, chỉ cần xem bài đăng này nói về 3 cách mạnh mẽ để truy cập thuộc tính
Bất kỳ mục nào trên 200 'tiền' sẽ được chèn vào mảng mới và sau đó bạn có thể hiển thị kết quả của bộ lọc cho người dùng
3 – Lọc sai giá trị trong Object
Giả sử rằng tại thời điểm cập nhật một số bản ghi trong cơ sở dữ liệu, các Id đã bị hỏng bởi một số đoạn mã khác. Mục tiêu ở đây là lọc ra id sai
Trong ví dụ này, tôi đã thiết lập 3 điều kiện khác nhau cho một Id hợp lệ, sử dụng bộ lọc mảng Javascript, thật dễ dàng để tạo một mảng mới với id chính xác
4 – Lọc các giá trị lặp lại từ một mảng
Một tình huống rất phổ biến khác là loại bỏ các giá trị lặp lại khỏi một mảng. Để làm được điều này, cần sử dụng tham số thứ hai của hàm lọc mảng Javascript để có thể truy cập chỉ mục của phần tử hiện tại đang được xử lý
Trong ví dụ mã trên, chúng tôi cố gắng lọc những người dùng có thuộc tính
const arr1 = [{id:'1',name:'A'},{id:'2',name:'B'},{id:'3',name:'C'},{id:'4',name:'D'}]; const arr2 = [{id:'1',name:'A',state:'healthy'},{id:'3',name:'C',state:'healthy'}]; const filterByReference = [arr1, arr2] => { let res = []; res = arr1.filter[el => { return !arr2.find[element => { return element.id === el.id; }]; }]; return res; } console.log[filterByReference[arr1, arr2]];7 được đặt thành
const arr1 = [{id:'1',name:'A'},{id:'2',name:'B'},{id:'3',name:'C'},{id:'4',name:'D'}]; const arr2 = [{id:'1',name:'A',state:'healthy'},{id:'3',name:'C',state:'healthy'}]; const filterByReference = [arr1, arr2] => { let res = []; res = arr1.filter[el => { return !arr2.find[element => { return element.id === el.id; }]; }]; return res; } console.log[filterByReference[arr1, arr2]];8. Điều này tương đương với việc trả về một giá trị từ hàm gọi lại
users.filter[user => {
return user.isAdmin
}]
Điều này tương đương với ví dụ mã trênĐã sao chép vào khay nhớ tạm. Sao chép
Phương thức
const arr1 = [{id:'1',name:'A'},{id:'2',name:'B'},{id:'3',name:'C'},{id:'4',name:'D'}]; const arr2 = [{id:'1',name:'A',state:'healthy'},{id:'3',name:'C',state:'healthy'}]; const filterByReference = [arr1, arr2] => { let res = []; res = arr1.filter[el => { return !arr2.find[element => { return element.id === el.id; }]; }]; return res; } console.log[filterByReference[arr1, arr2]];9 luôn mong đợi một giá trị
const arr1 = [{id:'1',name:'A'},{id:'2',name:'B'},{id:'3',name:'C'},{id:'4',name:'D'}]; const arr2 = [{id:'1',name:'A',state:'healthy'},{id:'3',name:'C',state:'healthy'}]; const filterByReference = [arr1, arr2] => { let res = []; res = arr1.filter[el => { return !arr2.find[element => { return element.id === el.id; }]; }]; return res; } console.log[filterByReference[arr1, arr2]];8 hoặc
users.filter[user => {
return user.isAdmin
}]
1 được trả về. Nếu trả về const arr1 = [{id:'1',name:'A'},{id:'2',name:'B'},{id:'3',name:'C'},{id:'4',name:'D'}]; const arr2 = [{id:'1',name:'A',state:'healthy'},{id:'3',name:'C',state:'healthy'}]; const filterByReference = [arr1, arr2] => { let res = []; res = arr1.filter[el => { return !arr2.find[element => { return element.id === el.id; }]; }]; return res; } console.log[filterByReference[arr1, arr2]];8, bài kiểm tra được thông qua và mục được thêm vào một mảng mới. Nếu trả về
users.filter[user => {
return user.isAdmin
}]
1, nó sẽ không được thêm vào mảng mớiTất nhiên, chúng ta không chỉ có thể làm điều này với các giá trị boolean mà còn với bất kỳ giá trị nào khác. Hãy tưởng tượng bạn có một danh sách các tệp với kích thước của chúng và bạn muốn lọc ra các tệp lớn. Bạn có thể làm như sau, trong đó bạn so sánh thuộc tính
users.filter[user => {
return user.isAdmin
}]
4 với một giá trị cố địnhconst files = [
{ id: 1, name: 'html.md', size: 499 },
{ id: 2, name: 'css.md', size: 612 },
{ id: 3, name: 'javascript.md', size: 1236 }
]
const largeFiles = files.filter[file => file.size > 1000]
Lưu ý rằng tên của mục trong hàm gọi lại có thể là bất kỳ thứ gìĐã sao chép vào khay nhớ tạm. Sao chép
Chúng ta cũng có thể trừu tượng hóa phương thức bộ lọc thành một hàm mà chúng ta có thể sử dụng lại để lọc theo bất kỳ thuộc tính boolean nào. Chúng ta có thể đạt được điều này với một dòng mã
const filter = [array, property] => array.filter[item => item[property]]
// Then call it later like so:
filter[users, 'isAdmin']
// Returns
-> [{ id: 2, name: 'Jane', isAdmin: true }]
Đã sao chép vào khay nhớ tạm. Sao chép
Hàm này yêu cầu một mảng được lọc và thuộc tính mà chúng ta đang tìm kiếm, sau đó ngay lập tức trả về một mảng mới bằng cách sử dụng
const arr1 = [{id:'1',name:'A'},{id:'2',name:'B'},{id:'3',name:'C'},{id:'4',name:'D'}]; const arr2 = [{id:'1',name:'A',state:'healthy'},{id:'3',name:'C',state:'healthy'}]; const filterByReference = [arr1, arr2] => { let res = []; res = arr1.filter[el => { return !arr2.find[element => { return element.id === el.id; }]; }]; return res; } console.log[filterByReference[arr1, arr2]];9. Bên trong hàm gọi lại của
const arr1 = [{id:'1',name:'A'},{id:'2',name:'B'},{id:'3',name:'C'},{id:'4',name:'D'}]; const arr2 = [{id:'1',name:'A',state:'healthy'},{id:'3',name:'C',state:'healthy'}]; const filterByReference = [arr1, arr2] => { let res = []; res = arr1.filter[el => { return !arr2.find[element => { return element.id === el.id; }]; }]; return res; } console.log[filterByReference[arr1, arr2]];9, chúng ta có thể truyền thuộc tính đã truyền bằng cách sử dụng ký hiệu ngoặc. Lưu ý rằng chức năng trên sẽ chỉ hoạt động với các thuộc tính boolean. Đối với các bộ lọc phức tạp hơn, bạn có thể viết hàm gọi lại
Một điều khác cần lưu ý về phương thức
const arr1 = [{id:'1',name:'A'},{id:'2',name:'B'},{id:'3',name:'C'},{id:'4',name:'D'}]; const arr2 = [{id:'1',name:'A',state:'healthy'},{id:'3',name:'C',state:'healthy'}]; const filterByReference = [arr1, arr2] => { let res = []; res = arr1.filter[el => { return !arr2.find[element => { return element.id === el.id; }]; }]; return res; } console.log[filterByReference[arr1, arr2]];9 là nó cũng chấp nhận nhiều tham số hơn, cụ thể là chỉ mục và chính mảng nếu cần. Đây là các tham số tùy chọn, vì vậy bạn không cần xác định chúng nếu bạn không sử dụng chúng
const arr1 = [{id:'1',name:'A'},{id:'2',name:'B'},{id:'3',name:'C'},{id:'4',name:'D'}]; const arr2 = [{id:'1',name:'A',state:'healthy'},{id:'3',name:'C',state:'healthy'}]; const filterByReference = [arr1, arr2] => { let res = []; res = arr1.filter[el => { return !arr2.find[element => { return element.id === el.id; }]; }]; return res; } console.log[filterByReference[arr1, arr2]];0 Sử dụng chỉ mục và mảng làm tham số tùy chọn trong bộ lọc
Đã sao chép vào khay nhớ tạm. Sao chép
Bạn cũng muốn biết cách sắp xếp mảng?