JSで配列内の要素を再帰的に削除する方法を詳しく解説-jsチュートリアル-php.cn

JSで配列内の要素を再帰的に削除する方法を詳しく解説

Y2J

リリース： 2017-05-20 13:18:35

オリジナル

5580 人が閲覧しました

この記事では主に、JavaScript ループ内の配列内の要素を削除するいくつかの方法を紹介します。この記事では、参考と学習のために詳細なサンプルコードを示します。必要な方はぜひ参加してください。見てみましょう。

問題を発見する

コーディングの過程では、ループ内の指定された要素を削除する必要があることがよくあります。従来の考え方では、forループを作成し、ループ内でif判定を行い、その判定で指定された要素を削除するだけです。しかし、実際の状況は期待どおりにうまくいかないことがよくあります。

以下では、このプロセスを示す例として JavaScript コードを使用します。

(function () {
 var arr = [1,2,2,3,4,5];
 var len = arr.length;
 for(var i=0;i<len;i++){
 //打印数组中的情况，便于跟踪数组中数据的变化
 console.log(i+"="+arr[i]);
 //删除掉所有为2的元素
 if(arr[i]==2){
  arr.splice(i,1);
 }
 }
 console.log(arr);
})();

ログイン後にコピー

実行結果は次のとおりです:

最終結果から、一致する要素の 1 つだけが実際に削除され、他の要素はまだ存在していることがわかります。

出力された実行プロセスから、要素が削除されると配列の index が変更され、プログラムで例外が発生することがその理由であることを見つけるのは難しくありません。

解決策

問題の原因が分かれば、問題を解決するのは難しくありません。

方法 1

(function () {
 var arr = [1,2,2,3,4,5];
 var len = arr.length;
 for(var i=0;i<len;i++){
 //打印数组中的情况，便于跟踪数组中数据的变化
 console.log(i+"="+arr[i]);
 //删除掉所有为2的元素
 if(arr[i]==2){
  //注意对比这行代码：删除元素后调整i的值
  arr.splice(i--,1);
 }
 }
 console.log(arr);
})();

ログイン後にコピー

上記のコードは理解しにくいように思えますが、もっと理解しやすそうなコードはありますか?以下を参照してください

方法 2

(function () {
 var arr = [1,2,2,3,4,5];
 var len = arr.length-1;
 //start from the top
 for(var i=len;i>=0;i--){
 console.log(i+"="+arr[i]);
 if(arr[i]==2){
  arr.splice(i,1);
 }
 }
 console.log(arr);
})();

ログイン後にコピー

後ろから前へのトラバースは問題を効果的に解決でき、理解しやすいので、もっと簡単な実装はありますか?次に、以下のコードを見てください

方法 3

(function () {
 var arr = [1,2,2,3,4,5];
 var i = arr.length;
 while(i--){
 console.log(i+"="+arr[i]);
 if(arr[i]==2){
  arr.splice(i,1);
 }
 }
 console.log(arr);
})();

ログイン後にコピー

配列の添字として while(i--) , i を使用するのは、これが最も簡潔で効率的なコード実装だと個人的に思います。

概要

【関連する推奨事項】

1. JavaScriptの無料ビデオチュートリアル

2. JSがスター評価関数を完成させる方法の詳細な例

3. JSはテキストかどうかをどのように判断しますか？全角か半角か

nodejs+websocketでチャットシステム機能が完成

Jsでカウントダウン時間差エフェクトが完成

以上がJSで配列内の要素を再帰的に削除する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。