【連想配列】要素と値の効率的な追加・削除の方法

JavaScriptを利用したコードを作成しています。

連想配列を使って、Keyやvalueを追加、削除する動きをさせているのですが、効率的な動作の書き方がわからず質問させてもらいます。

目的の動きは以下のとおりです。
①：要素数５つの連想配列（key 数字 : value String）を作る。
②：あるkeyを指定して、その要素のvalueを削除
③：②で指定されたKey以降のvalueがスライドする形で削除された値となる
④：最後の要素がKey、value共に削除される

最大の要素数は５つなので、力わざでそれぞれのKeyの番号に対するコードを作成する方法もありますが、効率的ではないので良い方法を知りたいです。

良い方法ご存知の方おりましたら、ご教授いただけないでしょうか？

下記のコードは2のKeyを削除する内容ですが、それぞれのKeyによって削除、追加するようにしたいです。

JS
1import React from "react";
2import { View, Button } from "react-native";
3
4export default function TestArray() {
5  let array = {
6    0: "0番目",
7    1: "1番目",
8    2: "2番目",
9    3: "3番目",
10    4: "4番目",
11  };
12  let lastNum = Object.keys(array).length;
13
14  console.log("-----Init------");
15  for (var key in array) {
16    console.log(key + "：" + array[key]);
17  }
18
19  function handleDelete() {
20    console.log("-----Delete------");
21
22    let targetKey = 2;
23
24    if (targetKey != lastNum - 1) {
25      delete array[targetKey];
26      array[targetKey] = array[targetKey + 1];
27      array[targetKey + 1] = array[targetKey + 2];
28      delete array[lastNum - 1];
29    } else {
30      delete array[lastNum - 1];
31    }
32    for (var key in array) {
33      console.log(key + "：" + array[key]);
34    }
35  }
36  return (
37    <View>
38      <Button
39        title="削除"
40        onPress={() => {
41          handleDelete();
42        }}
43      />
44    </View>
45  );
46}
47

追記①

JS
1import React, { useState } from "react";
2import { View, Button, Text } from "react-native";
3import { TextInput } from "react-native-gesture-handler";
4
5function Item({ setText, handleMakeNew, handleDelete, i }) {
6  return (
7    <View>
8      <Text>{i}</Text>
9      <TextInput
10        onChange={(e) => {
11          setText(i, e.nativeEvent.text);
12        }}
13      />
14      <View>
15        <Button
16          title="追加"
17          onPress={() => {
18            handleMakeNew();
19          }}
20        />
21        <Button
22          title="削除"
23          onPress={() => {
24            handleDelete();
25          }}
26        />
27      </View>
28    </View>
29  );
30}
31
32export default function TestListItem() {
33  const [count, setCount] = useState(1);
34  const [texts, setTexts] = useState({});
35
36  function handleMakeNew() {
37    setCount((v) => v + 1);
38  }
39  function handleDelete() { //①ここで連想配列の要素を削除
40    setCount((v) => v - 1);
41    
42  }
43  return (
44    <View>
45      <Text>{JSON.stringify(texts)}</Text>
46      {[...Array(count).keys()].map((i) => (
47        <Item
48          handleMakeNew={handleMakeNew}
49          handleDelete={handleDelete}
50          setText={(i, text) => setTexts((prev) => ({ ...prev, [i]: text }))}
51          key={i}
52          i={i}
53        />
54      ))}
55    </View>
56  );
57}
58

maisumakun

2020/08/08 04:59

キーが数値の連想配列で書いていますが、単なる配列を使えない事情があるのでしょうか？

tomaa

2020/08/08 05:04

コメントありがとうございます。すでに作成したコードが、連想配列の利用をベースにしているため、連想配列での動きにしたいという状況です。効率的なコードの作成が難しい場合は、通常の配列での対応も考えたいと思います。

maisumakun

2020/08/08 05:07

TestArray自体は通常の関数として呼び出す想定でしょうか、それともReactコンポーネントにするものでしょうか？

tomaa

2020/08/08 05:19

React初心者のため、正確な回答できないのですが、 https://codesandbox.io/s/tender-satoshi-37pe3?file=/src/App.js こちらのコードがベースになっています。追加ボタンを押すとコンポーネントが追加され、連想配列も追加されます。こちらのコードには削除ボタンがないですが、今回質問している内容で実装したいと思っています。

maisumakun

2020/08/08 05:38

> こちらのコードがベースになっています。当該のコードへ、TestArrayをどこにどのような形で組み込むのかがわからないとなんとも言えません（呼び出し部分のコードはないのですか？）。

tomaa

2020/08/08 06:44

質問に追記を加えました。 TestArrayは、`const [texts, setTexts] = useState({});`の`texts`にあたります。質問コードの`handleDelete`は、追記①の`handleDelete`にあたります。意図していない回答であればすみません。

maisumakun

2020/08/08 06:51

えっと、TestArrayはサンプルとして提示しただけのコードで、そのまま使うコードではなかった、ということで間違いないですか？

tomaa

2020/08/08 06:56

はい、そうなります。最終的には、連想配列の要素数が増減する中で、要素の変更をしたいです。その前に、連想配列の要素数が固定した状態で、要素の削除と値の変更を試しましたが、その状態でもうまく動作しなかったので、その状態で質問させてもらっています。

tomaa

2020/08/08 07:00

> TestArray自体は通常の関数として呼び出す想定でしょうか、それともReactコンポーネントにするものでしょうか？こちらの質問に回答するためには、追記したコードでTestArrayの動きを説明するほうが、わかりやすいと思いました。自分の見解では、「Reactコンポーネントにするもの」と考えています。