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
// 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 arrayPengantar 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 metodeSalah 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 danlet 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)4let 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 inilet 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 bersihContoh 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 arraylet 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 elemenDi 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);
[ { 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 callbackDimulai 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)1arrayObject.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)5Secara 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 pengembalianMetode
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 opsionalSeperti metode berulang lainnya dari objek Array seperti
let bigCities = cities.filter(function (e) { return e.population > 3000000; }); console.log(bigCities);
Code language: JavaScript (javascript)2let bigCities = cities.filter(function (e) { return e.population > 3000000; }); console.log(bigCities);
Code language: JavaScript (javascript)3let bigCities = cities.filter(function (e) { return e.population > 3000000; }); console.log(bigCities);
Code language: JavaScript (javascript)4 danlet 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 berikutfunction callback(currentElement, index, array){ // ... }
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 darilet 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 danlet bigCities = cities.filter(city => city.population > 3000000); console.log(bigCities);
Code language: JavaScript (javascript)3 bersifat opsionalArgumen
let bigCities = cities.filter(city => city.population > 3000000); console.log(bigCities);
Code language: JavaScript (javascript)_6 dari metodelet 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 nilailet bigCities = cities.filter(city => city.population > 3000000); console.log(bigCities);
Code language: JavaScript (javascript)8, Anda dapat mereferensikannya dengan menggunakan kata kuncilet 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)7Penting 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 asliLebih 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)1Karena 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 sepertiarrayObject.filter(callback, contextObject);
Code language: CSS (css)4 danarrayObject.filter(callback, contextObject);
Code language: CSS (css)5Sebagai contoh, berikut ini mengilustrasikan cara merangkai ketiga metode tersebut.
arrayObject.filter(callback, contextObject);
Code language: CSS (css)6 danarrayObject.filter(callback, contextObject);
Code language: CSS (css)7cities .filter(city => city.population < 3000000) .sort((c1, c2) => c1.population - c2.population) .map(city => console.log(city.name + ':' + city.population));
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 kuncilet bigCities = cities.filter(city => city.population > 3000000); console.log(bigCities);
Code language: JavaScript (javascript)8function 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)_0Bagaimana 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 propertifunction callback(currentElement, index, array){ // ... }
Code language: JavaScript (javascript)5 danfunction 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 propertifunction callback(currentElement, index, array){ // ... }
Code language: JavaScript (javascript)5 danfunction 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 arraycities .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 fungsifunction callback(currentElement, index, array){ // ... }
Code language: JavaScript (javascript)4 dan objekfunction callback(currentElement, index, array){ // ... }
Code language: JavaScript (javascript)7. Karena kita meneruskan objekfunction callback(currentElement, index, array){ // ... }
Code language: JavaScript (javascript)_7, di dalam fungsifunction callback(currentElement, index, array){ // ... }
Code language: JavaScript (javascript)4, kata kuncilet bigCities = cities.filter(city => city.population > 3000000); console.log(bigCities);
Code language: JavaScript (javascript)8 merujuk ke objekfunction 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