JavaScript cung cấp một cách dễ dàng để lọc mảng. Bằng cách sử dụng phương thức mảng filter[] bạn có thể dễ dàng tạo một mảng mới chỉ chứa các phần tử từ mảng ban đầu tương ứng với tiêu chí lọc của bạn. Trong hướng dẫn ngắn này, bạn sẽ học cách sử dụng…
Nghe có vẻ lạ, nhưng đôi khi bạn cần lọc một đối tượng theo một số giá trị có trong một mảng trong các đạo cụ của nó. Kiểm tra một cách dễ dàng để giải quyết điều này
Giả sử bạn sở hữu một trang web “Tạp chí và Báo chí” bán đăng ký. Và bạn đang thiết kế một trang đăng ký tăng cấp, trong đó bạn sẽ hiển thị tất cả các gói không miễn phí mà công ty của bạn cung cấp
Nó sẽ dễ dàng như gọi điểm cuối của bạn với thông tin đăng ký và vẽ nó ra bằng hàm
// Arrow function
filter[[element] => { /* … */ }]
filter[[element, index] => { /* … */ }]
filter[[element, index, array] => { /* … */ }]
// Callback function
filter[callbackFn]
filter[callbackFn, thisArg]
// Inline callback function
filter[function [element] { /* … */ }]
filter[function [element, index] { /* … */ }]
filter[function [element, index, array] { /* … */ }]
filter[function [element, index, array] { /* … */ }, thisArg]
9 và một số function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
0. Nhưng… điều gì sẽ xảy ra nếu phản hồi trả về thêm thông tin mà bạn thực sự không muốn?Đã đến lúc dọn dẹp. Quá trình lọc thường diễn ra khá đơn giản với các hàm
function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
1 của JavaScript ES6. Nhưng điều này chỉ hoạt động với mảngTrong trường hợp của chúng tôi, API của chúng tôi đang trả về một đối tượng với các sản phẩm khác nhau mà chúng tôi cung cấp. Mỗi sản phẩm sở hữu một loạt các thuộc tính mô tả các tùy chọn đăng ký hoặc vé khác nhau có sẵn. Như thế này
{
cool_magazine: [
{
id: 'free-pass',
label: 'Free Pass'
},
{
id: 'seasons-pass',
label: 'Seasons Pass'
}
],
boring_newspaper: [
{
id: 'free-pass',
label: 'Free Pass'
},
{
id: 'seasons-pass',
label: 'Seasons Pass'
}
]
};
Chúng ta cần loại bỏ các đăng ký "free-pass" đó trong các mảng của props của từng đối tượng. Nghe có vẻ như rất nhiều lồng, và nó là. Nhưng hãy tạo một hàm trả về một đối tượng đã được lọc mà chúng ta có thể hiển thị trên trang web của mình
Hãy phá vỡ điều này
- Hãy tạo một đối tượng sạch hoàn toàn mới sẽ chứa kết quả cuối cùng của quá trình làm sạch. Đối với điều này, chúng tôi sao chép cấu trúc đối tượng ban đầu bằng cách sử dụng
2. Điều này sẽ tạo một bản sao chính xác củafunction isBigEnough[value] { return value >= 10; } const filtered = [12, 5, 8, 130, 44].filter[isBigEnough]; // filtered is [12, 130, 44]
3 nhưng tất cả các giá trị sẽ trốngfunction isBigEnough[value] { return value >= 10; } const filtered = [12, 5, 8, 130, 44].filter[isBigEnough]; // filtered is [12, 130, 44]
- Chúng tôi cần lặp lại tất cả các đạo cụ của đối tượng sản phẩm ban đầu của mình để thực hiện một số nội dung. Nhưng vì các đối tượng không thể lặp lại, nên chúng ta cần tạo một trình lặp với
4. Chức năng này hầu như sẽ tạo một mảng với các khóa của đối tượng của chúng tôi.function isBigEnough[value] { return value >= 10; } const filtered = [12, 5, 8, 130, 44].filter[isBigEnough]; // filtered is [12, 130, 44]
5 cho phép chúng tôi sử dụng các phương thức mảng mà JS cófunction isBigEnough[value] { return value >= 10; } const filtered = [12, 5, 8, 130, 44].filter[isBigEnough]; // filtered is [12, 130, 44]
- Bây giờ chúng ta có một mảng, chúng ta sẽ lặp qua từng khóa bằng phương thức
6function isBigEnough[value] { return value >= 10; } const filtered = [12, 5, 8, 130, 44].filter[isBigEnough]; // filtered is [12, 130, 44]
- Vì
7 của chúng tôi tương ứng với tên của sản phẩm trong cảfunction isBigEnough[value] { return value >= 10; } const filtered = [12, 5, 8, 130, 44].filter[isBigEnough]; // filtered is [12, 130, 44]
90 và// Arrow function filter[[element] => { /* … */ }] filter[[element, index] => { /* … */ }] filter[[element, index, array] => { /* … */ }] // Callback function filter[callbackFn] filter[callbackFn, thisArg] // Inline callback function filter[function [element] { /* … */ }] filter[function [element, index] { /* … */ }] filter[function [element, index, array] { /* … */ }] filter[function [element, index, array] { /* … */ }, thisArg]
3 nên chúng tôi có thể sử dụng nó để xác định trực tiếp mảng đạo cụ của từng sản phẩm vớifunction isBigEnough[value] { return value >= 10; } const filtered = [12, 5, 8, 130, 44].filter[isBigEnough]; // filtered is [12, 130, 44]
92// Arrow function filter[[element] => { /* … */ }] filter[[element, index] => { /* … */ }] filter[[element, index, array] => { /* … */ }] // Callback function filter[callbackFn] filter[callbackFn, thisArg] // Inline callback function filter[function [element] { /* … */ }] filter[function [element, index] { /* … */ }] filter[function [element, index, array] { /* … */ }] filter[function [element, index, array] { /* … */ }, thisArg]
- Cuối cùng, chúng tôi có thể lọc mảng trong từng sản phẩm và chỉ trích xuất những mảng không chứa từ 'miễn phí' trong đó. Chức năng
93 cũ đơn giản ở đây// Arrow function filter[[element] => { /* … */ }] filter[[element, index] => { /* … */ }] filter[[element, index, array] => { /* … */ }] // Callback function filter[callbackFn] filter[callbackFn, thisArg] // Inline callback function filter[function [element] { /* … */ }] filter[function [element, index] { /* … */ }] filter[function [element, index, array] { /* … */ }] filter[function [element, index, array] { /* … */ }, thisArg]
Vì vậy, với chức năng này được thiết lập và chạy, bạn chỉ cần xử lý phản hồi đối tượng, JSON hoặc API của mình trước khi sử dụng hoặc lưu trữ nó trong cửa hàng Redux của bạn
Hãy hét thật to và cảm ơn Miguel A Gutiérrez, bộ não lớn đằng sau giải pháp dễ dàng nhưng khó khăn này
Phương thức
function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
2 tạo một bản sao nông của một phần của một mảng nhất định, được lọc xuống chỉ các phần tử từ mảng đã cho vượt qua bài kiểm tra được thực hiện bởi hàm được cung cấpThử nó
cú pháp
// Arrow function
filter[[element] => { /* … */ }]
filter[[element, index] => { /* … */ }]
filter[[element, index, array] => { /* … */ }]
// Callback function
filter[callbackFn]
filter[callbackFn, thisArg]
// Inline callback function
filter[function [element] { /* … */ }]
filter[function [element, index] { /* … */ }]
filter[function [element, index, array] { /* … */ }]
filter[function [element, index, array] { /* … */ }, thisArg]
Thông số
function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
3Một hàm để thực thi cho từng phần tử trong mảng. Nó sẽ trả về một giá trị trung thực để giữ phần tử trong mảng kết quả và giá trị sai nếu không
Hàm được gọi với các đối số sau
function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
0Phần tử hiện tại đang được xử lý trong mảng
function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
1Chỉ số của phần tử hiện tại đang được xử lý trong mảng
function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
2Mảng
function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
2 đã được gọifunction isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
4 Tùy chọnMột giá trị được sử dụng như
function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
5 khi thực thi function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
3. Xem các phương pháp lặpGiá trị trả về
Một bản sao nông của một phần của mảng đã cho, được lọc xuống chỉ các phần tử từ mảng đã cho vượt qua bài kiểm tra được thực hiện bởi hàm được cung cấp. Nếu không có phần tử nào vượt qua bài kiểm tra, một mảng trống sẽ được trả về
Sự miêu tả
Phương pháp
function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
2 là một phương pháp lặp. Nó gọi một hàm function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
3 được cung cấp một lần cho mỗi phần tử trong một mảng và xây dựng một mảng mới gồm tất cả các giá trị mà đối với đó function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
3 trả về một giá trị trung thực. Các phần tử mảng không vượt qua bài kiểm tra function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
3 sẽ không được đưa vào mảng mớifunction isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
3 chỉ được gọi cho các chỉ mục mảng có giá trị được gán. Nó không được gọi cho các vị trí trống trong các mảng thưa thớtPhương pháp
function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
2 là một phương pháp sao chép. Nó không thay đổi function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
5 mà thay vào đó trả về một bản sao nông chứa các phần tử giống như các phần tử từ mảng ban đầu [với một số được lọc ra]. Tuy nhiên, hàm được cung cấp dưới dạng function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
3 có thể thay đổi mảng. Tuy nhiên, lưu ý rằng độ dài của mảng được lưu trước lần gọi đầu tiên của function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
3. Vì vậy
3 sẽ không truy cập bất kỳ phần tử nào được thêm vào vượt quá độ dài ban đầu của mảng khi lệnh gọi tớifunction isBigEnough[value] { return value >= 10; } const filtered = [12, 5, 8, 130, 44].filter[isBigEnough]; // filtered is [12, 130, 44]
2 bắt đầufunction isBigEnough[value] { return value >= 10; } const filtered = [12, 5, 8, 130, 44].filter[isBigEnough]; // filtered is [12, 130, 44]
- Các thay đổi đối với các chỉ mục đã truy cập không khiến
3 được gọi lại trên chúngfunction isBigEnough[value] { return value >= 10; } const filtered = [12, 5, 8, 130, 44].filter[isBigEnough]; // filtered is [12, 130, 44]
- Nếu một phần tử hiện có, chưa được truy cập của mảng bị thay đổi bởi
3, thì giá trị của nó được truyền chofunction isBigEnough[value] { return value >= 10; } const filtered = [12, 5, 8, 130, 44].filter[isBigEnough]; // filtered is [12, 130, 44]
3 sẽ là giá trị tại thời điểm phần tử đó được truy cập. Các phần tử đã xóa không được truy cậpfunction isBigEnough[value] { return value >= 10; } const filtered = [12, 5, 8, 130, 44].filter[isBigEnough]; // filtered is [12, 130, 44]
Cảnh báo. Các sửa đổi đồng thời thuộc loại được mô tả ở trên thường dẫn đến mã khó hiểu và thường nên tránh [trừ trường hợp đặc biệt]
Phương pháp
function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
2 là chung chung. Nó chỉ mong đợi giá trị function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
5 có thuộc tính const arr = [
{ id: 15 },
{ id: -1 },
{ id: 0 },
{ id: 3 },
{ id: 12.2 },
{},
{ id: null },
{ id: NaN },
{ id: "undefined" },
];
let invalidEntries = 0;
function filterByID[item] {
if [Number.isFinite[item.id] && item.id !== 0] {
return true;
}
invalidEntries++;
return false;
}
const arrByID = arr.filter[filterByID];
console.log["Filtered Array\n", arrByID];
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]
console.log["Number of Invalid Entries = ", invalidEntries];
// Number of Invalid Entries = 5
3 và các thuộc tính có khóa số nguyênví dụ
Lọc ra tất cả các giá trị nhỏ
Ví dụ sau sử dụng
function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
2 để tạo một mảng đã lọc có tất cả các phần tử có giá trị nhỏ hơn const arr = [
{ id: 15 },
{ id: -1 },
{ id: 0 },
{ id: 3 },
{ id: 12.2 },
{},
{ id: null },
{ id: NaN },
{ id: "undefined" },
];
let invalidEntries = 0;
function filterByID[item] {
if [Number.isFinite[item.id] && item.id !== 0] {
return true;
}
invalidEntries++;
return false;
}
const arrByID = arr.filter[filterByID];
console.log["Filtered Array\n", arrByID];
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]
console.log["Number of Invalid Entries = ", invalidEntries];
// Number of Invalid Entries = 5
5 đã bị xóafunction isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
Tìm tất cả các số nguyên tố trong một mảng
Ví dụ sau trả về tất cả các số nguyên tố trong mảng
// Arrow function
filter[[element] => { /* … */ }]
filter[[element, index] => { /* … */ }]
filter[[element, index, array] => { /* … */ }]
// Callback function
filter[callbackFn]
filter[callbackFn, thisArg]
// Inline callback function
filter[function [element] { /* … */ }]
filter[function [element, index] { /* … */ }]
filter[function [element, index, array] { /* … */ }]
filter[function [element, index, array] { /* … */ }, thisArg]
2Lọc các mục nhập không hợp lệ từ JSON
Ví dụ sau sử dụng
function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
2 để tạo JSON được lọc gồm tất cả các phần tử có giá trị khác 0, số const arr = [
{ id: 15 },
{ id: -1 },
{ id: 0 },
{ id: 3 },
{ id: 12.2 },
{},
{ id: null },
{ id: NaN },
{ id: "undefined" },
];
let invalidEntries = 0;
function filterByID[item] {
if [Number.isFinite[item.id] && item.id !== 0] {
return true;
}
invalidEntries++;
return false;
}
const arrByID = arr.filter[filterByID];
console.log["Filtered Array\n", arrByID];
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]
console.log["Number of Invalid Entries = ", invalidEntries];
// Number of Invalid Entries = 5
7const arr = [
{ id: 15 },
{ id: -1 },
{ id: 0 },
{ id: 3 },
{ id: 12.2 },
{},
{ id: null },
{ id: NaN },
{ id: "undefined" },
];
let invalidEntries = 0;
function filterByID[item] {
if [Number.isFinite[item.id] && item.id !== 0] {
return true;
}
invalidEntries++;
return false;
}
const arrByID = arr.filter[filterByID];
console.log["Filtered Array\n", arrByID];
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]
console.log["Number of Invalid Entries = ", invalidEntries];
// Number of Invalid Entries = 5
Tìm kiếm trong mảng
Ví dụ sau sử dụng
function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
2 để lọc nội dung mảng dựa trên tiêu chí tìm kiếm// Arrow function
filter[[element] => { /* … */ }]
filter[[element, index] => { /* … */ }]
filter[[element, index, array] => { /* … */ }]
// Callback function
filter[callbackFn]
filter[callbackFn, thisArg]
// Inline callback function
filter[function [element] { /* … */ }]
filter[function [element, index] { /* … */ }]
filter[function [element, index, array] { /* … */ }]
filter[function [element, index, array] { /* … */ }, thisArg]
5Sử dụng bộ lọc [] trên các mảng thưa thớt
function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
2 sẽ bỏ qua các ô trống// Arrow function
filter[[element] => { /* … */ }]
filter[[element, index] => { /* … */ }]
filter[[element, index, array] => { /* … */ }]
// Callback function
filter[callbackFn]
filter[callbackFn, thisArg]
// Inline callback function
filter[function [element] { /* … */ }]
filter[function [element, index] { /* … */ }]
filter[function [element, index, array] { /* … */ }]
filter[function [element, index, array] { /* … */ }, thisArg]
6Gọi bộ lọc[] trên các đối tượng không phải mảng
Phương thức
function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
2 đọc thuộc tính const arr = [
{ id: 15 },
{ id: -1 },
{ id: 0 },
{ id: 3 },
{ id: 12.2 },
{},
{ id: null },
{ id: NaN },
{ id: "undefined" },
];
let invalidEntries = 0;
function filterByID[item] {
if [Number.isFinite[item.id] && item.id !== 0] {
return true;
}
invalidEntries++;
return false;
}
const arrByID = arr.filter[filterByID];
console.log["Filtered Array\n", arrByID];
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]
console.log["Number of Invalid Entries = ", invalidEntries];
// Number of Invalid Entries = 5
3 của function isBigEnough[value] {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter[isBigEnough];
// filtered is [12, 130, 44]
5 và sau đó truy cập từng chỉ mục số nguyên