es6フィルター()の使い方

es6 では、filter() は配列フィルタリング メソッドです。コールバック関数を呼び出して配列内の要素をフィルタリングし、条件を満たすすべての要素を返します。構文 "Array.filter(callback(element) [, インデックス [, 配列]])[, thisArg])"。 filter() メソッドは新しい配列を作成し、新しい配列内の要素が、条件を満たす指定された配列内のすべての要素についてチェックされます。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

配列フィルター メソッドは、JavaScript で最も広く使用されているメソッドの 1 つです。

これにより、配列内の要素を特定の条件ですばやくフィルタリングすることができます。

したがって、この記事では、フィルター メソッドとそのさまざまな使用例についてすべて学びます。

それでは、始めましょう。

---

フィルター メソッドを使用せずに、以下のコードを見てください:

const employees = [
  { name: 'David Carlson', age: 30 },
  { name: 'John Cena', age: 34 },
  { name: 'Mike Sheridan', age: 25 },
  { name: 'John Carte', age: 50 }
];
 
const filtered = [];
 
for(let i = 0; i  -1) {
   filtered.push(employees[i]);
 }
}
 
console.log(filtered); // [ { name: "John Cena", age: 34 }, { name: "John Carte", age: 50 }]

上記のコードでは、 を持つ項目を探しています。 John indexOf メソッドを使用して、すべての従業員に名前を付けています。

employees

配列を手動でループし、一致する従業員を filtered 配列にプッシュする必要があるため、for ループ コードは複雑に見えます。

しかし、配列フィルタリング方法を使用すると、上記のコードを簡素化できます。

配列フィルタリング メソッド filter()

filter() メソッドは新しい配列を作成します。新しい配列の要素は、指定された配列内のすべての要素をチェックすることによって決定されます。条件を満たしています。

配列フィルター メソッドの構文は次のとおりです。

Array.filter(callback(element[, index[, array]])[, thisArg])

フィルター メソッドは元の配列を変更しませんが、指定されたテスト条件を満たすすべての要素を含む新しい配列を返します。

フィルター メソッドはコールバック関数を最初のパラメーターとして受け取り、配列の各要素に対してコールバック関数を実行します。

コールバック関数の各反復では、各配列要素の値が最初のパラメーターとしてコールバック関数に渡されます。

フィルター メソッドを使用した次のコードを見てください:

const employees = [
  { name: 'David Carlson', age: 30 },
  { name: 'John Cena', age: 34 },
  { name: 'Mike Sheridan', age: 25 },
  { name: 'John Carte', age: 50 }
];
 
const filtered = employees.filter(function (employee) {
  return employee.name.indexOf('John') > -1;
});
 
console.log(filtered); // [ { name: "John Cena", age: 34 }, { name: "John Carte", age: 50 }]

ここでは、配列フィルター メソッドを使用しているため、手動でループする必要はありません employees配列。一致する従業員を除外するために、事前に filtered 配列を作成する必要はありません。

フィルター メソッド filter() を理解する

#フィルター メソッドはコールバック関数を受け入れ、配列の各要素は、各反復の最初のパラメーターとして自動的に使用されます。ループ転送。

次のような数値の配列があるとします:

const numbers = [10, 40, 30, 25, 50, 70];

そして、30 より大きいすべての要素を検索したい場合は、以下に示すようにフィルター メソッドを使用できます:

const numbers = [10, 40, 30, 25, 50, 70];

const filtered = numbers.filter(function(number) {
  return number > 30;
});

console.log(filtered); // [40, 50, 70]

したがって、コールバック関数内では、ループの最初の反復で、配列内の最初の要素値 10 が

number パラメータ値として渡され、10> がパラメータ値として渡されます。 30 は false であるため、数値 10 は一致とはみなされません。

配列フィルター メソッドは配列を返すため、10 は 30 を超えず、

filtered配列リストには追加されません。

その後、ループの次の反復で、配列内の次の要素 40 が

number パラメーター値としてコールバック関数に渡されます。これは、40 &gt の場合に考慮されます。 ; 30 は、一致して filtered バッチに追加された場合に true になります。

これは、配列内のすべての要素がループを完了しなくなるまで続きます。

したがって、コールバック関数が

false 値を返す限り、要素はフィルターされた配列に追加されません。 filter メソッドは、コールバック関数が true 値を返す要素のみを含む配列を返します。

値をコンソールに記録すると、ループの各反復でコールバック関数に渡された要素の現在の値を確認できます。

const numbers = [10, 40, 30, 25, 50, 70];
 
const filtered = numbers.filter(function(number) {
  console.log(number, number > 30);
  return number > 30;
});
 
