JavaScriptを使用して配列からオブジェクトを削除


549

配列からオブジェクトを削除するにはどうすればよいですか?私は名前が含まれたオブジェクト削除したいKristianからしますsomeArray。例えば:

someArray = [{name:"Kristian", lines:"2,5,10"},
             {name:"John", lines:"1,19,26,96"}];

達成したい:

someArray = [{name:"John", lines:"1,19,26,96"}];


3
ちなみに私はこの質問の編集をロールバックしたので、配列の構文は再び間違っており、これらの答えはすべてコンテキスト内にあります。
Dunhamzzz

2
そして、配列の構文が再び "修正"(2回)されたため、回答のコンテキストはなくなりました。
Teepeemm、2015年

4
構文エラーは、いくつかの答えが意味をなすのにどのように役立ちますか?
Samy Bencherif 2016年

1
@SamyBencherif-一部の回答は、質問の元のバージョンの構文エラーに明示的に対処しているため、その構文エラーを削除すると、それらの回答は存在しないものについて話していることになります。
nnnnnn

回答:


778

いくつかのメソッドを使用して、配列からアイテムを削除できます。

//1
someArray.shift(); // first element removed
//2
someArray = someArray.slice(1); // first element removed
//3
someArray.splice(0, 1); // first element removed
//4
someArray.pop(); // last element removed
//5
someArray = someArray.slice(0, a.length - 1); // last element removed
//6
someArray.length = someArray.length - 1; // last element removed

位置の要素を削除したい場合はx、次を使用します:

someArray.splice(x, 1);

または

someArray = someArray.slice(0, x).concat(someArray.slice(-x));

@ chill182のコメントに返信:を使用してArray.filter、または(MDNを参照)Array.spliceと組み合わせて、配列から1つ以上の要素を削除できます。例:Array.findIndex

// non destructive filter > noJohn = John removed, but someArray will not change
let someArray = getArray();
let noJohn = someArray.filter( el => el.name !== "John" ); 
log("non destructive filter > noJohn = ", format(noJohn));
log(`**someArray.length ${someArray.length}`);

// destructive filter/reassign John removed > someArray2 =
let someArray2 = getArray();
someArray2 = someArray2.filter( el => el.name !== "John" );
log("", "destructive filter/reassign John removed > someArray2 =", 
  format(someArray2));
log(`**someArray2.length ${someArray2.length}`);

// destructive splice /w findIndex Brian remains > someArray3 =
let someArray3 = getArray();
someArray3.splice(someArray3.findIndex(v => v.name === "Kristian"), 1);
someArray3.splice(someArray3.findIndex(v => v.name === "John"), 1);
log("", "destructive splice /w findIndex Brian remains > someArray3 =", 
  format(someArray3));
log(`**someArray3.length ${someArray3.length}`);

// Note: if you're not sure about the contents of your array, 
// you should check the results of findIndex first
let someArray4 = getArray();
const indx = someArray4.findIndex(v => v.name === "Michael");
someArray4.splice(indx, indx >= 0 ? 1 : 0);
log("", "check findIndex result first > someArray4 (nothing is removed) > ",
  format(someArray4));
log(`**someArray4.length (should still be 3) ${someArray4.length}`);

function format(obj) {
  return JSON.stringify(obj, null, " ");
}

function log(...txt) {
  document.querySelector("pre").textContent += `${txt.join("\n")}\n`
}

function getArray() {
  return [ {name: "Kristian", lines: "2,5,10"},
           {name: "John", lines: "1,19,26,96"},
           {name: "Brian", lines: "3,9,62,36"} ];
}
<pre>
**Results**

</pre>


2
@Klemzyは、インデックスではないという意味ですか?値で...?
Royi Namir

328
元の質問では、name = "Kristian"のオブジェクトを配列から削除する方法を尋ねていました。あなたの答えは、それが配列の最初の項目であると想定していますが、クリスティンが最初の項目にない場合はどうなりますか?その後、あなたの答えは機能しません。
ロシェルC

7
@ chill182:具体的な答えではなく、より一般的な答えです。それから、要素を削除するメソッドを推測できるはずです。位置xの要素を削除したい場合、最初の要素以外を削除するためのヒントかもしれませんよね?
KooiInc 2012年

