2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【超基礎】TypeScript配列について

Last updated at Posted at 2024-11-30

前提

この記事は、初学者の私が、サバイバルTypeScriptで学んだこと+調べたことをまとめたものになります。

従って、経験則に基づいた発言ではないため、一部慣習とは違っていたり、認知にずれがあったりする可能性がありますので、ぜひコメントで指摘していただけると幸いです。

環境

記事内のコードは以下の環境で動作確認済みです。

  • Node.js: v22.10.0
  • TypeScript: Version 5.6.3

TypeScriptにおける配列

  • 「型」に関する部分以外は基本的にc++と同じような文法
  • インデックスで要素にアクセスできる
  • 特殊な種類のオブジェクトという立ち位置
  • 多次元配列や、オブジェクトの配列も作れる

基本

[]で囲み、,で区切る 例:[a,b,c] [1,2,3]

const numbers: number[] = [1,2,3]

空の配列の作成

空配列の宣言には以下の2種類の方法がある。後者は要素数を指定できる。

各要素はundefined

//空の配列
const nums1: number[] =[]
//要素数5の空の配列
const nums2: number=new Array(5)

console.log(nums[2])// =>undefined

型注釈

型注釈はType[]Array<Type>

(Type|Type)[]のようにすることで複数の型を一つの配列に入れられる

const strs1: string[] = ["a","b","c"]

const strs2: Array<string> = ["a","b","c"]

const strNums: (string|number)[] = ["a","b",3]

要素へのアクセス

インデックスを使ってアクセスする

例の様に0からスタート

const nums: number[] =[1,2,3,4,5]

console.log(nums[0])//=>1

多次元配列

Type[][]のようにすることで、多次元配列を実現できる

インデックスによりアクセス可能

const nums: number[][]=[
    [1,2,3],
    [4,5,6],
    [7,8,9]
]

console.log(nums[0][0])//=>1

オブジェクトの配列

オブジェクトで配列を作ることができる

インデックスとプロパティによる参照を組み合わせて要素にアクセスする

const arrObj =[
    {name: "Taro",age: 1},
    {name: "Hanako",age: 51},    
]

console.log(arrObj[1].name)//=>Hanako

配列の操作

JavaScriptの配列捜査と同じメソッドが使えます

配列はオブジェクト?

JS,TSにおいて配列は特殊なオブジェクトという立ち位置にある。

console.log(typeof []) //=>object

したがって、constで宣言しても、要素の変更は可能である

const strs :string[]= ["a", "b", "c"];
strs[2]="k";//変更可能
console.log(strs)//=>;["a", "b", "k"];

また、代入は値を渡すのではなく、参照を共有するため、代入先の配列を変更すると代入元も変わる

const strs1: string[] = ["a", "b", "c"];

const strs2: string[] = strs1//新しい配列strs2にstrs1を代入

strs2[2] = "k"//今作った配列を編集

console.log(strs1)//=>;["a", "b", "k"];

まとめ

以上になります。

当方初学者なため、認知のずれや、モダンな開発現場ではもう使わない表現などがありましたらコメントで指摘していただけると幸いです。😸

参考

2
0
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?