【JavaScript】配列の要素の削除方法6選！クリア方法を徹底解説！

はじめに

JavaScriptでの配列操作は開発において避けて通れない要素の一つです。

特に配列からの要素の削除を行うことは頻繁にあります。

この記事では、いろいろな配列の要素の削除方法を解説します。

アロー関数を徹底的に学びたい人向けです！画像をクリックしてご覧ください！
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる

配列からの要素の削除方法

JavaScriptでは、配列から要素を削除するためにいくつかのメソッドが用意されています。ここでは、それぞれのメソッドの使用例とともに、その特徴を詳しく見ていきましょう。

1. popメソッド

配列の最後の要素を削除するには、popメソッドを使用します。

このメソッドは、削除された要素を返し、配列自体は更新されます。

ソースコード例

class Program {
  static main() {
    const fruits = ['apple', 'banana', 'orange'];
    const removedItem = fruits.pop();
    console.log(fruits);
    console.log(removedItem);
  }
}
Program.main();

class Program {

static main() {

const fruits = ['apple', 'banana', 'orange'];

const removedItem = fruits.pop();

console.log(fruits);

console.log(removedItem);

}

Program.main();

 出力結果
['apple', 'banana']
orange

サルモリ

popメソッドは、配列の最後から要素を取り除く簡単な方法だね！

2. shiftメソッド

配列の最初の要素を削除する場合は、shiftメソッドを使います。

このメソッドも削除された要素を返し、配列自体はその場で更新されます。

ソースコード例

class Program {
  static main() {
    const fruits = ['apple', 'banana', 'orange'];
    const removedItem = fruits.shift();
    console.log(fruits);
    console.log(removedItem);
  }
}
Program.main();

class Program {

static main() {

const fruits = ['apple', 'banana', 'orange'];

const removedItem = fruits.shift();

console.log(fruits);

console.log(removedItem);

}

Program.main();

 出力結果
['banana', 'orange']
apple

サルモリ

shiftメソッドは配列の最初をピンポイントで取り除く時に便利だね！

3. spliceメソッド

より柔軟な削除が必要な場合、spliceメソッドを使用します。

指定した位置から任意の数の要素を削除でき、必要に応じて新しい要素を挿入することも可能です。

ソースコード例

class Program {
  static main() {
    const fruits = ['apple', 'banana', 'orange', 'grape'];
    const removedItems = fruits.splice(1, 2, 'mango', 'peach');
    console.log(fruits);
    console.log(removedItems);
  }
}
Program.main();

class Program {

static main() {

const fruits = ['apple', 'banana', 'orange', 'grape'];

const removedItems = fruits.splice(1, 2, 'mango', 'peach');

console.log(fruits);

console.log(removedItems);

}

Program.main();

 出力結果
['apple', 'mango', 'peach', 'grape']
['banana', 'orange']

サルモリ

spliceメソッドは、削除と同時に新しい要素を追加できるから、かなり便利だね！

4. filterメソッド

特定の条件に一致する要素だけを残して、配列から要素を削除したい場合には、filterメソッドが非常に便利です。

このメソッドは、指定した関数に基づいて各要素をテストし、その関数がtrueを返した要素のみを含む新しい配列を作成します。

ソースコード例

class Program {
  static main() {
    const numbers = [1, 2, 3, 4, 5, 6];
    const evenNumbers = numbers.filter(number => number % 2 === 0);
    console.log(evenNumbers);
  }
}
Program.main();

class Program {

static main() {

const numbers = [1, 2, 3, 4, 5, 6];

const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers);

}

Program.main();

 出力結果
[2, 4, 6]

サルモリ

filterメソッドは、条件に合う要素だけを抽出するのにピッタリだね！

5. delete演算子

配列の特定の要素を削除するもう一つの方法は、delete演算子を使用することです。

しかし、これは要素を削除するというよりは、要素の値をundefinedにする操作です。配列の長さは変わりません。

ソースコード例

class Program {
  static main() {
    const fruits = ['apple', 'banana', 'orange'];
    delete fruits[1];
    console.log(fruits);
  }
}
Program.main();

class Program {

static main() {

const fruits = ['apple', 'banana', 'orange'];

delete fruits[1];

console.log(fruits);

}

Program.main();

