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

Question

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

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

達成したい：

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

score 936 · Accepted Answer

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

//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, someArray.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、またはArray.spliceと組み合わせてArray.findIndex（MDNを参照）、配列から1つ以上の要素を削除できます。

// non destructive filter > noJohn = John removed, but someArray will not change
let someArray = getArray();
let noJohn = someArray.filter( el => el.name !== "John" ); 
log(`let noJohn = someArray.filter( el => el.name !== "John")`,
  `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("", 
  `someArray2 = someArray2.filter( el => el.name !== "John" )`,
  `destructive filter/reassign John removed [someArray2] =`, 
  format(someArray2));
log(`**someArray2.length after filter ${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("",
  `someArray3.splice(someArray3.findIndex(v => v.name === "Kristian"), 1),`,
  `destructive splice /w findIndex Brian remains [someArray3] =`, 
  format(someArray3));
log(`**someArray3.length after splice ${someArray3.length}`);

// 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("", `someArray4.splice(indx, indx >= 0 ? 1 : 0)`,
  `check findIndex result first [someArray4] = (nothing is removed)`,
  format(someArray4));
log(`**someArray4.length (should still be 3) ${someArray4.length}`);

// -- helpers -- 
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>

score 230 · Accepted Answer

クリーンな解決策は、以下を使用することArray.filterです。

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

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

score 144 · Accepted Answer

次のような一般的なタスクには、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"; });

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

score 95 · Accepted Answer

これはどう？

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

score 93 · Accepted Answer

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');

ジョンを削除します！

score 76 · Accepted Answer

示されている「配列」は無効な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);

score 56 · Accepted Answer

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')

score 20 · Accepted Answer

動的関数がオブジェクトの配列、キー、値を受け取り、目的のオブジェクトを削除した後に同じ配列を返すようにしました。

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"));

score 17 · Accepted Answer

これは私のために働く関数です：

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

score 13 · Accepted Answer

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

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

score 12 · Accepted Answer

12

someArray = jQuery.grep(someArray , function (value) {
        return value.name != 'Kristian';
});

于 2013-07-26T18:00:46.720 に答える

score 10 · Accepted Answer

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

someArray.splice(pos, 1);

score 10 · Accepted Answer

配列を使った簡単な作業については、 UndercoreJSに投票してください。

_.without（）関数は、要素を削除するのに役立ちます。

 _.without([1, 2, 1, 0, 3, 1, 4], 0, 1);
    => [2, 3, 4]

score 10 · Accepted Answer

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

名前プロパティ値が「Kristian」であるオブジェクトのインデックスを取得します

const index = someArray.findIndex(key => key.name === "Kristian");
console.log(index); // 0

スプライス関数を使用して、nameプロパティ値が「Kristian」であるオブジェクトを削除します。

someArray.splice(index,1);
console.log(someArray); // [{name:"John", lines:"1,19,26,96"}]

score 9 · Accepted Answer

これがマップとスプライスの例です

const arrayObject = [
  { name: "name1", value: "value1" },
  { name: "name2", value: "value2" },
  { name: "name3", value: "value3" },
];

let index = arrayObject.map((item) => item.name).indexOf("name1");
if (index > -1) {
  arrayObject.splice(index, 1);
  console.log("Result", arrayObject);
}

出力

Result [
  {
    "name": "name2",
    "value": "value2"
  },
  {
    "name": "name3",
    "value": "value3"
  }
]

score 9 · Accepted Answer

パフォーマンス

今日2021.01.27選択したソリューションについて、Chrome v88、Safari v13.1.2、Firefoxv84のMacOsHighSierra10.13.6でテストを実行します。

結果

すべてのブラウザの場合：

要素が存在しない場合の最速/最速のソリューション：AおよびB
大きなアレイ向けの最速/最速のソリューション：C
要素が存在する場合の大きな配列の最速/最速のソリューション：H
小さなアレイの非常に遅いソリューション：FおよびG
大きなアレイの非常に遅いソリューション：D、E、F

詳細

私は4つのテストケースを実行します：

小さな配列（10個の要素）と要素が存在します-ここで実行できます
小さな配列（10個の要素）と要素が存在しません-ここで実行できます
大きな配列（ミリオン要素）と要素が存在します-ここで実行できます
大きな配列（ミリオン要素）と要素が存在しません-ここで実行できます

