這篇“es6中filter過(guò)濾器怎么使用”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“es6中filter過(guò)濾器怎么使用”文章吧。

創(chuàng)新互聯(lián)建站服務(wù)項(xiàng)目包括北湖網(wǎng)站建設(shè)、北湖網(wǎng)站制作、北湖網(wǎng)頁(yè)制作以及北湖網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，北湖網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶(hù)以成都為中心已經(jīng)輻射到北湖省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶(hù)的支持與信任！

在es6中，filter過(guò)濾器對(duì)數(shù)組元素進(jìn)行過(guò)濾并返回一個(gè)新的數(shù)組。filter()函數(shù)會(huì)創(chuàng)建一個(gè)新數(shù)組，其包含通過(guò)所提供回調(diào)函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素，語(yǔ)法“arr.filter(callback(element[, index[, array]])[, thisArg])”；如果沒(méi)有任何數(shù)組元素通過(guò)測(cè)試，則返回空數(shù)組。

ES6中的filter過(guò)濾器

filter函數(shù)俗稱(chēng)過(guò)濾器，函數(shù)作用：對(duì)數(shù)組元素進(jìn)行過(guò)濾并返回一個(gè)新的數(shù)組；

filter() 方法創(chuàng)建一個(gè)新數(shù)組, 其包含通過(guò)所提供函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素。

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"}

語(yǔ)法

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

參數(shù)

• callback：回調(diào)函數(shù)

• element：arr數(shù)組中正在被處理的數(shù)據(jù)

• index：element的下標(biāo)，可選

• array：調(diào)用了 filter 的數(shù)組本身，可選

• thisArg：執(zhí)行 callback 時(shí)，用于 this 的值,可選

返回值

• 一個(gè)新的、由通過(guò)測(cè)試的元素組成的數(shù)組，如果沒(méi)有任何數(shù)組元素通過(guò)測(cè)試，則返回空數(shù)組。

描述

• filter 為數(shù)組中的每個(gè)元素調(diào)用一次 callback 函數(shù)，并利用所有使得 callback 返回 true 或等價(jià)于 true 的值的元素創(chuàng)建一個(gè)新數(shù)組。callback 只會(huì)在已經(jīng)賦值的索引上被調(diào)用，對(duì)于那些已經(jīng)被刪除或者從未被賦值的索引不會(huì)被調(diào)用。那些沒(méi)有通過(guò) callback 測(cè)試的元素會(huì)被跳過(guò)，不會(huì)被包含在新數(shù)組中。

• callback 被調(diào)用時(shí)傳入三個(gè)參數(shù)： 元素的值、元素的索引、被遍歷的數(shù)組本身
  如果為 filter 提供一個(gè) thisArg 參數(shù)，則它會(huì)被作為 callback 被調(diào)用時(shí)的 this 值。否則，callback 的 this 值在非嚴(yán)格模式下將是全局對(duì)象，嚴(yán)格模式下為 undefined。callback 函數(shù)最終觀察到的 this 值是根據(jù)通常函數(shù)所看到的 "this"的規(guī)則確定的。

• filter 不會(huì)改變?cè)瓟?shù)組，它返回過(guò)濾后的新數(shù)組。

• filter 遍歷的元素范圍在第一次調(diào)用 callback 之前就已經(jīng)確定了。在調(diào)用 filter 之后被添加到數(shù)組中的元素不會(huì)被 filter 遍歷到。如果已經(jīng)存在的元素被改變了，則他們傳入 callback 的值是 filter 遍歷到它們那一刻的值。被刪除或從來(lái)未被賦值的元素不會(huì)被遍歷到。

特殊用法：

  1. 去掉空字符串、undefined、null

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

  2. 數(shù)組去重

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

例子

1、過(guò)濾 JSON 中的無(wú)效條目

以下示例使用 filter() 創(chuàng)建具有非零 id 的元素的 json。

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、去掉空字符串、undefined、null

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

3、數(shù)組去重

//3. 數(shù)組去重
array.filter((value, index, arr) => {arr.indexOf(value) === index})
var porducts = ['蘋(píng)果','香蕉','蘋(píng)果','芒果']
var filter2=porducts.filter(function(item,index,porducts){
	return porducts.indexOf(item)==index
})
//console.log(filter2)
// ["蘋(píng)果", "香蕉", "芒果"]

以上就是關(guān)于“es6中filter過(guò)濾器怎么使用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。