7.1 メソッド splice()
JavaScriptの配列はデータを操作するための組み込みメソッドを提供しているんだよね。この講義では、配列の4つの主要なメソッドを見ていこう: splice(), slice(), concat(), indexOf()。 それぞれのメソッドは配列に特定の操作を実行することができて、データ処理をかなり簡単にしてくれるよ。
メソッド splice()は配列の内容を変更するよ。既存の要素を削除したり、新しい要素をその場所に追加したりできるんだ。
構文:
splice
(start, deleteCount, item1, item2, ...);
ここで:
start: 変更を開始するインデックスdeleteCount: 削除する要素の数。指定しない場合は、開始位置からすべての要素が削除されるよitem1,item2,...: 配列に追加される要素。指定しない場合は、要素は追加されないんだ
例 1: 要素の削除
この例では、配列fruitsからインデックス2から始まる2つの要素を削除するよ。返される値は削除された要素の配列だね。
let fruits = ['apple', 'banana', 'cherry', 'date', 'fig'];
let removed = fruits.splice(2, 2);
console.log(fruits); // 出力: ['apple', 'banana', 'fig']
console.log(removed); // 出力: ['cherry', 'date']
例 2: 要素の追加
この例では、配列fruitsに新しい2つの要素（dateとfig）をインデックス2から追加するよ。削除は行われないんだ。
let fruits = ['apple', 'banana', 'cherry'];
fruits.splice(2, 0, 'date', 'fig');
console.log(fruits); // 出力: ['apple', 'banana', 'date', 'fig', 'cherry']
例 3: 要素の置換
この例では、インデックス1の要素（banana）を新しい2つの要素（dateとfig）で置き換えるよ。
let fruits = ['apple', 'banana', 'cherry'];
fruits.splice(1, 1, 'date', 'fig');
console.log(fruits); // 出力: ['apple', 'date', 'fig', 'cherry']
7.2 メソッド slice()
メソッドslice()は、元の配列の一部をコピーした新しい配列を返すよ。元の配列は変更されないんだ。
構文:
array.slice(begin, end);
ここで:
begin: コピーを開始するインデックスend: コピーするインデックス（このインデックスの要素は含まない）。指定しない場合は、配列の終わりまで要素がコピーされるんだ
例 1: 配列の一部をコピー
この例では、配列fruitsのインデックス1から2までの要素を含む新しい配列が作成されるよ。
let fruits = ['apple', 'banana', 'cherry', 'date', 'fig'];
let sliced = fruits.slice(1, 3);
console.log(sliced); // 出力: ['banana', 'cherry']
例 2: 配列の最初からコピー
この例では、配列fruitsのインデックス0と1の要素を含む新しい配列が作成されるよ。
let fruits = ['apple', 'banana', 'cherry'];
let sliced = fruits.slice(0, 2);
console.log(sliced); // 出力: ['apple', 'banana']
例 3: 配列の終わりまでコピー
この例では、配列fruitsのインデックス1から終わりまでの要素を含む新しい配列が作成されるよ。
let fruits = ['apple', 'banana', 'cherry'];
let sliced = fruits.slice(1);
console.log(sliced); // 出力: ['banana', 'cherry']
7.3 メソッド concat()
メソッドconcat()は、2つ以上の配列を結合するために使用されるよ。すべての結合された配列の要素を含む新しい配列を返すんだ。
構文:
array1.concat(array2, array3, ...);
ここで:
array1,array2,array3,...: 結合する必要がある配列たち
例 1: 2つの配列を結合
この例では、配列fruits1とfruits2が新しい配列combinedに結合されるよ。
let fruits1 = ['apple', 'banana'];
let fruits2 = ['cherry', 'date'];
let combined = fruits1.concat(fruits2);
console.log(combined); // 出力: ['apple', 'banana', 'cherry', 'date']
例 2: 複数の配列を結合
この例では、3つの配列が新しい配列combinedに結合されるよ。
let fruits1 = ['apple', 'banana'];
let fruits2 = ['cherry', 'date'];
let fruits3 = ['fig', 'grape'];
let combined = fruits1.concat(fruits2, fruits3);
console.log(combined); // 出力: ['apple', 'banana', 'cherry', 'date', 'fig', 'grape']
例 3: 配列に要素を結合
この例では、配列fruitsにcherryとdateという要素を追加して、新しい配列moreFruitsを作成するよ。
let fruits = ['apple', 'banana'];
let moreFruits = fruits.concat('cherry', 'date');
console.log(moreFruits); // 出力: ['apple', 'banana', 'cherry', 'date']
7.4 メソッド indexOf()
メソッドindexOf()は、指定された要素が配列で最初に見つかるインデックスを返すか、要素が見つからなかった場合は-1を返すんだ。
構文:
array.indexOf(searchElement, fromIndex);
ここで:
searchElement: 見つける必要がある要素fromIndex: 検索を開始するインデックス。指定しない場合は、配列の最初から検索が始まるんだ
例 1: 配列内の要素を検索
この例では、メソッドindexOf()が配列fruitsの要素bananaのインデックスを返すんだ。
let fruits = ['apple', 'banana', 'cherry'];
let index = fruits.indexOf('banana');
console.log(index); // 出力: 1
例 2: 要素が見つからない場合
この例では、メソッドindexOf()は-1を返すんだ。要素dateは配列fruitsには見つからないからだよ。
let fruits = ['apple', 'banana', 'cherry'];
let index = fruits.indexOf('date');
console.log(index); // 出力: -1
例 3: 特定のインデックスから要素を検索
この例では、メソッドindexOf()はインデックス2からbananaの要素を検索し、インデックス3で見つけるんだ。
let fruits = ['apple', 'banana', 'cherry', 'banana'];
let index = fruits.indexOf('banana', 2);
console.log(index); // 出力: 3
GO TO FULL VERSION