すべてのJavaScript開発者が知っておくべき配列メソッドPart-2

JavaScript

すべてのJavaScript開発者が知っておくべき配列メソッド Part-2

JavaScriptの配列操作で忘れず知っておきたい配列関数一覧 その2。

concat()

concat()メソッドは、2つ以上の配列をマージして、既存の配列を変更せずに新しい配列を返却するために使います。

const arr1 = ["a", "b", "c"];
const arr2 = ["d", "e", "f"];
console.log(arr1.concat(arr2));
// Array["a", "b", "c", "d", "e", "f"]
console.log(arr1);
//Array["a", "b", "C"]
console.log(arr2);
//Array ["d", "e", "f"]

includes()

includes()メソッドは、配列内に条件を満たす要素が含まれているかどうかをチェックし、trueまたはfalseを返します。

const arr = [1, 2, 3, 4, 5, 6];
console.log(arr.includes (2)); // true
console.log(arr.includes (7)); // false

join()

指定されたセパレータで区切られた配列のすべての要素を連結して、新しい文字列を返します。またセパレータを指定する事ができ、引数に指定した文字列で結合する文字の間に区切り文字を追加します。

const arr = ["m", "a", "n", "d", "e", "e", "p"];
console.log(arr.join());
// "m,a,n,d,e,e,p"
console.log(arr.join(''));
// "mandeep"
console.log(arr.join('-'));
// "m-a-n-d-e-e-p"

reduce()

reduce()メソッドは、配列の各要素に対して引数で与えたreducer関数を適用し、単一の値を生成します。4つの引数「アキュムレーター (acc)、現在値 (cur)、現在の添字 (idx)、元の配列 (src)」を取り、アキュムレーター (演算式)がよく使われます。

参考:Array.prototype.reduce()

const arr = [1, 2, 3, 4, 5, 6];
const addReducer = (total, current) => total + current;
const reduced = arr.reduce(addReducer);
console.log(reduced); // 21
console.log(arr.reduce(addReducer, 5)); //26

findIndex()

findIndex()メソッドは、検証関数を満たす配列内の最初の要素のインデックスを返します。検証関数を満たす要素がない場合は-1を返します。

const arr = ["Danny", "Man", "John", "Ruby"];
const indexFinder = arr.findIndex(element => element === "Man");
console.log(indexFinder); // 1

indexOf()

indexOf()メソッドは、配列の中で指定した要素が最初に現れる要素のインデックスを返し、見つからない場合は-1を返します。

const arr = ["Danny", "Man", "John", "Ruby"];
const indexFinder = arr.indexOf("Man");
console.log(indexFinder); // 1

fill()

fill()メソッドは、配列の要素を静的な値に変更した配列を返します。下記の実行結果からわかる通り、元の配列を修正します。

開始インデック(デフォルト0)から終了インデックス(デフォルトarray.length)までとなり、すべての要素を変更します。第二引数に開始する位置、第三引数に終了する位置を指定可能です。

const arr = new Array(3);
console.log(arr);
// Array [undefined, undefined, undefined]
console.log(arr.fill(10));
// Array [10, 10, 10]
console.log(arr.fill(5, 1));
// Array [10, 5, 5]
console.log(arr.fill(0, 2, 3));
// Array [10, 5, 0]
  • この記事を書いた人

九十九史恩

キーを叩いていないときは、都会や田舎の風景を探検しています。

よく読まれている記事

条件の0=0は全てが正であるを意味するSQL 1

SQLの条件に0=0のような記述を見かけます。 変わった書き方の条件ですが、これは「全てが正である」事を意味しており、結合条件の場合はCROSS JOINと同じです。 下記の例で言えば、結合するsub ...

DISTINCTを使わないで重複排除を考えるSQL 2

SQLのDISTINCTはEXISTSとかGROUP BYでなんとかする事もできます。 DISTINCTは暗黙的なソートがされますが、何のDBを使うにせよ過去のバージョンならともかく、最近のバージョン ...

RFC 5322に準拠させた正規表現言語別 3

RFC5322で定義されている正規表現を、各言語の正規表現に変化させた形になります。 完全な電子メール正規表現は存在しないので、結局のところ何かの公式基準に従っていたとしても、自分が携わるサービスのル ...

-JavaScript