JavaScriptのfilter,reverse,splitを理解するための自分用メモ

はじめに

filter,reverse,splitの記事を一つ一つ検索して、開くことがめんどうなのでひとつにまとめておこうと思いました。

参考URL:
filter
filterMDN

reverse
slice().reverse()の説明
reverseMDN
sliceMDN

split()
splitMDN

filterの例

配列の中にあるオブジェクトの要素のisDoneがfalseの要素だけをreturnで返す処理です。

    data: {
        items: [],
    },

Vueのデータの中です。

var item = {
    isDone: false,
};
this.items.push(item);

関数が呼び出されたときに、行われる処理の一部です。
itemをitemsという配列に追加しています。

remaining: function () {
            return this.items.filter(function (residue) {
                return !residue.isDone;
            });
        },

itemsの中のisDoneがfalseの要素だけを返しています。
逆に言うとfilterはisDoneがtrueの要素を削除しています。

reverseの例

配列を逆順にしたいときに使用する。

const numbers = [1, 2, 3];
console.log(numbers.reverse()); //[3, 2, 1]
console.log(numbers.slice().reverse()); //[1, 2, 3]

reverse()のみを使ってしまうと配列自体を変更してしまうため、その後、もう一度reverse()を使うと反転の反転となる。

const numbers = [1, 2, 3];
console.log(numbers.slice().reverse()); //[3, 2, 1]
console.log(numbers.reverse()); //[3, 2, 1]

slice()を使うことで、元の配列は変更されずに反転処理を行うことができる。
その結果、配列の操作が非破壊的になる。

splitの例

const str = 'The quick brown fox jumps over the lazy dog.';

const words = str.split(" ");
console.log(words); //["The", "quick", "brown", "fox", "jumps", "over", "the", "lazy", "dog."]
console.log(words[3]); //fox

splitは何で区切るかを指定する。
上記の場合だと、空白で区切っていることになる。

最後に

学習を進めていく中で、調べれば簡単にわかることだが、それらの情報がまとまっていると有難いと思うことが多かったので、自分なりにだがまとめることができて良かったと思う。
この記事を見て、役に立てば幸いです。