web-dev-qa-db-ja.com

Svelteでスプライス後に配列を更新する方法は？

私はSvelteを学んでいて、コンポーネントまたはページで更新するために配列を再割り当てする必要があるというドキュメントを読んでいます。そのため、彼らはより慣用的な解決策を考案しました。書く代わりに：

messages.Push('hello');
messages = messages;

代わりに書くことができます：

messages = [...messages, 'hello'];

わかりました。しかし、ドキュメントは言う：

同様のパターンを使用して、ポップ、シフト、シフト解除、スプライスを置き換えることができます。

しかし、どうやって？どうすればよいのかわかりませんremove項目を配列から削除します。さらに言えば、次のことをもっと慣用的に書くにはどうすればよいですか？

messages.splice(messages.indexOf('hello'), 1);
messages = messages;
javascriptarrayssvelte
4
Mielipuoli

通常のPushおよびpopまたは `スプライスをアレイで実行できます

ただし、Svelteの反応は割り当てによってトリガーされるため、Pushやspliceなどの配列メソッドを使用しても、自動的に更新は行われません。

JavaScriptの不変の配列とオブジェクトに関するすべて によると、この方法でそれを行うことができます...

_let messages = ['something', 'another', 'hello', 'Word', 'another', 'again'];

const indexOfHello = messages.indexOf('hello');

messages = [...messages.slice(0, indexOfHello), ...messages.slice(indexOfHello + 1)];
_

spliceとsliceの違いに注意してください

Splice（）メソッドは、項目を配列に追加/配列から削除し、削除された項目を返します。 注：このメソッドは元の配列を変更します。 構文：array.splice(start, deleteCount, itemstoAdd, addThisToo);

だが

Slice（）メソッドは、配列内の選択された要素を新しい配列オブジェクトとして返します。 slice（）メソッドは、指定された開始引数で始まる要素を選択し、指定された終了引数で終了しますが、指定された終了引数は含みません。 注：元の配列は変更されません。

言葉で

配列の一部の浅いコピーを、最初から最後まで選択された新しい配列オブジェクトに返します（末尾は含まれません）。元の配列は変更されません。 構文：array.slice(start, end);

1
Parables Boltnoel

1つのライナーは、pop、splice、shift、unshiftなどの配列を変更する配列関数では機能しません。これらはすべて、実際の配列を変更し、変更された配列を返さないです。

たとえば、スプライスの場合（強調は私のもの）：

Splice（）メソッドは、既存の要素を削除または置換したり、新しい要素を追加したりして、配列の内容を変更しますin place。

ワンライナーは正しい値を割り当てません、これを行わないでください：

let bob = [23, 46];
bob = bob.splice(0,1); // bob is now [23], instead of [46], after removing the first element

これは、正しい直感があったことを意味します。スプライスは再割り当ての前に発生する必要があります。通常、2つのステートメントで発生します。それは期待どおりに反応し、helloのない配列になります。

let foo = ['hello', 'world'];
foo.splice(foo.indexOf('hello'), 1);
foo = foo; // foo is now ['world'], after removing 'hello'
0
Félix Gagnon-Grenier

前述のように、スヴェルトの反応は割り当てによって引き起こされます。 現在のSvelteチュートリアル は、JavaScriptの（ES6） スプレッド構文 （3つのドット）を使用して、次に大きい数値を配列に追加し、冗長な割り当てよりも慣用的な解決策を提供します。 Push：

function pushNumber() {     
    numbers = [...numbers, lastnumber]; // 1, 2, 3, 4, 5
}

スプレッド構文を使用して、pop、shift、unshift、およびspliceを置き換えることができますが、場合によっては操作の時間と複​​雑さが増す可能性があります。

function unshiftNumber() {  
    numbers = [firstnumber, ...numbers]; // 0, 1, 2, 3, 4
}

function popNumber() {
    numbers = [...numbers.slice(0,numbers.length - 1)]; // 1, 2, 3
}

function shiftNumber() {
    numbers = [...numbers.slice(1,numbers.length)]; // 2, 3, 4
}

function spliceNumber() {
    numbers = [firstnumber, ...numbers.slice(0,numbers.length-1)];// 0, 1, 2, 3
}

ただし、スプレッドはそのための1つの方法にすぎません。 pop/Pushなどを使用しない背後にある目的は、不変性を促進することです。したがって、たとえば、すべての削除は単なるフィルターになります。

0
Michael McGinnis