以下のスニペットは、ソリューション間の違いを示しています A B C D E F G H I

function A(arr, name) {
  let idx = arr.findIndex(o => o.name==name);
  if(idx>=0) arr.splice(idx, 1);
  return arr;
}


function B(arr, name) {
  let idx = arr.findIndex(o => o.name==name);
  return idx<0 ? arr : arr.slice(0,idx).concat(arr.slice(idx+1,arr.length));
}


function C(arr, name) {
  let idx = arr.findIndex(o => o.name==name);
  delete arr[idx];
  return arr;
}


function D(arr, name) {
  return arr.filter(el => el.name != name);
}


function E(arr, name) {
  let result = [];
  arr.forEach(o => o.name==name || result.push(o));
  return result;
}


function F(arr, name) {
  return _.reject(arr, el => el.name == name);
}


function G(arr, name) {
  let o = arr.find(o => o.name==name);
  return _.without(arr,o);
}


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


function I(arr, name) {
  return $.grep(arr,o => o.name!=name);
}








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

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

let test3 = [   
    {name:"John3", lines:"1,19,26,96"},
    {name:"John", lines:"1,19,26,96"},
  {name:"Joh2", lines:"1,19,26,96"},
];

console.log(`
Test1: original array from question
Test2: array with more data
Test3: array without element which we want to delete
`);

[A,B,C,D,E,F,G,H,I].forEach(f=> console.log(`
Test1 ${f.name}: ${JSON.stringify(f([...test1],"Kristian"))}
Test2 ${f.name}: ${JSON.stringify(f([...test2],"Kristian"))}
Test3 ${f.name}: ${JSON.stringify(f([...test3],"Kristian"))}
`));

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"> </script>
  
This shippet only presents functions used in performance tests - it not perform tests itself!

そしてここにクロムの結果の例があります

score 6 · Accepted Answer

ES6矢印機能付き

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)

score 4 · Accepted Answer

これはおそらくこの状況にはそれほど適切ではありませんが、先日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

score 3 · Accepted Answer

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

//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 );

score 3 · Accepted Answer

マップ機能もご利用いただけます。

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);

score 3 · Accepted Answer

（何らかの条件に基づいて）特定のオブジェクトのすべてのオカレンスを削除する場合は、forループ内でjavascriptspliceメソッドを使用します。

オブジェクトを削除すると配列の長さに影響するため、長さのチェックが損なわれないように、必ずカウンターを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歳を超えるすべてのオブジェクトを削除します。

score 3 · Accepted Answer

この答え

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

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

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

代わりは。

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

javascriptのsplice（）関数を使用します。

これは役立つかもしれません：http ：//www.w3schools.com/jsref/jsref_splice.asp

score 2 · Accepted Answer

また、使用することができます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) 
})

score 2 · Accepted Answer

これが私が使っているものです。

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

score 2 · Accepted Answer

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

次のパスを使用して、最新の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: Coordinate): Coordinate {
    const found = this.coordinates.find((coordinate) => coordinate == coordinate);
    if (found) {
      this.coordinates.splice(found, 1);
    }
    return coordinate;
  }

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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>

score 0 · Accepted Answer

剣道グリッドを使用したこのコンセプト

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

var selectedItem = SelectedCheckBoxList;

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

score 0 · Accepted Answer

配列内の既知の（またはおそらく一意の）オブジェクトにプロパティがないが、削除するオブジェクトへの参照がある場合は、unregisterObject以下のメソッドで行うことができます。

let registeredObjects = [];

function registerObject(someObject) { registeredObjects.push(someObject); }
function unregisterObject(someObject) { registeredObjects = registeredObjects.filter(obj => obj !== someObject); }

let myObject1 = {hidden: "someValue1"}; // Let's pretend we don't know the hidden attribute
let myObject2 = {hidden: "someValue2"};

registerObject(myObject1);
registerObject(myObject2);
console.log(`There are ${registeredObjects.length} objects registered. They are: ${JSON.stringify(registeredObjects)}`);

unregisterObject(myObject1);
console.log(`There are ${registeredObjects.length} objects registered. They are: ${JSON.stringify(registeredObjects)}`);

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

31 に答える 31

パフォーマンス

結果

詳細

Related

Reference