6
スプライス機能は役に立ちましたが、someArrayを再割り当てするべきではありませんでした。これにより、要素が削除された結果の配列ではなく、削除された項目が含まれるsomeArrayが生成されます。
Kenn Cal

1
findIndex結果をで使用する前に確認する必要がありspliceます。配列内に条件に一致する要素がない場合findIndexは戻り-1、これを直接配置するspliceと、配列の最後の要素が勝手に削除されます。
jdnz

131

このような一般的なタスクには、lodash.jsまたはsugar.jsの使用をお勧めします。

// lodash.js
someArray = _.reject(someArray, function(el) { return el.Name === "Kristian"; });

// sugar.js
someArray.remove(function(el) { return el.Name === "Kristian"; });

ほとんどのプロジェクトでは、このようなライブラリーによって提供される一連のヘルパーメソッドがあると非常に便利です。


13
下線の例は少しずれていると思います。する必要がありますsomeArray = _.reject(someArray, function(el) { return el.Name === "Kristian"; });
アンディフォード

7
underscore.jsまたはsugar.jsを使用したくない場合は、これを実行できますsomeArray = someArray.filter(function(e) { return e.Name !== "Kristian"; });
BenR

1
もう1つ必要なことは、配列内のすべてのオブジェクトに個別のボタンがあることです。クリックした配列ボタンの特定のオブジェクトを削除する場合。どうやってするの 。私は角度のあるjs ng-repeatを使用してアイテムを生成しました。手伝ってくれませんか
Thilak Raj

5
ここで穀物に逆らうつもりです。オブジェクトからアイテムを削除する単純な目的でライブラリ全体を含めることをお勧めします(受け入れられた回答が示すように、jsは箱から出してすぐにサポートします)は形式が悪いです ライブラリが提供するより強力な機能にすでに必要でない限り、コードに不要な重みと複雑さを追加します。
Josh Doebbert、2016

4
シンプルな操作の場合、ライブラリを含めることはお勧めしません
ムンナバクタ

130

クリーンな解決策は次のものを使用することArray.filterです:

var filtered = someArray.filter(function(el) { return el.Name != "Kristian"; }); 

これの問題は、IE <9 では機能しないことです。ただし、これを任意のブラウザーに実装するJavascriptライブラリ(例:underscore.js)のコードを含めることができます。


10
ただし、これにより、最初の発生だけでなく、見つかったすべての発生が削除されます
Flavien Volken '12 / 07/12

4
また、元の配列を変更するのではなく、新しい配列を返します。ユースケースに応じて、これは必要な場合とそうでない場合があります。
Jochie Nabuurs 2017

1
@JochieNabuursそれは確かに新しい配列です。ただし、オブジェクトは同じままです。各オブジェクトの値は引き続き変更でき、元の配列のオブジェクトに反映されます。
DriLLFreAK100

2
これが新しい配列を返すことについてのポイントまで、それを解決するためのソリューションを変更するだけsomeArray = someArray.filter(function(el) { return el.Name != "Kristian"; }); です、いいえ?
hBrent 2019

93

これはどう?

$.each(someArray, function(i){
    if(someArray[i].name === 'Kristian') {
        someArray.splice(i,1);
        return false;
    }
});

8
$.each()ループする前に配列の長さをキャッシュするので、エラーが発生しないので、要素を削除する$.each()と、(現在はより短い)配列の最後を超えて実行されます。(したがって、クラッシュしsomeArray[i]ますしundefinedundefined.nameクラッシュします。)
nnnnnn 2013

5
次に、スプ​​ライスの後に「return false」を追加します。
アランテイラー

18
これはJavaScriptではありません。-1
オニオンプシー2015年

20
この回答にはjQueryが必要であることに注意してください
Clarkey

68

表示されている「配列」は無効なJavaScript構文です。中括弧{}は、プロパティの名前と値のペアを持つオブジェクト用ですが、角括弧[]は配列用です-次のように:

someArray = [{name:"Kristian", lines:"2,5,10"}, {name:"John", lines:"1,19,26,96"}];

