Maison  >  Article  >  interface Web  >  Quelle est la fonction du filtre dans es6

Quelle est la fonction du filtre dans es6

青灯夜游
青灯夜游original
2023-01-29 14:41:081187parcourir

Dans es6, le filtre filtre filtre les éléments du tableau et renvoie un nouveau tableau. La fonction filter() crée un nouveau tableau contenant tous les éléments du test implémentés via la fonction de rappel fournie, la syntaxe "arr.filter(callback(element[, index[, array]])[, thisArg])" if If If aucun élément du tableau ne réussit le test, un tableau vide est renvoyé.

Quelle est la fonction du filtre dans es6

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

filter dans ES6

la fonction filtre est communément appelée filtre Fonction : filtre les éléments du tableau et renvoie un nouveau tableau ; éléments du test mis en œuvre par la fonction.

var sexData=["男","女","女","男","女"];
var filter2=sexData.filter(function(sex){
	return sex==="女"
})

//console.log(filter2)    ["女", "女", "女"]
var porducts = [
	{name: 'apple',type: 'red'} ,
	{name: 'orange',type: 'orange'},
	{name: 'banana',type: 'yellow'},
	{name: 'mango',type: 'yellow'}
];
var filter2=porducts.filter(function(item){
	return item.type==='yellow'
})
//console.log(filter2)
//0: {name: "banana", type: "yellow"}1: {name: "mango", type: "yellow"}

Syntaxe

var newArray = arr.filter(
  callback(element[, index[, array]])[, thisArg]
)
Paramètres

    callback : fonction de rappel
  • element : les données en cours de traitement dans le tableau arr
  • index : l'indice de l'élément facultatif
  • tableau : Le tableau lui-même qui a appelé le filtre, facultatif
  • thisArg : La valeur utilisée pour cela lors de l'exécution du rappel, facultatif
  • Valeur de retour

    Un nouveau tableau composé d'éléments qui ont réussi le test, si aucun élément du tableau ne réussit le test, un tableau vide est renvoyé.
  • Description

    filter appelle la fonction de rappel une fois pour chaque élément du tableau et crée un nouveau tableau avec tous les éléments pour lesquels le rappel renvoie vrai ou une valeur équivalente à vrai. le rappel ne sera appelé que sur les index auxquels des valeurs ont été attribuées, et ne sera pas appelé sur les index qui ont été supprimés ou n'ont jamais reçu de valeurs. Les éléments qui échouent au test de rappel seront ignorés et ne seront pas inclus dans le nouveau tableau.
  • Trois paramètres sont transmis lors de l'appel du rappel : la valeur de l'élément, l'index de l'élément et le tableau lui-même parcouru
  • Si un paramètre thisArg est fourni pour le filtre, il sera utilisé comme valeur this lorsque le rappel est appelé. Sinon, la valeur this du rappel sera l'objet global en mode non strict et non défini en mode strict. La valeur de this éventuellement observée par la fonction de rappel est déterminée selon les règles de "this" vues par la fonction normale.


  • filter ne modifie pas le tableau d'origine, il renvoie le nouveau tableau filtré.
  • filter La plage d'éléments traversés a été déterminée avant que le rappel ne soit appelé pour la première fois. Les éléments ajoutés au tableau après l'appel du filtre ne seront pas traversés par le filtre. Si des éléments existants ont été modifiés, les valeurs qu'ils transmettent en rappel sont les valeurs au moment où le filtre les traverse. Les éléments supprimés ou n'ayant jamais reçu de valeur ne seront pas traversés.
Utilisation spéciale :

1. Supprimer les chaînes vides, non définies, null

array.filter((value, index, arr) => {value})

2. Déduplication de tableau

array.filter((value, index, arr) => {arr.indexOf(value) === index})

Exemple

1 Filtrer les entrées invalides dans JSON

Exemple d'utilisation de filter() crée. json d'éléments avec des identifiants non nuls.

var arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: 'undefined' }];var invalidEntries = 0;function isNumber(obj) {
  return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj);}function filterByID(item) {
  if (isNumber(item.id) && item.id !== 0) {
    return true;
  } 
  invalidEntries++;
  return false; }var 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

2. Supprimez les chaînes vides, non définies, null

//2. 去掉空字符串、undefined、null
var porducts = [
	{name:''},
	{name:"哈哈"}
];
var filter2=porducts.filter(function(item){
	return item.name
})
//console.log(filter2)    
//打印得出  0: {name: "哈哈"}

3 Supprimez les doublons des tableaux

//3. 数组去重
array.filter((value, index, arr) => {arr.indexOf(value) === index})
var porducts = ['苹果','香蕉','苹果','芒果']
var filter2=porducts.filter(function(item,index,porducts){
	return porducts.indexOf(item)==index
})
//console.log(filter2)
// ["苹果", "香蕉", "芒果"]

[Apprentissage recommandé :

Tutoriel avancé javascript

].

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn