Làm cách nào để triển khai bộ lọc () cho các đối tượng trong JavaScript?

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ảng

Trong 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

  1. 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
    function isBigEnough(value) {
      return value >= 10;
    }
    
    const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
    // filtered is [12, 130, 44]
    
    2. Điều này sẽ tạo một bản sao chính xác của
    function 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ống
  2. 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
    function isBigEnough(value) {
      return value >= 10;
    }
    
    const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
    // filtered is [12, 130, 44]
    
    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ó
  3. 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
    function isBigEnough(value) {
      return value >= 10;
    }
    
    const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
    // filtered is [12, 130, 44]
    
    6
  4. function isBigEnough(value) {
      return value >= 10;
    }
    
    const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
    // filtered is [12, 130, 44]
    
    7 của chúng tôi tương ứng với tên của sản phẩm trong cả
    // 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)
    
    90 và
    function isBigEnough(value) {
      return value >= 10;
    }
    
    const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
    // filtered is [12, 130, 44]
    
    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ới
    // 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)
    
    92
  5. 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
    // 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)
    
    93 cũ đơn giản ở đây

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ấp

Thử 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]
3

Mộ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]
0

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]
1

Chỉ 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]
2

Mảng

function isBigEnough(value) {
  return value >= 10;
}

const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]
2 đã được gọi

function isBigEnough(value) {
  return value >= 10;
}

const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]
4 Tùy chọn

Mộ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ặp

Giá 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ới

function 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ớ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 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

  • function isBigEnough(value) {
      return value >= 10;
    }
    
    const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
    // filtered is [12, 130, 44]
    
    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ới
    function isBigEnough(value) {
      return value >= 10;
    }
    
    const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
    // filtered is [12, 130, 44]
    
    2 bắt đầu
  • Các thay đổi đối với các chỉ mục đã truy cập không khiến
    function isBigEnough(value) {
      return value >= 10;
    }
    
    const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
    // filtered is [12, 130, 44]
    
    3 được gọi lại trên chúng
  • 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
    function isBigEnough(value) {
      return value >= 10;
    }
    
    const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
    // filtered is [12, 130, 44]
    
    3, thì giá trị của nó được truyền cho
    function 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ập

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ên

ví 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óa

function 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)
2

Lọ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
7

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

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)
5

Sử 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)
6

Gọ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

Làm cách nào để sử dụng bộ lọc cho đối tượng trong JavaScript?

Các đối tượng JavaScript không có phương thức filter(), trước tiên bạn phải biến đối tượng thành một mảng để sử dụng phương thức filter() của mảng. You can use the Object. keys() function to convert the object's keys into an array, and accumulate the filtered keys into a new object using the reduce() function as shown below.

Làm cách nào để lọc danh sách các đối tượng trong JavaScript?

Người ta có thể sử dụng hàm filter() trong JavaScript để lọc mảng đối tượng dựa trên các thuộc tính. Hàm filter() sẽ trả về một mảng mới chứa tất cả các phần tử của mảng thỏa mãn điều kiện đã cho. Nếu không có phần tử nào vượt qua điều kiện, nó sẽ trả về một mảng trống.

Làm cách nào để lọc đối tượng dựa trên giá trị trong JavaScript?

Để lọc các đối tượng trong JavaScript, áp dụng kết hợp các phương thức “filter()” và “search()” để tìm kiếm giá trị của đối tượng và lọc nó. Moreover, only the filter() can be utilized to filter out the property of an object based on the added conditions.

Bộ lọc () trong JavaScript là gì?

Phương thức filter() tạo một mảng mới chứa các phần tử vượt qua bài kiểm tra do hàm cung cấp . Phương thức filter() không thực thi hàm đối với phần tử rỗng. Phương thức filter() không thay đổi mảng ban đầu.