その場合、.splice()メソッドを使用してアイテムを削除できます。最初のアイテム(インデックス0)を削除するには、次のように言います。

someArray.splice(0,1);

// someArray = [{name:"John", lines:"1,19,26,96"}];

インデックスがわからないが、配列を検索して「Kristian」という名前のアイテムを見つけて削除する場合は、次のようにします。

for (var i =0; i < someArray.length; i++)
   if (someArray[i].name === "Kristian") {
      someArray.splice(i,1);
      break;
   }

編集:私はあなたの質問が「jQuery」でタグ付けされていることに気付いたので、$.grep()メソッドを試すことができます:

someArray = $.grep(someArray,
                   function(o,i) { return o.name === "Kristian"; },
                   true);

なぜ彼らはオーバーロードを追加したのですか?きっとあなたは!= "Kristian"を置くだけかもしれません。オーバーロードはどのような目的に役立ちますか?
markthewizard1234 2017年

@ markthewizard1234-の「反転」ブール引数を意味します$.grep()か?この例ではそれほど追加されませんが、はい、私はを置くことができます!=が、他の場合では、grepしたいものと反対のテストを実行する関数がすでに定義されている可能性があるため、そのオーバーロードを使用して結果を反転させることができる追加の関数。
nnnnnn 2017年

ああ、grepを含むラッパー関数がある場合は、ブール値をパラメーターとして設定できます。了解、ありがとう!
markthewizard1234 2017年

@ markthewizard1234-できますが、それは私が考えていたものではありませんfunction isEven(num) { return num%2===0 }。を使用$.grep(someArray, isEven)して、配列から偶数のみを取得したり$.grep(someArray, isEven, true)、反対のことを行って偶数でない値を取得したりできます。
nnnnnn 2017年

63

ES2015

let someArray = [
               {name:"Kristian", lines:"2,5,10"},
               {name:"John", lines:"1,19,26,96"},
               {name:"Kristian", lines:"2,58,160"},
               {name:"Felix", lines:"1,19,26,96"}
            ];

someArray = someArray.filter(person => person.name != 'John');

ジョンを削除します!


4
男... Javaから来て、そのような基本的なことを行うにはリストのフィルタリングが必要だと私は非常に混乱しています... wtf。これは、これまでに読んだOPの質問に対する最も正確な回答です。
codepleb

はい、これは良いアプローチです。ES2015(ES6)以前でも動作しますが。フィルター機能は、バージョン5.1(2011)ecma-international.org/ecma-262/5.1/#sec-15.4.4.20
user3777549

40

array.filter()を使用できます。

例えば

        someArray = [{name:"Kristian", lines:"2,5,10"},
                     {name:"John", lines:"1,19,26,96"}];

        someArray = someArray.filter(function(returnableObjects){
               return returnableObjects.name !== 'Kristian';
        });

        //someArray will now be = [{name:"John", lines:"1,19,26,96"}];

矢印関数:

someArray = someArray.filter(x => x.name !== 'Kristian')

もう1つ必要なことは、配列内のすべてのオブジェクトに個別のボタンがあることです。クリックした配列ボタンの特定のオブジェクトを削除する場合。どうやってするの 。私は角度のあるjs ng-repeatを使用してアイテムを生成しました。あなたは私を助けてくれますか
Thilak Raj

daCodaに2つの条件がある場合はどうなりますか?
マルコムサルバドール

@MalcolmSalvadorは、たとえば、別の条件がある場合は、以下のように記述して、別の&&または||で続行できると言います。必要に応じてオペレーター。someArray = someArray.filter(function(returnableObjects){return returnableObjects.name!== 'Kristian' && cond2Query.age> = 22;});
Biswajit Panday

18

オブジェクトの配列、キー、値を取得し、目的のオブジェクトを削除した後に同じ配列を返す動的関数を作成しました。

function removeFunction (myObjects,prop,valu)
        {
             return myObjects.filter(function (val) {
              return val[prop] !== valu;
          });

        }

完全な例:デモ

