Bagaimana Anda memfilter array objek dalam javascript berdasarkan nilai properti?

Question

Metode Array.prototype.filter()_ mengembalikan array baru dengan semua elemen yang memenuhi kondisi dalam fungsi panggilan balik yang disediakan. Oleh karena itu, Anda dapat menggunakan metode ini untuk memfilter array objek berdasarkan nilai properti tertentu, misalnya dengan cara berikut

Table of Contents Show

Menggunakan Lingkaran
Pengantar array JavaScript let bigCities = []; for (let i = 0; i < cities.length; i++) { if (cities[i].population > 3000000) { bigCities.push(cities[i]); } } console.log(bigCities);Code language: JavaScript (javascript)1 metode
metode JavaScript Array filter() secara detail
Lebih banyak contoh metode JavaScript Array let bigCities = []; for (let i = 0; i < cities.length; i++) { if (cities[i].population > 3000000) { bigCities.push(cities[i]); } } console.log(bigCities);Code language: JavaScript (javascript)1
Bagaimana Anda memfilter array berdasarkan properti?
Bagaimana Anda memfilter array objek berdasarkan kunci?
Bagaimana kita bisa mendapatkan objek dari array objek berdasarkan nilai properti di JS?
Bagaimana Anda menemukan nilai spesifik dari array objek?

// ES5+
const employees = [
    { name: 'John', department: 'sales' },
    { name: 'Wayne', department: 'marketing' },
    { name: 'David', department: 'IT' },
    { name: 'Bruce', department: 'marketing' },
];

const filtered = employees.filter(function (emp) {
    return emp.department === 'marketing'
});

console.log(filtered);
/* [
    {name: "Wayne", department: "marketing"},
    {name: "Bruce", department: "marketing"}
] */

Jika kecocokan tidak ditemukan maka metode Array.prototype.filter() akan mengembalikan array kosong

Dengan fungsi panah ES6, Anda dapat sedikit mempersingkat sintaks, misalnya seperti itu

// ES6+
// ...
const filtered = employees.filter((emp) => emp.department === 'marketing');
// ...

_

Di ES6+, Anda juga bisa langsung membongkar objek dalam argumen fungsi panggilan balik, misalnya, seperti itu

// ES6+
// ...
const filtered = employees.filter(({ department }) => department === 'marketing');
// ...

Menggunakan Lingkaran

Jika Anda tidak dapat mendukung ES5, Anda cukup menggunakan perulangan (seperti perulangan for) untuk mengulangi larik objek dan mengisi larik baru dengan elemen yang ingin Anda pertahankan. Sebagai contoh

const employees = [
    { name: 'John', department: 'sales' },
    { name: 'Wayne', department: 'marketing' },
    { name: 'David', department: 'IT' },
    { name: 'Bruce', department: 'marketing' },
];

const match = [];

for (let i = 0; i < employees.length; i++) {
    if (employees[i].department === 'marketing') {
        match.push(employees[i]);
    }
}

console.log(match);
/* [
    {name: "Wayne", department: "marketing"},
    {name: "Bruce", department: "marketing"}
] */

Jika kecocokan tidak ditemukan maka "match" akan menjadi array kosong

Semoga postingan ini bermanfaat bagi Anda. Itu diterbitkan 05 Juni 2021. Tolong tunjukkan cinta dan dukungan Anda dengan

Ringkasan. dalam tutorial ini, Anda akan belajar cara menggunakan metode JavaScript Array

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);
Code language: JavaScript (javascript)

1 untuk memfilter elemen dalam array

Pengantar array JavaScript let bigCities = []; for (let i = 0; i < cities.length; i++) { if (cities[i].population > 3000000) { bigCities.push(cities[i]); } } console.log(bigCities);Code language: JavaScript (javascript)1 metode

Salah satu tugas paling umum saat bekerja dengan array adalah membuat array baru yang berisi subset elemen dari array asli

Misalkan Anda memiliki larik objek kota di mana setiap objek berisi dua properti.

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);
Code language: JavaScript (javascript)

3 dan

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);
Code language: JavaScript (javascript)

4

let cities = [
    {name: 'Los Angeles', population: 3792621},
    {name: 'New York', population: 8175133},
    {name: 'Chicago', population: 2695598},
    {name: 'Houston', population: 2099451},
    {name: 'Philadelphia', population: 1526006}
];
Code language: JavaScript (javascript)

_

