Cara menggunakan penapis es6()

Dalam es6, penapis() ialah kaedah penapisan tatasusunan Ia akan memanggil fungsi panggil balik untuk menapis elemen dalam tatasusunan dan mengembalikan semua elemen yang memenuhi syarat Sintaks "Array.filter(elemen [, indeks [, tatasusunan]])[, thisArg])". Kaedah penapis() mencipta tatasusunan baharu dan unsur-unsur dalam tatasusunan baharu diperiksa untuk semua elemen dalam tatasusunan tertentu yang memenuhi syarat.

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Kaedah penapis tatasusunan ialah salah satu kaedah yang paling banyak digunakan dalam JavaScript.

Ia membolehkan kami menapis keluar elemen dengan cepat dalam tatasusunan dengan keadaan tertentu.

Jadi, dalam artikel ini, anda akan mengetahui segala-galanya tentang kaedah penapis dan pelbagai kes penggunaannya.

Jadi mari kita mulakan.

Lihat kod di bawah tanpa menggunakan kaedah penapis:

const employees = [
  { name: 'David Carlson', age: 30 },
  { name: 'John Cena', age: 34 },
  { name: 'Mike Sheridan', age: 25 },
  { name: 'John Carte', age: 50 }
];
 
const filtered = [];
 
for(let i = 0; i  -1) {
   filtered.push(employees[i]);
 }
}
 
console.log(filtered); // [ { name: "John Cena", age: 34 }, { name: "John Carte", age: 50 }]

Dalam kod di atas, kami sedang mencari kod yang mempunyai JohnKami menggunakan nama kaedah indexOf untuk semua pekerja. Kod

untuk gelung kelihatan rumit kerana kita perlu menggelung secara manual melalui tatasusunan employees dan menolak pekerja yang sepadan ke dalam tatasusunan filtered.

Tetapi menggunakan kaedah penapisan tatasusunan, kita boleh memudahkan kod di atas.

Kaedah penapis tatasusunan()

kaedah penapis() mencipta tatasusunan baharu Unsur-unsur dalam tatasusunan baharu disemak dengan menyemak semua elemen dalam tatasusunan yang ditentukan itu memenuhi syarat. Sintaks untuk

kaedah penapis tatasusunan adalah seperti berikut:

Array.filter(callback(element[, index[, array]])[, thisArg])

Kaedah penapis tidak mengubah tatasusunan asal, tetapi mengembalikan tatasusunan baharu yang mengandungi semua elemen yang memenuhi syarat ujian yang disediakan . Kaedah penapis

mengambil fungsi panggil balik sebagai hujah pertama dan melaksanakan fungsi panggil balik untuk setiap elemen tatasusunan.

Pada setiap lelaran fungsi panggil balik, setiap nilai elemen tatasusunan dihantar ke fungsi panggil balik sebagai argumen pertama.

Lihat kod berikut menggunakan kaedah penapis:

const employees = [
  { name: 'David Carlson', age: 30 },
  { name: 'John Cena', age: 34 },
  { name: 'Mike Sheridan', age: 25 },
  { name: 'John Carte', age: 50 }
];
 
const filtered = employees.filter(function (employee) {
  return employee.name.indexOf('John') > -1;
});
 
console.log(filtered); // [ { name: "John Cena", age: 34 }, { name: "John Carte", age: 50 }]

Di sini, menggunakan kaedah penapis tatasusunan, kita tidak perlu menggelung secara manual melalui tatasusunan employees , dan tidak perlu filtered membuat tatasusunan terlebih dahulu untuk menapis pekerja yang sepadan.

Fahami penapis kaedah penapis()

Kaedah penapis menerima fungsi panggil balik dan setiap elemen tatasusunan diluluskan secara automatik sebagai parameter pertama dalam setiap lelaran gelung.

Andaikan kita mempunyai tatasusunan nombor berikut:

const numbers = [10, 40, 30, 25, 50, 70];

Dan kita ingin mencari semua elemen yang lebih besar daripada 30, maka kita boleh menggunakan kaedah penapis seperti yang ditunjukkan di bawah:

const numbers = [10, 40, 30, 25, 50, 70];

const filtered = numbers.filter(function(number) {
  return number > 30;
});

console.log(filtered); // [40, 50, 70]

Jadi di dalam fungsi panggil balik, pada lelaran pertama gelung, nilai elemen pertama 10 dalam tatasusunan akan diluluskan sebagai nilai parameter number dan 10 > ; 30 adalah palsu, jadi nombor 10 tidak dianggap padanan.

Kaedah penapis tatasusunan mengembalikan tatasusunan, jadi 10 tidak lebih daripada 30, ia tidak akan ditambahkan pada senarai filtered tatasusunan.

Kemudian pada lelaran gelung seterusnya, elemen seterusnya dalam tatasusunan, 40, akan dihantar ke fungsi panggil balik sebagai nilai parameter number dan apabila 40 > 30 adalah benar dianggap padanan dan ditambah Pada filtered dalam kuantiti yang banyak.

