ホームページ > ウェブフロントエンド > フロントエンドQ&A > es6のフィルターの機能は何ですか?

es6のフィルターの機能は何ですか?

青灯夜游
リリース: 2023-01-29 14:41:08
オリジナル
1230 人が閲覧しました

es6 では、フィルター filter は配列要素をフィルター処理し、新しい配列を返します。 filter() 関数は、提供されたコールバック関数、構文 "arr.filter(callback(element[,index[,array]])[,thisArg])" によって実装されたテストのすべての要素を含む新しい配列を作成します。配列要素がテストに合格しない場合は、空の配列が返されます。

es6のフィルターの機能は何ですか?

このチュートリアルの動作環境: 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: コールバックの実行時にこれに使用される値、オプション

#戻り値

  • #テストに合格した要素で構成される新しい配列。テストに合格した配列要素がない場合は、空の配列が返されます。

#説明

  • #filter は、配列内の要素ごとにコールバック関数を 1 回呼び出し、すべての要素を使用してコールバックが true または返されるようにします。 true と同等 値の要素を含む新しい配列を作成します。 callback は値が割り当てられているインデックスに対してのみ呼び出され、削除されたインデックスや値が割り当てられていないインデックスに対しては呼び出されません。コールバック テストに失敗した要素はスキップされ、新しい配列には含まれません。

  • コールバックが呼び出されるとき、要素の値、要素のインデックス、および走査される配列自体の 3 つのパラメータが渡されます。

    thisArg パラメータが指定されている場合フィルターの場合、コールバックが呼び出されたときの this の値になります。それ以外の場合、コールバックの this 値は、非厳密モードではグローバル オブジェクトになり、厳密モードでは未定義になります。最終的にコールバック関数によって観察される this の値は、通常の関数によって見られる "this" の規則に従って決定されます。

  • filter は元の配列を変更せず、新しいフィルター処理された配列を返します。

  • filter 走査される要素の範囲は、コールバックが初めて呼び出される前に決定されます。 filter を呼び出した後に配列に追加された要素は、filter によってトラバースされません。既存の要素が変更されている場合、コールバックに渡される値は、フィルターがそれらを走査した時点の値です。削除された要素、または値が割り当てられていない要素は走査されません。

特別な使用法:

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 = 5
ログイン後にコピー

2. 空の文字列、未定義、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート