ホームページ > 記事 > ウェブフロントエンド > es6のフィルターの機能は何ですか?
es6 では、フィルター filter は配列要素をフィルター処理し、新しい配列を返します。 filter() 関数は、提供されたコールバック関数、構文 "arr.filter(callback(element[,index[,array]])[,thisArg])" によって実装されたテストのすべての要素を含む新しい配列を作成します。配列要素がテストに合格しない場合は、空の配列が返されます。
このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。
ES6 のフィルター フィルター
フィルター関数は一般にフィルターとして知られています。機能: 配列要素をフィルターし、新しい配列を返します。
filter() メソッドは、提供された関数によって実装されたテストのすべての要素を含む新しい配列を作成します。
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"}
構文
var newArray = arr.filter( callback(element[, index[, array]])[, thisArg] )
パラメータ
callback: コールバック関数
element: arr 配列で処理されるデータ
index: 要素の添字、オプション
array: フィルターが含まれていた配列それ自体を呼び出します、オプション
#thisArg: コールバックの実行時にこれに使用される値、オプション
#戻り値
thisArg パラメータが指定されている場合フィルターの場合、コールバックが呼び出されたときの this の値になります。それ以外の場合、コールバックの this 値は、非厳密モードではグローバル オブジェクトになり、厳密モードでは未定義になります。最終的にコールバック関数によって観察される this の値は、通常の関数によって見られる "this" の規則に従って決定されます。
特別な使用法:
1. 空の文字列、未定義、null を削除しますarray.filter((value, index, arr) => {value})2. 配列の重複排除
array.filter((value, index, arr) => {arr.indexOf(value) === index})
Example
1. JSON 内の無効なエントリをフィルターする次の例では、filter() を使用して、ゼロ以外の 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 = 52. 空の文字列、未定義、null を削除します
//2. 去掉空字符串、undefined、null var porducts = [ {name:''}, {name:"哈哈"} ]; var filter2=porducts.filter(function(item){ return item.name }) //console.log(filter2) //打印得出 0: {name: "哈哈"}3. 配列から重複を削除します
//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) // ["苹果", "香蕉", "芒果"][推奨学習:
JavaScript 上級チュートリアル]
以上がes6のフィルターの機能は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。