var obj = {
            "results": [
              {
                  "id": "460",
                  "name": "Widget 1",
                  "loc": "Shed"
              }, {
                  "id": "461",
                  "name": "Widget 2",
                  "loc": "Kitchen"
              }, {
                  "id": "462",
                  "name": "Widget 3",
                  "loc": "bath"
              }
            ]
            };


        function removeFunction (myObjects,prop,valu)
        {
             return myObjects.filter(function (val) {
              return val[prop] !== valu;
          });

        }


console.log(removeFunction(obj.results,"id","460"));

15

これは私のために働く機能です:

function removeFromArray(array, value) {
    var idx = array.indexOf(value);
    if (idx !== -1) {
        array.splice(idx, 1);
    }
    return array;
}

もう1つ欲しいのは、配列内のすべてのオブジェクトに個別のボタンがあることです。クリックした配列ボタンの特定のオブジェクトを削除する場合。どうやってするの 。私は角度のあるjs ng-repeatを使用してアイテムを生成しました。あなたは私を助けてくれますか
Thilak Raj

12

次のようなことを試すこともできます。

var myArray = [{'name': 'test'}, {'name':'test2'}];
var myObject = {'name': 'test'};
myArray.splice(myArray.indexOf(myObject),1);


10

配列に対してスプライス関数を使用します。開始要素の位置と削除するサブシーケンスの長さを指定します。

someArray.splice(pos, 1);


4

ES 6アロー機能付き

let someArray = [
                 {name:"Kristian", lines:"2,5,10"},
                 {name:"John", lines:"1,19,26,96"}
                ];
let arrayToRemove={name:"Kristian", lines:"2,5,10"};
someArray=someArray.filter((e)=>e.name !=arrayToRemove.name && e.lines!= arrayToRemove.lines)

3

最も簡単な解決策は、次のように、名前ごとに各オブジェクトのインデックスを格納するマップを作成することです。

//adding to array
var newPerson = {name:"Kristian", lines:"2,5,10"}
someMap[ newPerson.name ] = someArray.length;
someArray.push( newPerson );

//deleting from the array
var index = someMap[ 'Kristian' ];
someArray.splice( index, 1 );

私はこのアイデアが好きですが、インデックスが追加されたときのこのようなアイデアのメモリ使用制限は何ですか?オブジェクトの2つの異なるフィールドにインデックスを付ける配列があるので、元のソース配列に加えて2つのマップがあります。これは検索速度を犠牲にするための小さな価格ですか、それともメモリでより効率的なソリューションがありますか?
Brad G.

3

これはおそらくこの状況には適切でdeleteはありませんが、配列のサイズを変更する必要がない場合は、キーワードを使用して配列から項目を削除することもできることを先日知りました。

var myArray = [1,2,3];

delete myArray[1];

console.log(myArray[1]); //undefined

console.log(myArray.length); //3 - doesn't actually shrink the array down

3

この答え

for (var i =0; i < someArray.length; i++)
   if (someArray[i].name === "Kristian") {
      someArray.splice(i,1);
   }

条件を満たす複数のレコードに対して機能していません。そのような2つの連続したレコードがある場合、最初のレコードのみが削除され、他のレコードはスキップされます。使用する必要があります:

for (var i = someArray.length - 1; i>= 0; i--)
   ...

代わりに。


2

配列構文にエラーがあるように見えるので、オブジェクトではなく配列を意味すると仮定すると、Array.spliceはあなたの友達です:

someArray = [{name:"Kristian", lines:"2,5,10"}, {name:"John", lines:"1,19,26,96"}];
someArray.splice(1,1)

2

地図機能も利用できます。

someArray = [{name:"Kristian", lines:"2,5,10"},{name:"John",lines:"1,19,26,96"}];
newArray=[];
someArray.map(function(obj, index){
    if(obj.name !== "Kristian"){
       newArray.push(obj);
    }
});
someArray = newArray;
console.log(someArray);

1
しかし、配列を反復処理したい場合は、forEachを使用した方がよいのではないですか。
corse32

2

あなたも使うことができますsome

someArray = [{name:"Kristian", lines:"2,5,10"},
             {name:"John", lines:"1,19,26,96"}];

someArray.some(item => { 
    if(item.name === "Kristian") // Case sensitive, will only remove first instance
        someArray.splice(someArray.indexOf(item),1) 
})

2

これは私が使用するものです。

