Javascriptの配列操作を忘れすぎるのでメモ

配列編

配列を調べる

そいつが配列がどうかを調べる

配列ならtrue、そうじゃないならfalseが返る

関数の戻り値が配列だったりそうじゃなかったりする事がままあるので意外によく使う

たとえばファイル選択ダイアログを呼び出した時、戻り値が単一の文字列か、文字列の配列（複数ファイル選択した場合）かを調べなければならない。

code:js

//フォルダ選択ダイアログを表示して取得

const options: dialog.OpenDialogOptions = {

defaultPath: defaultPath,

directory: true,

multiple: false, //複数指定を禁止してはいるけどね

recursive: false,

title: 'Set Move Folder',

}

//フォルダパスを取得

//dialog.openは Promise<string | string[] | null> を戻す

const result = await dialog.open(options)

//nullか空文字だった場合初期値をそのまま返す

return resultstr ? resultstr : defaultPath;

配列の長さ（要素数）を調べる

<結果：要素数> = <配列>.length

配列に要素が含まれているか調べる

<結果：true/false> = <配列>.includes(<調べたい要素>)

<結果：true/false> = <配列>.includes(<調べたい要素>,<調べ始めるインデックス番号>)

要素が見つかった場合はtrue、見つからなかった場合はfalseが返る。昔は存在確認にもindexOfが使われていたがもう古い。

code:js

console.log(pets.includes('cat')); //-> true

要素の位置(添字・インデックス番号）を調べる

<結果：インデックス番号> = <配列>.indexOf(<調べたい要素>)

<結果：インデックス番号> = <配列>.indexOf(<調べたい要素>,<調べ始めるインデックス番号>)

code:js

console.log(beasts.indexOf('bison')); //-> 1

console.log(beasts.indexOf('bison', 2)); //-> 4

console.log(beasts.indexOf('giraffe')); //-> -1

要素の追加

最後尾にひとつ（以上）追加

<新しい配列の長さ> = <配列>.push(<新しい要素>)

<新しい配列の長さ> = <配列>.push(<新しい要素>,<新しい要素>,<新しい要素>...)

配列は追加したぶんだけ増えた状態に更新される(破壊的メソッド)

返す値は「長さ」であることに注意

先頭にひとつ（以上）追加

<新しい配列の長さ> = <配列>.unshift(<新しい要素>)

<新しい配列の長さ> = <配列>.unshift(<新しい要素>,<新しい要素>,<新しい要素>...)

配列は追加したぶんだけ増えた状態に更新される(破壊的メソッド)

返す値は「長さ」であることに注意

一度に複数個追加する（＝並べた順番で追加する）場合と、複数回unshiftを行う（＝毎回全体をずらす）場合では同じ結果にならないことに注意

code:js

arr.unshift(1, 2, 3);

arr.unshift(1);

arr.unshift(2);

arr.unshift(3);

ふたつの配列を合体する

<合体後の新しい配列> = <配列A>.concat(<配列B>)

配列Aの後ろに配列Bが追加された新しい配列を作る。

配列は新しく作られるため、配列A/Bに影響を与えない。

code:js

const array3 = array1.concat(array2);

要素の削除

添字（インデックス番号）がわかっている場合

<配列>.splice(<削除範囲開始インデックス番号>, <削除する個数>)

添字がわからない／要素の内容から削除したい場合

<配列>.filter(<コールバック関数>)

本来は「配列の全要素から条件を満たした内容の要素のみ残した配列を作る」メソッド。つまり「指定した内容と一致しない要素」のみで配列を作れば、その要素を削除したことになる

指定した内容と同じ内容の要素は全て削除される

code:js

const result = words.filter((w) => w != "e");　// w != "e" はwがeじゃないときにtrueが返る式

console.log(result);

最後尾からひとつだけ削除したい場合

<最後尾の要素> = <配列>.pop()

code:js

console.log(arr.pop()) //-> "d"

先頭からひとつだけ削除したい場合

<先頭の要素> = <配列>.shift()

先頭からn個が必要で、それ以降を消したい／個数上限を設けたい場合

<配列>.length = <個数>

lengthに値を代入すると配列はその個数に制限され、以降はカットされる

code:js

arr.length = 3

余談：ちなみにlengthの数を増やすと増えた要素はundefinedになる

使ってはいけない

delete演算子

指定した要素がundefinedになるだけで、配列の個数は減らない

配列をループで回す

for + カウンタ

code:js

for(let i=0; i<arr.length; i++) {

}

Cから受け継ぐいにしえのスタイル。タイプ数が多くなるので敬遠されがち

for ... of

code:js

for(const item of arr) {

console.log(item)

}

ofで各要素が取れる。シンプルでわかりやすい

取得される要素はインデックス順である（が、インデックス値が重要ならentriesを使ったほうがよかろう）

内容がundefinedでもスキップされたりはしない

for ... in ではないことに注意。

inは要素の「インデックス値」を取る。inで書きたい場合は以下のようになる

code:js

for(const i in arr) {

}

なにかと不便が多いので配列に対してfor...inを使うことはめったにない

code:js

console.log(index, element);

}

通常の配列だとあまりありがたみを感じないかも。連想配列で活躍する。

配列の特殊なループの回し方

すべての要素を計算してひとつの結果を出す（例えば合計）

code:js

// 0 + 1 + 2 + 3 + 4