 出力結果
['apple', undefined, 'orange']

サルモリ

delete演算子を使うと、要素はundefinedになるけど、配列の長さはそのままなんだね。</st-kaiwa3]

6. Array.prototype.sliceメソッド

要素を削除する代わりに、配列の一部を取り出して新しい配列を作成したい場合、sliceメソッドが有効です。

このメソッドは、元の配列は変更せずに、指定された開始位置から終了位置までの要素を含む新しい配列を返します。

[st-midasibox title="ソースコード例" webicon="st-svg-check-circle faa-ring animated" bordercolor="#FFC107" color="" bgcolor="#FFFDE7" borderwidth="" borderradius="5" titleweight="bold" myclass=""]

class Program {
  static main() {
    const fruits = ['apple', 'banana', 'orange', 'grape', 'melon'];
    const selectedFruits = fruits.slice(1, 4);
    console.log(selectedFruits);
  }
}
Program.main();

class Program {

static main() {

const fruits = ['apple', 'banana', 'orange', 'grape', 'melon'];

const selectedFruits = fruits.slice(1, 4);

console.log(selectedFruits);

}

Program.main();

[/st-midasibox]

[st-pre myclass="st-terminal" text="出力結果" webicon="st-svg-terminal"]

['banana', 'orange', 'grape']
[/st-pre]

[st-kaiwa3]sliceメソッドは、特定の範囲の要素を新しい配列として取り出せるから、とても便利だよ！

配列の要素を全削除する方法

JavaScriptで配列の要素を全削除するには、いくつかの方法があります。ここでは、最も一般的な2つの方法を紹介します。

1. 配列を空にする

最も簡単な方法は、配列を空の配列に直接設定することです。

これにより、元の配列の参照は保持されながら、内容は完全に空になります。

ソースコード例

class Program {
  static main() {
    let fruits = ['apple', 'banana', 'orange'];
    fruits = [];
    console.log(fruits);
  }
}
Program.main();

class Program {

static main() {

let fruits = ['apple', 'banana', 'orange'];

fruits = [];

console.log(fruits);

}

Program.main();

 出力結果
[]

サルモリ

これで配列がキレイさっぱり空になるね！

2. lengthプロパティを0に設定

配列のlengthプロパティを0に設定することで、配列の要素を全て削除することができます。

この方法は、配列の参照を保持しつつ内容を空にしたい場合に有効です。

ソースコード例

class Program {
  static main() {
    const fruits = ['apple', 'banana', 'orange'];
    fruits.length = 0;
    console.log(fruits);
  }
}
Program.main();

class Program {

static main() {

const fruits = ['apple', 'banana', 'orange'];

fruits.length = 0;

console.log(fruits);

}

Program.main();

 出力結果
[]

サルモリ

lengthを0にするだけで、簡単に配列をクリアできるんだね！

: 配列の他の使い方はコチラ【JavaScript】配列の使い方を徹底解説！！値の追加、修正、削除、ループ処理、mapメソッド、filterメソッド

はじめに JavaScriptは、ウェブ開発において不可欠な言語です。特に配列の操作は、日々の開発作業で頻繁に遭遇するため、その方法を習得することは極めて重要です。この記事では、JavaScrip ...

続きを見る

まとめ

これらのメソッドを適切に使用することで、JavaScriptでの配列操作がより柔軟に、効率的になります。

各メソッドの特徴を理解し、目的に応じて最適なものを選択してください。

最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです！

サルモリ

最後まで読んでくれてありがとう！！

【JavaScript】配列の要素の削除方法6選！クリア方法を徹底解説！

はじめに

配列からの要素の削除方法

1. popメソッド

2. shiftメソッド

3. spliceメソッド

4. filterメソッド

5. delete演算子

6. Array.prototype.sliceメソッド

配列の要素を全削除する方法

1. 配列を空にする

2. lengthプロパティを0に設定

配列の他の使い方はコチラ【JavaScript】配列の使い方を徹底解説！！値の追加、修正、削除、ループ処理、mapメソッド、filterメソッド

まとめ

Ads Blocker Detected!!!