Untuk menemukan kota yang populasinya lebih dari 3 juta, Anda biasanya mengulang elemen array menggunakan for loop dan menguji apakah nilai properti

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);
Code language: JavaScript (javascript)

4 memenuhi kondisi, seperti ini

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);
Code language: JavaScript (javascript)

_

Keluaran

[
  { name: 'Los Angeles', population: 3792621 },
  { name: 'New York', population: 8175133 }
]
Code language: JavaScript (javascript)

JavaScript Array menyediakan metode

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);
Code language: JavaScript (javascript)

_1 yang memungkinkan Anda melakukan tugas ini dengan cara yang lebih singkat dan lebih bersih

Contoh berikut mengembalikan hasil yang sama seperti contoh di atas

let bigCities = cities.filter(function (e) {
    return e.population > 3000000;
});
console.log(bigCities);
Code language: JavaScript (javascript)

Dalam contoh ini, kita memanggil metode

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);
Code language: JavaScript (javascript)

_1 dari objek array

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);
Code language: JavaScript (javascript)

8 dan meneruskan fungsi yang menguji setiap elemen

Di dalam fungsi, kami memeriksa apakah

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);
Code language: JavaScript (javascript)

_4 setiap kota dalam larik lebih besar dari 3 juta. Jika demikian, fungsi mengembalikan

[
  { name: 'Los Angeles', population: 3792621 },
  { name: 'New York', population: 8175133 }
]
Code language: JavaScript (javascript)

0 atau

[
  { name: 'Los Angeles', population: 3792621 },
  { name: 'New York', population: 8175133 }
]
Code language: JavaScript (javascript)

1 sebaliknya.

Metode

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);
Code language: JavaScript (javascript)

1 menyertakan satu-satunya elemen dalam larik hasil jika memenuhi pengujian dalam fungsi callback

Dimulai dengan ES6, Anda dapat menggunakan fungsi panah agar lebih ringkas

let bigCities = cities.filter(city => city.population > 3000000);

console.log(bigCities);
Code language: JavaScript (javascript)

metode JavaScript Array filter() secara detail

Berikut ini mengilustrasikan sintaks metode

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);
Code language: JavaScript (javascript)

1

arrayObject.filter(callback, contextObject);
Code language: CSS (css)

Metode

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);
Code language: JavaScript (javascript)

1 membuat larik baru dengan semua elemen yang lolos uji yang diimplementasikan oleh fungsi

[
  { name: 'Los Angeles', population: 3792621 },
  { name: 'New York', population: 8175133 }
]
Code language: JavaScript (javascript)

5

Secara internal, metode

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);
Code language: JavaScript (javascript)

1 mengulang setiap elemen array dan meneruskan setiap elemen ke fungsi

[
  { name: 'Los Angeles', population: 3792621 },
  { name: 'New York', population: 8175133 }
]
Code language: JavaScript (javascript)

7 . Jika fungsi

[
  { name: 'Los Angeles', population: 3792621 },
  { name: 'New York', population: 8175133 }
]
Code language: JavaScript (javascript)

_7 mengembalikan

[
  { name: 'Los Angeles', population: 3792621 },
  { name: 'New York', population: 8175133 }
]
Code language: JavaScript (javascript)

0, fungsi tersebut menyertakan elemen dalam larik pengembalian

Metode

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);
Code language: JavaScript (javascript)

1 menerima dua argumen bernama. fungsi

[
  { name: 'Los Angeles', population: 3792621 },
  { name: 'New York', population: 8175133 }
]
Code language: JavaScript (javascript)

_7 dan objek opsional

Seperti metode berulang lainnya dari objek Array seperti

let bigCities = cities.filter(function (e) {
    return e.population > 3000000;
});
console.log(bigCities);
Code language: JavaScript (javascript)

2

let bigCities = cities.filter(function (e) {
    return e.population > 3000000;
});
console.log(bigCities);
Code language: JavaScript (javascript)

3

let bigCities = cities.filter(function (e) {
    return e.population > 3000000;
});
console.log(bigCities);
Code language: JavaScript (javascript)

4 dan

let bigCities = cities.filter(function (e) {
    return e.population > 3000000;
});
console.log(bigCities);
Code language: JavaScript (javascript)

5 fungsi

[
  { name: 'Los Angeles', population: 3792621 },
  { name: 'New York', population: 8175133 }
]
Code language: JavaScript (javascript)

