Obake Engineer Blog

「Array.prototype.filter()」メソッドで配列のfalsyな要素を除去する

JavaScript

2020/10/19

filter()メソッドを使うことで、配列のfalsyな要素(0, null, undefined, false)を除去することができる。

JS
const array = [0, 1, null, 3, undefined, 5, false, 7, '', 9]
const hoge = array.filter(num => num)
console.log(hoge) // [ 1, 3, 5, 7, 9]

解説

Array.prototype.filter()は、与えられたcallback関数を配列の各要素に対して一度ずつ呼び出し、callbackがtrueと評価される値を返したすべての要素からなる新しい配列を生成します。

引用: Array.prototype.filter() - JavaScript | MDN

通常は、以下のようにcallback関数に条件式を定義するが、要素をそのままreturnすることによって、trueに評価される要素だけの配列を作ることができる。

JS
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

参考

  • JavaScriptにおける配列の空要素除去filterパターン - Qiita

/post-7

「Array.prototype.filter()」メソッドで配列のfalsyな要素を除去する

Related Posts

  • 【JavaScript】typeofの違い【TypeScript】
  • 「create-react-app」+ 「TypeScript」環境で絶対パスのaliasを指定する
  • GatsbyJS製ブログに「見出しにリンクを貼る機能」を追加する
  • GatsbyJS製ブログに「外部リンクを別タブで開く機能」を追加する

Search

Recent Posts

  • Apollo Clientでリクエストヘッダーに認証トークンを付与する方法
  • 【Zsh】コマンド履歴にエラーの履歴を残さない設定
  • 【Laravel】PHPUnit実行時に開発用DBを初期化してしまわないために
  • TypeScript環境でEmotionのスタイル指定に任意のpropsを渡す方法
  • Reactのレンダリングメモ

All Tags

JavaScript (7)
React (4)
GatsbyJS (3)
TypeScript (3)
Zsh (2)
Webpack (2)
Git (1)
CSS (1)
Dotenv (1)
Redux (1)
Emotion (1)
Laravel (1)
PHP (1)
GraphQL (1)
Apollo (1)
obake
Obake Engineer Blog

の検索結果: 0件中 0件表示