In es6, the filter filter filters array elements and returns a new array. The filter() function creates a new array containing all elements of the test implemented through the provided callback function, the syntax "arr.filter(callback(element[, index[, array]])[, thisArg])"; if If no array elements pass the test, an empty array is returned.
The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.
filter filter in ES6
The filter function is commonly known as filter. Function: Filters array elements and returns a new array ;
filter() method creates a new array containing all elements of the test implemented by the provided function.
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"}
Syntax
var newArray = arr.filter( callback(element[, index[, array]])[, thisArg] )
Parameters
callback: callback function
element: the data being processed in the arr array
index: the subscript of element, optional
array: the array in which filter was called itself, optional
thisArg: the value used for this when executing callback, optional
return value
A new array consisting of elements that pass the test. If no array element passes the test, an empty array is returned.
Description
#filter calls the callback function once for each element in the array, and uses all elements to make the callback return true or equivalent to true Creates a new array with the elements of the value. callback will only be called on indexes that have been assigned values, and will not be called on indexes that have been deleted or have never been assigned values. Elements that fail the callback test will be skipped and will not be included in the new array.
When callback is called, three parameters are passed in: the value of the element, the index of the element, and the array itself being traversed
If a thisArg parameter is provided for filter, it will be As the value of this when the callback is called. Otherwise, the callback's this value will be the global object in non-strict mode and undefined in strict mode. The value of this eventually observed by the callback function is determined according to the rules of "this" seen by the normal function.
filter does not change the original array, it returns a new filtered array.
filter The range of elements traversed has been determined before callback is called for the first time. Elements added to the array after calling filter will not be traversed by filter. If existing elements have been changed, the values they pass into callback are the values at the moment when filter traverses them. Elements that have been deleted or have never been assigned a value will not be traversed.
Special usage:
1. Remove empty strings, undefined, null
array.filter((value, index, arr) => {value})
2. Array deduplication
array.filter((value, index, arr) => {arr.indexOf(value) === index})
Example
1. Filter invalid entries in JSON
The following example uses filter() to create a json of elements with non-zero ids.
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. Remove empty strings, undefined, and null
//2. 去掉空字符串、undefined、null var porducts = [ {name:''}, {name:"哈哈"} ]; var filter2=porducts.filter(function(item){ return item.name }) //console.log(filter2) //打印得出 0: {name: "哈哈"}
3. Remove duplicates from arrays
//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) // ["苹果", "香蕉", "芒果"]
[Recommended learning:javascript advanced tutorial】
The above is the detailed content of What is the function of filter in es6. For more information, please follow other related articles on the PHP Chinese website!