2016-06-14 5 views
2

ダン・アブラモフからreduxのビデオを見ていて、sliceを使用してidから配列の要素を削除し、新しい配列を返しました突然変異なし。スライスまたはスプレッドを使用してJavaScriptの配列から要素を削除する

var arrayOld = ['apple', 'orange', 'fig'] 
var index = arrayOld.indexOf('orange') 
var arrayNew = arrayOld.slice(0,index).concat(arrayOld.slice(index + 1)) 
// ['apple', 'fig'] 

es6 spreadの構文を使用して同じことを行う方法を知りましたか?

また、なぜ簡単な方法がないのだろうと思います。これを行うためのヘルパー関数、単純にconcatメソッドと同じように機能する要素です。削除する要素のidを渡すだけで、新しい配列が返されるため、基本的にスプライスされますが、突然変異はありません。

+0

'[... arr]'は 'arr 'と同じです。スライス() '、副作用の除去のためにスライスしスプライスすることができます –

+0

ビデオでは、配列の広がり' '' [... arrayOld.slice(0、index)、..] .arrayOld.slice(index + 1)] '' ' – ferndopolis

答えて

8

なぜフィルタリングしないのですか?

console.log(['apple', 'orange', 'fig'].filter(item => item !== 'orange')); 
// [ 'apple', 'fig' ] 

これは、述語関数を満たす要素のみを持つ新しい配列を返します。


注:ただ一つの要素、または特定のインデックス位置にある要素のみを除去することで、これは使用できません。その場合は、あなたは、単にこの

var index = arrayOld.indexOf('orange') 
console.log(arrayOld.filter((item, idx) => idx !== index)); 

のようにそれを行うことができます述語関数に渡された2番目のパラメータは配列の要素の実際のインデックスです。

+0

フィルタリングされたインデックスを格納することは、おそらくインデックスを念頭に置いてフィルタリングするよりもクリーンであるでしょう。' let indices = []; == {if(e === foo){indices.push(i); falseを返す;} trueを返す;}); ' –

1

機能的JSでは配列メソッドのいくつかがよく考えられていないので、私はこの件についていくつか考えていました。だから、彼らは少し微調整する必要があります... 2つの問題があります

  1. あなたはあなたのものではないものを変更するべきではありません。
  2. 適切なものを返す必要があります。

たとえば、アイテムを削除するときに、元の配列に変更を加えずに、削除されたアイテムまたは結果の配列を関数の引数として渡すことができます。したがって、この特定のケースでは、上記のような2つのオプションがあります。

myFunction(myArr.slice(0,i).concat(a.slice(i+1))) // pass resulting array as argument 

または削除されたアイテムを結果として持つ別の方法があります。

myFunction(a.slice().splice(i,1)[0]) // pass deleted item as an argument 
2

@thefourtheyeは、すでにあなたの例のための.filterを使用することをお勧めします述べたように。

あなたはスプレッド演算子を使用してインデックスによって要素を削除したい場合は、次の操作を行うことができます

`` `

let arrayOld = ['apple', 'orange', 'fig'] 
 
let index = 1; 
 
let arrayNew = [...arrayOld.slice(0, index), ...arrayOld.slice(index + 1)];

` ``

関連する問題