7 memiliki bentuk berikut

function callback(currentElement, index, array){
   // ...
}
Code language: JavaScript (javascript)

Fungsi

[
  { name: 'Los Angeles', population: 3792621 },
  { name: 'New York', population: 8175133 }
]
Code language: JavaScript (javascript)

_7 membutuhkan tiga argumen

Argumen

let bigCities = cities.filter(function (e) {
    return e.population > 3000000;
});
console.log(bigCities);
Code language: JavaScript (javascript)

_8 adalah elemen saat ini dalam larik yang sedang diproses oleh fungsi

[
  { name: 'Los Angeles', population: 3792621 },
  { name: 'New York', population: 8175133 }
]
Code language: JavaScript (javascript)

7

let bigCities = cities.filter(city => city.population > 3000000);

console.log(bigCities);
Code language: JavaScript (javascript)

_0 dari

let bigCities = cities.filter(function (e) {
    return e.population > 3000000;
});
console.log(bigCities);
Code language: JavaScript (javascript)

8 yang sedang diproses oleh fungsi

[
  { name: 'Los Angeles', population: 3792621 },
  { name: 'New York', population: 8175133 }
]
Code language: JavaScript (javascript)

7

Objek

let bigCities = cities.filter(city => city.population > 3000000);

console.log(bigCities);
Code language: JavaScript (javascript)

_3 sedang dilalui

Argumen

let bigCities = cities.filter(city => city.population > 3000000);

console.log(bigCities);
Code language: JavaScript (javascript)

0 dan

let bigCities = cities.filter(city => city.population > 3000000);

console.log(bigCities);
Code language: JavaScript (javascript)

3 bersifat opsional

Argumen

let bigCities = cities.filter(city => city.population > 3000000);

console.log(bigCities);
Code language: JavaScript (javascript)

_6 dari metode

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);



Code language: JavaScript (javascript)

1 adalah opsional. Jika Anda meneruskan nilai

let bigCities = cities.filter(city => city.population > 3000000);

console.log(bigCities);
Code language: JavaScript (javascript)

8, Anda dapat mereferensikannya dengan menggunakan kata kunci

let bigCities = cities.filter(city => city.population > 3000000);

console.log(bigCities);
Code language: JavaScript (javascript)

8 di dalam fungsi

[
  { name: 'Los Angeles', population: 3792621 },
  { name: 'New York', population: 8175133 }
]
Code language: JavaScript (javascript)

7

Penting untuk dicatat bahwa metode

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);
Code language: JavaScript (javascript)

_1 tidak mengubah array asli

Lebih banyak contoh metode JavaScript Array let bigCities = []; for (let i = 0; i < cities.length; i++) { if (cities[i].population > 3000000) { bigCities.push(cities[i]); } } console.log(bigCities);Code language: JavaScript (javascript)1

Karena metode

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);
Code language: JavaScript (javascript)

_1 mengembalikan array baru, Anda dapat mengaitkan hasilnya dengan metode array lain seperti

arrayObject.filter(callback, contextObject);
Code language: CSS (css)

4 dan

arrayObject.filter(callback, contextObject);
Code language: CSS (css)

5

Sebagai contoh, berikut ini mengilustrasikan cara merangkai ketiga metode tersebut.

arrayObject.filter(callback, contextObject);
Code language: CSS (css)

6 dan

arrayObject.filter(callback, contextObject);
Code language: CSS (css)

7

cities
    .filter(city => city.population < 3000000)
    .sort((c1, c2) => c1.population - c2.population)
    .map(city => console.log(city.name + ':' + city.population));
Code language: JavaScript (javascript)

Keluaran

Philadelphia:1526006
Houston:2099451
Chicago:2695598
Code language: CSS (css)

Bagaimana itu bekerja

Pertama, filter kota yang populasinya kurang dari 3 juta menggunakan metode

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);
Code language: JavaScript (javascript)

1

Kedua, urutkan kota yang dihasilkan berdasarkan populasi dalam urutan menurun menggunakan metode
```
arrayObject.filter(callback, contextObject);
Code language: CSS (css)
```
9

Ketiga, keluarkan elemen array ke konsol menggunakan metode

let bigCities = cities.filter(function (e) {
    return e.population > 3000000;
});
console.log(bigCities);
Code language: JavaScript (javascript)

4

Contoh berikut mengilustrasikan penggunaan argumen

function callback(currentElement, index, array){
   // ...
}
Code language: JavaScript (javascript)

