[TypeScript]連想配列にキーと値の要素を追加するには？

どうも、ちょげ(@chogetarou)です。

連想配列にキー（key）と値(value)の要素を追加する方法を紹介します。

Objectの場合

オブジェクト(Object)にキー（プロパティ）と値(value)の要素を追加する方法は、３つあります。

[]

１つ目は、[]を使う方法です。

まず、「=」の左辺に、オブジェクト名と[]を記述し、[]内に追加するキー（プロパティ）を指定します。

そして、「=」の右辺に、追加する値を指定します。

//obj=対象のオブジェクト, key=追加するキー（プロパティ）, value=追加する値
obj[key] = value;

上記の代入で、オブジェクト(Object)にキー（プロパティ）と値の要素を追加できます。

使用例

type Numbers = {
    [key: string]: number
}

const nums: Numbers = { 
    "one": 1, 
    "two": 2,
    "three": 3,
    "four": 4,
    "five": 5,
}

nums["six"] = 6;
nums["seven"] = 7;

console.log(nums);

出力：
[LOG]: {
  "one": 1,
  "two": 2,
  "three": 3,
  "four": 4,
  "five": 5,
  "six": 6,
  "seven": 7
} 

.（ドット）

２つ目は、「.（ドット）」を使う方法です。

まず、「=」の右辺で、「.(ドット)」を使い、オブジェクトの新しいキー（プロパティ）にアクセスします。

そして、「=」の右辺に、追加する値を指定します。

//obj=対象のオブジェクト, key=追加するキー（プロパティ）, value=追加する値
obj.key = value;

上記の代入で、オブジェクト(Object)にキー（プロパティ）と値の要素を追加できます。

使用例

type Numbers = {
    [key: string]: number
}

const nums: Numbers = { 
    "one": 1, 
    "two": 2,
    "three": 3,
    "four": 4,
    "five": 5,
}

nums.six = 6;
nums.seven = 7;

console.log(nums);

出力：
[LOG]: {
  "one": 1,
  "two": 2,
  "three": 3,
  "four": 4,
  "five": 5,
  "six": 6,
  "seven": 7
} 

Object.assign()

３つ目は、Object.assign()を使う方法です。

まず、Object.assign()を呼び出します。

Object.assign()の第１引数に対象のオブジェクト、第２引数に追加する要素をまとめたオブジェクトを指定します。

//obj=対象のオブジェクト
Object.assign(obj, {key1: value1, key2: value2, ・・・}); //{}内の要素を追加

上記のObject.assign()は、対象のオブジェクト(Object)に第２引数のオブジェクトの要素を追加します。

使用例

type Numbers = {
    [key: string]: number
}

const nums: Numbers = { 
    "one": 1, 
    "two": 2,
    "three": 3,
    "four": 4,
    "five": 5,
}

Object.assign(nums, {"six": 6, "seven": 7, "eight": 8});

console.log(nums);

出力：
[LOG]: {
  "one": 1,
  "two": 2,
  "three": 3,
  "four": 4,
  "five": 5,
  "six": 6,
  "seven": 7,
  "eight": 8
} 

Map(マップ)の場合

Map(マップ)にキー(key)と値(value)の要素を追加するには、set()を使います。

まず、Map(マップ)からset()を呼び出します。

そして、set()の第１引数にキー、第２引数に値を指定します。

//map=対象のマップ, key=追加するキー, value=追加する値
map.set(key, value);

上記のset()は、Map(マップ)にキーと値の要素を追加します。

使用例

const nums = new Map();
nums.set("one", 1);
nums.set("two", 2);
nums.set("three", 3);
nums.set("four", 4);
nums.set("five", 5);

console.log(nums);

出力：

[LOG]: Map (5) {"one" => 1, "two" => 2, "three" => 3, "four" => 4, "five" => 5} 

まとめ

連想配列にキーと値の要素を追加する方法は、オブジェクトとMapで異なります。

オブジェクト(Object)にキー（プロパティ）と値(value)の要素を追加する方法は、次の３つです。

• []を使う方法
  obj[key] = value;
• 「.（ドット）」を使う方法
  obj.key = value;
• Object.assign()を使う方法
  Object.assign(obj, {key1: value1, key2: value2, ・・・});

Map(マップ)の場合は、set()を使います。

map.set(key, value);

[TypeScript]Map(マップ)のキー(key)の存在チェックをするには？

Map(マップ)にキー(key)が存在するかどうか確認する方法を紹介します。

www.choge-blog.com

2022.11.21

[TypeScript]文字列(string)の空白を全削除するには？

文字列(string)の空白を全て削除する方法を紹介します。

www.choge-blog.com

2022.11.03

404 NOT FOUND | ちょげぶろぐ

www.choge-blog.com