Svelte3 配列の操作方法の色々をメモる

ドキュメントのReactiveの説明によると
Svelteはpush()とかsplice()での配列操作では画面の自動更新されないので
配列要素の追加・更新・削除で画面自動更新したいときの実装をメモっていきます。

Because Svelte's reactivity is based on assignments, using array methods like .push() and .splice() won't automatically trigger updates. Options for getting around this can be found in the tutorial.

ここに書いてあるコードは ↓ に貼り付ければ動きます。
https://svelte.dev/repl/hello-world?version=3.4.4

ダメなやり方

push(), splice() 等々の関数を呼び出しただけでは画面は自動更新されません。

<script>
	let array = [1, 2, 3, 4, 5];
	
	function ng() {
		array.push(array.length + 1)
	}
</script>

<div>[{array.join(', ')}]</div>
<button on:click={ng}>ng</button>

要素の追加

先頭に要素を追加する

<script>
	let array = [];

	function ok1() {
		array.unshift(array.length + 1)
		array = array
	}

	function ok2() {
		array = [array.length + 1, ...array]
	}
</script>

<div>[{array.join(', ')}]</div>
<button on:click={ok1}>ok1</button>
<button on:click={ok2}>ok2</button>

末尾に要素を追加する

<script>
	let array = [];

	function ok1() {
		array.push(array.length + 1)
		array = array
	}

	function ok2() {
		array = [...array, array.length + 1]
	}

	function ok3() {
		array[array.length] = array.length + 1
	}
</script>

<div>[{array.join(', ')}]</div>
<button on:click={ok1}>ok1</button>
<button on:click={ok2}>ok2</button>
<button on:click={ok3}>ok3</button>

指定位置にN個の要素を追加

おとなしくsplice()した後に変数上書きするのが簡単そう・・・。

<script>
	let array = [1, 2, 3, 4, 5];

	function ok1() {
		array.splice(1, 0, array.length)
		array = array
	}
</script>

<div>[{array.join(', ')}]</div>
<button on:click={ok1}>ok1</button>

要素の更新

あえてsplice()を使うメリットはないが。

<script>
	let array = [1, 2, 3, 4, 5];
	let cnt = 0;

	function ok1() {
		array.splice(1, 1, ++cnt)
		array = array
	}

	function ok2() {
		array[2] = ++cnt;
	}
</script>

<div>[{array.join(', ')}]</div>
<button on:click={ok1}>ok1</button>
<button on:click={ok2}>ok2</button>

要素の削除

先頭を削除

splice()で先頭以外を取り除いた戻り値を詰め直してもよい。

<script>
	let array = [1, 2, 3, 4, 5];

	function ok1() {
		array.shift()
		array = array
	}

	function ok2() {
		array = array.splice(1)
	}
</script>

<div>[{array.join(', ')}]</div>
<button on:click={ok1}>ok1</button>
<button on:click={ok2}>ok2</button>

末尾を削除

splice()で先頭〜後ろから２番目を取り除いた戻り値を詰め直してもよい。

<script>
	let array = [1, 2, 3, 4, 5];

	function ok1() {
		array.pop()
		array = array
	}

	function ok2() {
		array = array.splice(0, array.length - 1)
	}
</script>

<div>[{array.join(', ')}]</div>
<button on:click={ok1}>ok1</button>
<button on:click={ok2}>ok2</button>

指定位置からN個の要素を削除

おとなしくsplice()した後に変数上書きするのが簡単そう・・・。

<script>
	let array = [1, 2, 3, 4, 5];

	function ok1() {
		array.splice(1, 1)
		array = array
	}
</script>

<div>[{array.join(', ')}]</div>
<button on:click={ok1}>ok1</button>