_1 yang menentukan objek yang dapat dirujuk dalam fungsi

[
  { name: 'Los Angeles', population: 3792621 },
  { name: 'New York', population: 8175133 }
]



Code language: JavaScript (javascript)

5 menggunakan kata kunci

let bigCities = cities.filter(city => city.population > 3000000);

console.log(bigCities);
Code language: JavaScript (javascript)

8

function isInRange(value) {
    if (typeof value !== 'number') {
        return false;
    }
    return value >= this.lower && value <= this.upper;
}

let data = [10, 20, "30", 1, 5, 'JavaScript filter', undefined, 'example'];

let range = {
    lower: 1,
    upper: 10
};

let numberInRange = data.filter(isInRange, range);

console.log(numberInRange); // [10, 1, 5]
Code language: JavaScript (javascript)

Keluaran

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);
Code language: JavaScript (javascript)

_0

Bagaimana itu bekerja

Pertama, tentukan fungsi

function callback(currentElement, index, array){
   // ...
}
Code language: JavaScript (javascript)

4 yang memeriksa apakah argumennya adalah angka dan dalam rentang yang ditentukan oleh properti

function callback(currentElement, index, array){
   // ...
}
Code language: JavaScript (javascript)

5 dan

function callback(currentElement, index, array){
   // ...
}
Code language: JavaScript (javascript)

6 dari suatu objek

Selanjutnya, tentukan larik data campuran yang berisi , , dan

Kemudian, tentukan objek

function callback(currentElement, index, array){
   // ...
}
Code language: JavaScript (javascript)

_7 dengan dua properti

function callback(currentElement, index, array){
   // ...
}
Code language: JavaScript (javascript)

5 dan

function callback(currentElement, index, array){
   // ...
}
Code language: JavaScript (javascript)

6

Setelah itu, panggil metode

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);
Code language: JavaScript (javascript)

1 dari array

cities
    .filter(city => city.population < 3000000)
    .sort((c1, c2) => c1.population - c2.population)
    .map(city => console.log(city.name + ':' + city.population));
Code language: JavaScript (javascript)

1 dan berikan fungsi

function callback(currentElement, index, array){
   // ...
}
Code language: JavaScript (javascript)

4 dan objek

function callback(currentElement, index, array){
   // ...
}
Code language: JavaScript (javascript)

7. Karena kita meneruskan objek

function callback(currentElement, index, array){
   // ...
}
Code language: JavaScript (javascript)

_7, di dalam fungsi

function callback(currentElement, index, array){
   // ...
}
Code language: JavaScript (javascript)

4, kata kunci

let bigCities = cities.filter(city => city.population > 3000000);

console.log(bigCities);
Code language: JavaScript (javascript)

8 merujuk ke objek

function callback(currentElement, index, array){
   // ...
}
Code language: JavaScript (javascript)

7

Terakhir, tampilkan larik hasil di konsol

Dalam tutorial ini, Anda telah mempelajari cara menggunakan metode JavaScript Array

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);
Code language: JavaScript (javascript)

1 untuk memfilter elemen dalam array berdasarkan pengujian yang disediakan oleh fungsi callback

Bagaimana Anda memfilter array berdasarkan properti?

Untuk memfilter larik objek berdasarkan properti. .

Gunakan Larik. filter() metode untuk beralih di atas array

Pada setiap iterasi, periksa apakah properti objek mengarah ke nilai yang ditentukan

Array. metode filter() akan mengembalikan array dengan semua objek yang memenuhi syarat

Bagaimana Anda memfilter array objek berdasarkan kunci?

keys() untuk memfilter Objek. Setelah membuat kunci, Anda dapat menggunakan filter() untuk mengulangi nilai yang ada dan mengembalikan nilai yang memenuhi kriteria yang ditentukan . Terakhir, Anda dapat menggunakan reduce() untuk mengumpulkan kunci yang difilter dan nilainya ke objek baru, misalnya.

Bagaimana kita bisa mendapatkan objek dari array objek berdasarkan nilai properti di JS?

Anda cukup menggunakan metode find() untuk menemukan objek berdasarkan nilai properti dalam larik objek dalam JavaScript. Metode find() mengembalikan elemen pertama dalam larik tertentu yang memenuhi fungsi pengujian yang disediakan. Jika tidak ada nilai yang memenuhi fungsi pengujian, undefined dikembalikan.