Array.prototype.delete = function(pos){
    this[pos] = undefined;
    var len = this.length - 1;
    for(var a = pos;a < this.length - 1;a++){
      this[a] = this[a+1];
    }
    this.pop();
  }

それから言うのと同じくらい簡単です

var myArray = [1,2,3,4,5,6,7,8,9];
myArray.delete(3);

3の代わりに任意の数を置き換えます。予想される出力は次のようになります。

console.log(myArray); //Expected output 1,2,3,5,6,7,8,9

2

(何らかの条件に基づいて)指定されたオブジェクトのすべてのオカレンスを削除する場合は、forループ内でjavascript spliceメソッドを使用します。

オブジェクトを削除すると配列の長さに影響するので、長さのチェックが損なわれないように、カウンタを1ステップ減らしてください。

var objArr=[{Name:"Alex", Age:62},
  {Name:"Robert", Age:18},
  {Name:"Prince", Age:28},
  {Name:"Cesar", Age:38},
  {Name:"Sam", Age:42},
  {Name:"David", Age:52}
];

for(var i = 0;i < objArr.length; i ++)
{
  if(objArr[i].Age > 20)
  {
    objArr.splice(i, 1);
    i--;  //re-adjust the counter.
  }
}

上記のコードスニペットは、年齢が20を超えるすべてのオブジェクトを削除します。



1

splice(i、1)ここで、iは配列の増分インデックスで、オブジェクトを削除します。ただし、spliceは配列の長さもリセットするため、「undefined」に注意してください。あなたの例を使用すると、「クリスチャン」を削除すると、ループ内の次の実行では、iは2になりますが、someArrayの長さは1になるため、「John」を削除しようとすると、「未定義」エラーが発生します。エレガントではありませんが、これに対する1つの解決策は、削除する要素のインデックスを追跡するために別のカウンターを持つことです。


1

プロパティnameが "Kristian"ではない配列からオブジェクトのみを返します

var noKristianArray = $.grep(someArray, function (el) { return el.name!= "Kristian"; });


デモ:

 var someArray = [
                {name:"Kristian", lines:"2,5,10"},
                {name:"John", lines:"1,19,26,96"},
                {name:"Kristian", lines:"2,58,160"},
                {name:"Felix", lines:"1,19,26,96"}
                ];
			 
var noKristianArray = $.grep(someArray, function (el) { return el.name!= "Kristian"; });

console.log(noKristianArray);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


0

剣道グリッドを使用したこの概念

var grid = $("#addNewAllergies").data("kendoGrid");

var selectedItem = SelectedCheckBoxList;

for (var i = 0; i < selectedItem.length; i++) {
    if(selectedItem[i].boolKendoValue==true)
    {
        selectedItem.length= 0;
    }
}

0

答えは非常に分岐して結びついていると思います。

次のパスを使用して、最新のJavaScript専門用語で指定されたオブジェクトと一致する配列オブジェクトを削除できます。


coordinates = [
    { lat: 36.779098444109145, lng: 34.57202827508546 },
    { lat: 36.778754712956506, lng: 34.56898128564454 },
    { lat: 36.777414146732426, lng: 34.57179224069215 }
];

coordinate = { lat: 36.779098444109145, lng: 34.57202827508546 };

removeCoordinate(coordinate: object) {
  const found = this.coordinates.find((obj) => obj === obj);
  if (found) {
    this.coordinates.splice(found, 1);
  }
}

this.removeCoordinate(coordinate);

-2

配列のオブジェクトにアクセスしてオブジェクトを削除したい場合は、次のようにしてください。

// inside some function

let someArray = [ {"ColumnName" : "a", "PropertySerno" : 100005,"UpdateType" : 1},
                  {"ColumnName" : "b", "PropertySerno" : 100202,"UpdateType" : 1,
        "ShowRemoveButton" : true} ];
        
        for (let item of someArray) {
          delete item.ShowRemoveButton;
        }
        console.log(item.outputMappingData.Data);
        
//output will be like that = [ {"ColumnName" : "a", "PropertySerno" : 100005,"UpdateType" : 1},
//                             {"ColumnName" : "b", "PropertySerno" : 100202,"UpdateType" : 1 }];
        

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.