Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

ドキュメントの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()で先頭〜後ろから2番目を取り除いた戻り値を詰め直してもよい。

<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>
masakurapa
自分の作業メモ的なことを書く感じ。 PHP/Goで開発をしています。 家ではAWS/Svelte3/Goを触りながら色々作って遊んでます。
kaonavi
クラウド人材管理ツール「カオナビ」の製造・販売・サポートを行い、企業の人材管理にイノベーションを起こすことを目的としている会社
https://www.kaonavi.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away