回答編集履歴

追記

2020/05/13 18:44

投稿

hoshi-takanori

スコア7901

test CHANGED Viewed

@@ -114,6 +114,24 @@
+```js
+const obj = { type: 'keyword', searchValue: ['JavaScript', 'React.js'] };
+console.log(obj['type']); // keyword と表示される
+console.log(obj['type'] === 'keyword'); // true と表示される
+if (obj['type'] === 'keyword') {
+  console.log('obj はキーワードです'); // 表示される
+}
+```
 また、`a['type']` は実は `a.type` とも書くことができます。(というか、その方が普通ですね。)
 'type' の部分にスペースや - などの記号が含まれていたり、'type' の部分を変数にしたい場合は、`a.param-type` や `a.変数` とは書けないので、`a['param-type']` や `a[変数]` と書くことになります。

追記

2020/05/13 18:44

投稿

hoshi-takanori

スコア7901

test CHANGED Viewed

@@ -154,6 +154,10 @@
+参考: [JavaScript アロー関数のサンプル | ITSakura](https://itsakura.com/js-arrow)
 JavaScript の関数の書き方は 3 通りあって、基本的にどれも同じ結果になります。
 (厳密には、アロー関数は this の扱いが異なりますが、ここでは結果に影響しないので…。)

追記

2020/05/13 18:33

投稿

hoshi-takanori

スコア7901

test CHANGED Viewed

@@ -95,3 +95,167 @@
 ]
 ```
+---
+> > 配列 props.params から条件 ['keyword'].includes(a['type']) に合うものを抜き出しています。
+>
+> ・こちらについてなのですが、`a['type’]`が渡された配列における”[]”内で渡されたkeyの値を表す。という書き方は、filter関数のみの書き方ではなく、それ以外でも同じ書き方をするのでしょうか？
+はい。`a['type']` という書き方は、オブジェクトのプロパティにアクセスするためのもので、式を書ける場所ならどこにでも書くことができます。
+また、`a['type']` は実は `a.type` とも書くことができます。(というか、その方が普通ですね。)
+'type' の部分にスペースや - などの記号が含まれていたり、'type' の部分を変数にしたい場合は、`a.param-type` や `a.変数` とは書けないので、`a['param-type']` や `a[変数]` と書くことになります。
+逆に、`props.params` の代わりに `props['params']` と書くこともできます。
+参考: [【JavaScript】プロパティへのアクセス - Qiita](https://qiita.com/tomcky/items/0757348473873765432e)
+> また、
+> >　props.params.filter((a) => { return (['keyword'].includes(a['type'])) })
+>
+> は
+>
+> >　props.params.filter((a) => { return a['type'] === 'keyword'})
+>
+> という風にも書き換える事ができ、
+> ・returnを含む括弧内がtrueとなる要素の配列を新たに作る、という理解であっていますでしょうか、、？
+はい。`配列.filter(真偽値を返す関数)` と書くと、配列の各要素に対して真偽値を返す関数が呼び出され、true を返した要素だけを集めた新しい配列が作られます。
+この `(a) => { return a['type'] === 'keyword'}` はアロー関数というもので、もっと短く `a => a.type === 'keyword'` と書くこともできます。
+JavaScript の関数の書き方は 3 通りあって、基本的にどれも同じ結果になります。
+(厳密には、アロー関数は this の扱いが異なりますが、ここでは結果に影響しないので…。)
+1) function キーワードを使った名前付き関数
+```js
+// 名前付き関数の定義は文なので、関数定義と、その使用は分けて書く必要がある。
+function isKeyword(a) {
+  return a.type === 'keyword';
+}
+props.params.filter(isKeyword)
+```
+2) function キーワードを使って無名関数
+```js
+// 無名関数は式なので、関数定義と、その使用は分けて書くこともできるし、
+const isKeyword = function (a) {
+  return a.type === 'keyword';
+};
+props.params.filter(isKeyword)
+// または、次のようにまとめて書くこともできる。
+props.params.filter(function (a) {
+  return a.type === 'keyword';
+})
+```
+3) アロー関数
+```js
+// アロー関数も式なので、関数定義と、その使用は分けて書くこともできるし、
+const isKeyword = (a) => {
+  return a.type === 'keyword';
+};
+props.params.filter(isKeyword)
+// または、次のようにまとめて書くこともできる。
+props.params.filter((a) => {
+  return a.type === 'keyword';
+})
+// さらに、return を省略することも可能。
+props.params.filter(a => a.type === 'keyword')
+```
+また、どの方法で作った関数も、filter や map などに渡すだけでなく、普通に呼び出すことができます。
+```js
+const isKeyword = a => a.type === 'keyword';
+const obj = { type: 'keyword', searchValue: ['JavaScript', 'React.js'] };
+console.log(isKeyword(obj)); // true と表示される
+```