console.log(filtered); // [40, 50, 70]
 
/* output
10 false
40 true
30 false
25 false
50 true
70 true
[40, 50, 70]
*/

##次に、次のコードを見てください:

const checkedState = [true, false, false, true, true];
 
const onlyTrueValues = checkedState.filter(function(value) {
  return value === true;
});
 
console.log(onlyTrueValues); // [true, true, true]

上記のコードでは、

true

である値のみが見つかります。 .<p style="margin-left:0;">回调函数可以如上所示编写，也可以使用箭头函数如下所示：</p> <pre style="margin-left:0;">const onlyTrueValues = checkedState.filter(value =&gt; {   return value === true; });</pre> <p style="margin-left:0;">而如果箭头函数中只有一条语句，我们可以跳过return关键字，隐式返回值，如下：</p> <pre style="margin-left:0;">const onlyTrueValues = checkedState.filter(value =&gt; value === true);</pre> <p style="margin-left:0;">上面的代码可以进一步简化为：</p> <pre style="margin-left:0;">const onlyTrueValues = checkedState.filter(Boolean);</pre> <p style="margin-left:0;">要了解它是如何工作的，请查看我的这篇文章。</p> <h2 style="margin-left: 0px;"><strong>回调函数参数</strong></h2> <p style="margin-left:0;">除了数组的实际元素外，传递给 filter 方法的回调函数还接收以下参数：</p> <ul style="margin-left:0;"> <li>我们正在循环的<code>index数组中当前元素的

array我们循环播放的原版

看看下面的代码：

const checkedState = [true, false, false, true, true];

checkedState.filter(function(value, index, array) {
  console.log(value, index, array);
  return value === true;
});

/* output

true   0  [true, false, false, true, true]
false  1  [true, false, false, true, true]
false  2  [true, false, false, true, true]
true   3  [true, false, false, true, true]
true   4  [true, false, false, true, true]

*/

过滤方法的用例

正如您在上面看到的，数组过滤器方法对于过滤掉数组中的数据很有用。

但是过滤器方法在一些实际用例中也很有用，例如从数组中删除重复项，分离两个数组之间的公共元素等。

从数组中删除元素

filter 方法最常见的用例是从数组中删除特定元素。

const users = [
  {name: 'David', age: 35},
  {name: 'Mike', age: 30},
  {name: 'John', age: 28},
  {name: 'Tim', age: 48}
];

const userToRemove = 'John';

const updatedUsers = users.filter(user => user.name !== userToRemove);

console.log(updatedUsers);

/* output

[
  {name: 'David', age: 35},
  {name: 'Mike', age: 30},
  {name: 'Tim', age: 48}
]

*/

在这里，我们从users名称为 的数组中删除用户John。

userToRemove因此，在回调函数中，我们正在检查保留名称与存储在变量中的名称不匹配的用户的条件。

从数组中查找唯一或重复项

const numbers = [10, 20, 10, 30, 10, 30, 50, 70];

const unique = numbers.filter((value, index, array) => {
  return array.indexOf(value) === index;
})

console.log(unique); // [10, 20, 30, 50, 70]

const duplicates = numbers.filter((value, index, array) => {
  return array.indexOf(value) !== index;
})

console.log(duplicates); // [10, 10, 30]

该indexOf方法返回第一个匹配元素的索引，因此，在上面的代码中，我们正在检查我们正在循环的元素的当前索引是否与第一个匹配元素的索引匹配，以找出唯一和重复元素.

查找两个数组之间的不同值

const products1 = ["books","shoes","t-shirt","mobile","jackets"];

const products2 = ["t-shirt", "mobile"];

const filteredProducts = products1.filter(product => products2.indexOf(product) === -1);

console.log(filteredProducts); // ["books", "shoes", "jackets"]

在这里，我们products1使用 filter 方法循环，在回调函数中，我们正在检查products2数组是否包含我们使用 arrayindexOf方法循环的当前元素。

如果该元素不匹配，则条件为真，该元素将被添加到filteredProducts数组中。

您还可以使用数组includes方法来实现相同的功能：

const products1 = ["books","shoes","t-shirt","mobile","jackets"];

const products2 = ["t-shirt", "mobile"];

const filteredProducts = products1.filter(product => !products2.includes(product));

console.log(filteredProducts); // ["books", "shoes", "jackets"]

浏览器对过滤方法的支持

• 所有现代浏览器和 Internet Explorer (IE) 版本 9 及更高版本
• Microsoft Edge 版本 12 及更高版本

【相关推荐：web前端开发】

以上がes6フィルター()の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。