const initialValue = 0;

const sumWithInitial = array1.reduce(

(accumulator, currentValue) => accumulator + currentValue,

initialValue,

);

console.log(sumWithInitial); // Expected output: 10

<配列>.reduce((<カウンタ>, <要素>)=><計算内容>, <初期値（省略可）>)

カウンタは通常触らない。名前も何でも良い。

配列をもとに新しい配列を作り出す

code:js

// Pass a function to map

const map1 = array1.map((x) => x * 2);

console.log(map1);

配列からいらない要素を消す

code:js

const result = words.filter((word) => word.length > 6);

console.log(result);

配列の変換

内容を全てつなげてひとつの文字列にする

<結果：文字列> = <配列>.join(<区切り文字。省略した場合はカンマ「,」>)

code:js

console.log(elements.join()); //-> "Fire,Air,Water"

console.log(elements.join('')); //-> "FireAirWater"

console.log(elements.join('-')); //->"Fire-Air-Water"

タグクラウドを作ったりするのによく使う

文字列から区切り文字で区切って配列にする

<新しい配列> = <文字列>.split([<区切り文字>[, <要素数上限>]])

区切り文字に空文字を指定した場合、全ての文字が１文字(utf-8単位)ごとに刻まれ配列に入る

区切り文字を指定しなかった場合、文字列がそのまま入った要素数１の配列ができる

code:js

const str = 'The quick brown fox jumps over the lazy dog.';

console.log(str.split(' '))

ソート（並べ替え）する

<ソートされた配列> = <配列>.sort()

<ソートされた配列> = <配列>.sort((a, b) => { <aとbを比較する式> })

code:js

ar.sort()

数値ソートしたい場合は式を定義する必要がある。

code:js

ar.sort( (a,b) => a-b )

連想配列(オブジェクト)編

連想配列(オブジェクト)を調べる

そいつが連想配列がどうかを調べる

おそらく…方法は無いのかも？　調査中

typeofでは配列と連想配列の区別はつかない(両方object)、のうえでisArrayで配列の可能性を落とす、くらいしか。

でも配列・文字列・連想配列の区別で困った事はいまのところない。あったら調べて追記する

が、Mapは発展途上なのか、まだ使いにくい…

連想配列(オブジェクト)の長さ（要素数）を調べる

Object.keys(<連想配列>).length

code:js

const obj = { a: 1, b : 2, c : 3 };

console.log(Object.keys(obj).length) //-> 3

連想配列(オブジェクト)に指定のキーが含まれているか調べる

code:js

const car = { make: 'Honda', model: 'Accord', year: 1998 };

console.log(Object.keys(car).includes("make")); //-> true

<調べたい要素> in <連想配列>

code:js

const car = { make: 'Honda', model: 'Accord', year: 1998 };

console.log('make' in car); //-> true

Object.hasOwn(<連想配列>, <調べたい要素>)

code:js

const car = { make: 'Honda', model: 'Accord', year: 1998 };

console.log(Object.hasOwn(car,'make')); //-> true

in演算子やhasOwn()の場合、連想配列のキーの存在の判定というよりは「オブジェクトがそのプロパティを持っているか」の判定という意味合いが強くなる。よりキーをキーとして扱いたい場合はkeys().includes()のほうが自然な気がする

連想配列(オブジェクト)に指定の内容(value)が含まれているか調べる

Object.values(<連想配列>).includes(<調べたい要素>)

code:js

const obj = { a: 1, b : 2, c : 3 };

console.log(Object.values(obj).includes(2))　//-> true

要素の追加

obj["<キー>"] = <値>

obj.<キー> = <値>

キーが存在しなければ新しいキーが追加される。存在すれば値で更新される。

要素の削除

キーがわかっている場合

delete obj["<キー>"]

delete obj.<キー>

code:js

const Employee = { firstname: 'John', lastname: 'Doe'};

console.log(Employee.firstname) //->"John"

delete Employee.firstname;

console.log(Employee.firstname) //->undefined

console.log(Employee) //->{}

キーがわからない／要素の内容から削除したい場合

キーに対してfor ... ofで内容をサーチする

code:js

const obj = { "a": 1, "b": 2, "c":3 }

for(const key of Object.keys(obj)) {

}

}

console.log(obj) //-> Object { a: 1, c: 3 }

もっと短く

code:js

const obj = { "a": 1, "b": 2, "c":3 }

console.log(obj) //-> Object { a: 1, c: 3 }

内容をサーチするだけならObject.values()で取れるが、その後deleteするにはキーを知らないといけない。

連想配列をループで回す

キーのリストを取得してfor ... ofで回す

code:js

const obj = { a: 1, b: 2, c: 3 };

for (const key of Object.keys(obj)) {

}

/*

"a: 1"

"b: 2"

"c: 3"

*/

for...in 文は、キーが文字列であるオブジェクトの列挙可能プロパティすべてに対して、継承された列挙可能プロパティも含めて反復処理を行います

「列挙可能」プロパティってなんだ？って人は for ... inを使わないほうがいいと思う

連想配列というよりもオブジェクトのプロパティを調べる目的で使うときがくるかもしれない

code:js

const obj = { "a": 1, "b": 2, "c":3 }

}

便利。

間違えやすいやつ

基本的にオブジェクト自身が規定のメソッドを持つことはない、と考える。つまり