What is the function of filter in es6

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!