2021年11月16日 JavaScript (JS Primer) 指定範囲の要素を取得

指定範囲の要素を取得

Array#sliceメソッド

slice は end 自体は含めず、その直前まで取り出します。例えば、slice(1,4) は 2 番目から 4 番目までの要素 (インデックスがそれぞれ 1, 2, 3 番目の要素) を取り出します。

const array = ["A", "B", "C", "D", "E"];
// インデックス1から4の手前の範囲を取り出す
console.log(array.slice(1, 4)); // => ["B", "C", "D"]
// 第二引数を省略した場合は、第一引数から末尾の要素までを取り出す
console.log(array.slice(1)); // => ["B", "C", "D", "E"]
// マイナスを指定すると後ろからの数えた位置となる
console.log(array.slice(-1)); // => ["E"]
// 第一引数と第二引数が同じ場合は、空の配列を返す
console.log(array.slice(1, 1)); // => []
// 第一引数 > 第二引数の場合、常に空配列を返す
console.log(array.slice(4, 1)); // => []

指定した要素が配列に含まれるか確認する

「指定した要素が配列に含まれているかを知る方法」について見ていきます。指定した要素が配列に含まれているかは、以下の2つのメソッドを使います。

• Array#includes
• Array#some

以下で詳しく解説します。

Array#includesメソッド

引数で指定した要素が、配列に含まれているかを判定します。 includesメソッドは真偽値を返します。

const array = ["Java", "JavaScript", "Ruby"];

// `includes`は含まれているなら`true`を返します。
if (array.includes("JavaScript")) {
    console.log("配列にJavaScriptが含まれている");
}

Array#someメソッド

includesメソッドは、indexOfメソッドと同様、異なるオブジェクトだが値が同じものを見つけたい場合には利用できません。 Array#someメソッドはテストするコールバック関数にマッチする要素があるならtrueを返し、存在しない場合はfalseを返します。

// colorプロパティを持つオブジェクトの配列
const colors = [
    { "color": "red" },
    { "color": "green" },
    { "color": "blue" }
];
// `color`プロパティが"blue"のオブジェクトがあるかどうか
const isIncludedBlueColor = colors.some((obj) => {
    return obj.color === "blue";
});
console.log(isIncludedBlueColor); // => true

挙動はfindと同じですが、真偽値を返すところが違います。

追加と削除

Array#pushとArray#pop

どちらも末尾に対してアプローチします。

const array = ["A", "B", "C"];
array.push("D"); // "D"を末尾に追加
console.log(array); // => ["A", "B", "C", "D"]
const poppedItem = array.pop(); // 最末尾の要素を削除し、その要素を返す
console.log(poppedItem); // => "D"
console.log(array); // => ["A", "B", "C"]

Array#unshiftとArray#shift

どちらも先頭に対してアプローチします。
unshiftは右にずらす。shiftは左にずらす。というイメージを持つと記憶しやすいかも知れません。

const array = ["A", "B", "C"];
array.unshift("S"); // "S"を先頭に追加
console.log(array); // => ["S", "A", "B", "C"]
const shiftedItem = array.shift(); // 先頭の要素を削除
console.log(shiftedItem); // => "S"
console.log(array); // => ["A", "B", "C"]

配列同士を結合

Array#concatメソッド

concatメソッドを使うことで配列と配列を結合した新しい配列を作成できます。concatメソッドは新しい配列を作成するので、既存の配列に変更を加えたりはしません。

const array = ["A", "B", "C"];
const newArray = array.concat(["D", "E"]);
console.log(newArray); // => ["A", "B", "C", "D", "E"]

...（Spread構文）

...（Spread構文）で配列リテラル中に既存の配列を展開することができます。 concatメソッドと同じ結果が期待ができます。

const array = ["A", "B", "C"];
// Spread構文を使った場合
const newArray = ["X", "Y", "Z", ...array];
// concatメソッドの場合
const newArrayConcat = ["X", "Y", "Z"].concat(array);
console.log(newArray); // => ["X", "Y", "Z", "A", "B", "C"]
console.log(newArrayConcat); // => ["X", "Y", "Z", "A", "B", "C"]

Spread構文ではconcatとは異なり配列の途中に追加することもできます。

const array = ["A", "B", "C"];
const newArray = ["X", ...array, "Z"];
console.log(newArray); // => ["X", "A", "B", "C", "Z"]

重要だと感じた点

concatは配列にしか使えない・末尾にしかアプローチできないものに対して、Spread構文は配列・オブジェクトにも使用でき要素の途中に追加できたり と使える幅が広いところです。

参考

Array.prototype.slice()

Array.prototype.concat()