Ini akan berterusan sehingga semua elemen dalam tatasusunan belum melengkapkan gelung.

Oleh itu, selagi fungsi panggil balik mengembalikan nilai false, elemen tidak akan ditambahkan pada tatasusunan yang ditapis. Kaedah penapis mengembalikan tatasusunan yang mengandungi hanya elemen yang fungsi panggil balik mengembalikan nilai true.

Anda boleh melihat nilai semasa elemen yang dihantar ke fungsi panggil balik pada setiap lelaran gelung jika anda log nilai ke konsol:

const numbers = [10, 40, 30, 25, 50, 70];
 
const filtered = numbers.filter(function(number) {
  console.log(number, number > 30);
  return number > 30;
});
 
console.log(filtered); // [40, 50, 70]
 
/* output
10 false
40 true
30 false
25 false
50 true
70 true
[40, 50, 70]
*/

Sekarang, lihat kod berikut:

const checkedState = [true, false, false, true, true];
 
const onlyTrueValues = checkedState.filter(function(value) {
  return value === true;
});
 
console.log(onlyTrueValues); // [true, true, true]

Dalam kod di atas, kami hanya mengetahui nilai-nilai itu iaitu true .

回调函数可以如上所示编写，也可以使用箭头函数如下所示：

const onlyTrueValues = checkedState.filter(value => {
  return value === true;
});

而如果箭头函数中只有一条语句，我们可以跳过return关键字，隐式返回值，如下：

const onlyTrueValues = checkedState.filter(value => value === true);

上面的代码可以进一步简化为：

const onlyTrueValues = checkedState.filter(Boolean);

要了解它是如何工作的，请查看我的这篇文章。

回调函数参数

除了数组的实际元素外，传递给 filter 方法的回调函数还接收以下参数：

• 我们正在循环的index数组中当前元素的
• array我们循环播放的原版

看看下面的代码：

const checkedState = [true, false, false, true, true];

checkedState.filter(function(value, index, array) {
  console.log(value, index, array);
  return value === true;
});

/* output

true   0  [true, false, false, true, true]
false  1  [true, false, false, true, true]
false  2  [true, false, false, true, true]
true   3  [true, false, false, true, true]
true   4  [true, false, false, true, true]

*/

过滤方法的用例

正如您在上面看到的，数组过滤器方法对于过滤掉数组中的数据很有用。

但是过滤器方法在一些实际用例中也很有用，例如从数组中删除重复项，分离两个数组之间的公共元素等。

从数组中删除元素

filter 方法最常见的用例是从数组中删除特定元素。

const users = [
  {name: 'David', age: 35},
  {name: 'Mike', age: 30},
  {name: 'John', age: 28},
  {name: 'Tim', age: 48}
];

const userToRemove = 'John';

const updatedUsers = users.filter(user => user.name !== userToRemove);

console.log(updatedUsers);

/* output

[
  {name: 'David', age: 35},
  {name: 'Mike', age: 30},
  {name: 'Tim', age: 48}
]

*/

在这里，我们从users名称为 的数组中删除用户John。

userToRemove因此，在回调函数中，我们正在检查保留名称与存储在变量中的名称不匹配的用户的条件。

从数组中查找唯一或重复项

const numbers = [10, 20, 10, 30, 10, 30, 50, 70];

const unique = numbers.filter((value, index, array) => {
  return array.indexOf(value) === index;
})

console.log(unique); // [10, 20, 30, 50, 70]

const duplicates = numbers.filter((value, index, array) => {
  return array.indexOf(value) !== index;
})

console.log(duplicates); // [10, 10, 30]

该indexOf方法返回第一个匹配元素的索引，因此，在上面的代码中，我们正在检查我们正在循环的元素的当前索引是否与第一个匹配元素的索引匹配，以找出唯一和重复元素.

查找两个数组之间的不同值

const products1 = ["books","shoes","t-shirt","mobile","jackets"];

const products2 = ["t-shirt", "mobile"];

const filteredProducts = products1.filter(product => products2.indexOf(product) === -1);

console.log(filteredProducts); // ["books", "shoes", "jackets"]

在这里，我们products1使用 filter 方法循环，在回调函数中，我们正在检查products2数组是否包含我们使用 arrayindexOf方法循环的当前元素。

如果该元素不匹配，则条件为真，该元素将被添加到filteredProducts数组中。

您还可以使用数组includes方法来实现相同的功能：

const products1 = ["books","shoes","t-shirt","mobile","jackets"];

const products2 = ["t-shirt", "mobile"];

const filteredProducts = products1.filter(product => !products2.includes(product));

console.log(filteredProducts); // ["books", "shoes", "jackets"]

浏览器对过滤方法的支持

• 所有现代浏览器和 Internet Explorer (IE) 版本 9 及更高版本
• Microsoft Edge 版本 12 及更高版本

【相关推荐：web前端开发】

Atas ialah kandungan terperinci Cara menggunakan penapis es6(). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!