【8/31まで 今季最大のセール開催中！】Udemyの人気コースが今なら1,200円から!!

【JavaScript入門】配列の使い方

【Javascript】配列の使い方

SHARE

目次

目次へ

配列の宣言

配列を宣言するには以下のように記述します。

js

let array = ['html', 'css', 'js'];
console.log(array[2]);//js

コンストラクタを使って以下のように記述することも出来ます。

js

let array2 = new Array('java', 'python', 'php');
console.log(array2[2]);//php

以下のように記述することで配列の長さを指定することもできます。

js

let array3 = new Array(3);
array3[0] = 'c';
array3[1] = 'vba';
array3[2] = 'cobol';
console.log(array3[1]);//vba

配列のサイズを取得する(length)

配列のサイズを取得するにはlengthプロパティを使用します。

js

let array = ['html', 'css', 'js'];
console.log(array.length);//3

変数objが配列であるかどうかを判定する(isArray)

変数が配列かどうかを判定するにはisArrayメソッドを使用します。
配列の場合はtrueが、配列でない場合にはfalseを返却します。

js

let array = ['html', 'css', 'js'];
console.log(Array.isArray(array));//true

配列を文字列に変換する(toString)

配列を文字列に変換するにはtoString()メソッドを使用します。

js

let array = ['html', 'css', 'js'];
console.log(array.toString());//html,css,js

配列の中の文字列を検索する(indexOf)

ある文字列を検索するにはindexOfメソッドを使用します。
指定したindexをキーに右方向に検索し、指定したarrayのキーを返します。

js

let array = ['html', 'css', 'js'];
console.log(array.indexOf('css'));//1
console.log(array.indexOf('css',1));//1
console.log(array.indexOf('css',2));//-1

配列を繰り返し処理して結果を戻さない(foreach)

配列を繰り返し処理するにはforeachメソッドを使用します。
ただし、処理した結果をreturnすることはできません。

js

let array = ['html', 'css', 'js'];

array.forEach((value)=>{console.log("sample." + value)});

実行結果

sample.html
sample.css
sample.js

処理した結果をreturnするとundefindになります。

js

let array = ['html', 'css', 'js'];

let result = array.forEach((value)=>{ return "sample." + value});

console.log(result);//undefined

処理した結果をreturnしたい場合は、後述のmapメソッドを使用します。

配列を繰り返し処理して結果を戻す(map)

配列を繰り返し処理して結果を戻すにはmapメソッドを使用します。

js

let array = ['html', 'css', 'js'];

let result = array.map((value)=>{ return "sample." + value});

console.log(result);// ['sample.html', 'sample.css', 'sample.js']

配列のすべてのキーと値を取得する（ループ処理）(entries)

すべてのキーと値を取得するにはentriesメソッドを使用します。

js

let array = ['html', 'css', 'js'];

for(let [key, val]  of array.entries()){
    console.log(key,val);
}

実行結果

0 html
1 css
2 js

配列のすべてのキーを取得する（ループ処理）(keys)

すべてのキーを取得するにはkeysメソッドを使用します。

js

let array = ['html', 'css', 'js'];

for(let key of array.keys()){
    console.log(key);
}

実行結果

0
1
2

配列のすべての値を取得する（ループ処理）(values)

すべての値を取得するにはvaluesメソッドを使用します。

js

let array = ['html', 'css', 'js'];

for(let val of array.values()){
    console.log(val);
}

実行結果

html
css
js

配列の末尾に別の配列を追加する(concat)

配列の末尾に別の配列を追加するにはconcatメソッドを使用します。

js

let array = ['html', 'css', 'js'];
let array2 =['java', 'c', 'python'];

console.log(array); //['html', 'css', 'js']
console.log(array2);//['java', 'c', 'python']

//ここで連結。
let array3 = array.concat(array2);

console.log(array); //['html', 'css', 'js']
console.log(array2); //['java', 'c', 'python']
console.log(array3); //['html', 'css', 'js', 'java', 'c', 'python']

配列内の要素を連結して文字列として返す(join)

配列内の要素を連結して文字列として返すにはjoinメソッドを使用します。

js

let array = ['html', 'css', 'js'];
console.log(array); //['html', 'css', 'js']

//ここで連結。
let str = array.join('-');
console.log(array); //['html', 'css', 'js']
console.log(str);//html-css-js

引数に空文字を指定すればそのまま連結します。

js

let array = ['html', 'css', 'js'];

//ここで連結。
let str = array.join('');
console.log(array); //['html', 'css', 'js']
console.log(str);//htmlcssjs

配列から要素を抽出して別の配列を生成する(slice)

js

let array = ['html', 'css', 'js', 'java', 'php', 'python'];

//ここでスライス。
let array2 = array.slice(0,6);
console.log(array2);//['html', 'css', 'js', 'java', 'php', 'python']

元の配列はそのまま残ります。

js

let array = ['html', 'css', 'js', 'java', 'php', 'python'];
console.log(array); //['html', 'css', 'js', 'java', 'php', 'python']

//ここでスライス。
let array2 = array.slice(0,3);
console.log(array); //['html', 'css', 'js', 'java', 'php', 'python']
console.log(array2);//['html', 'css', 'js']

n番目以降を取得するには

js

let array = ['html', 'css', 'js', 'java', 'php', 'python'];

//ここでスライス。
let array2 = array.slice(3);
console.log(array2);//['java', 'php', 'python']

配列の末尾の要素を取得して削除する(pop)

配列の末尾の要素取得して削除するにはpopメソッドを使用します。

js

let array = ['html', 'css', 'js', 'java', 'php', 'python'];
let result = array.pop();
console.log(array);//[ 'html', 'css', 'js', 'java', 'php' ]
console.log(result);//python

配列の末尾に要素を追加する(push)

配列の末尾に要素を追加するにはpushメソッドを使用します。

js

let array = ['html', 'css', 'js', 'java', 'php', 'python'];
let result = array.push('vba','c');
console.log(array);//[ 'html', 'css', 'js', 'java', 'php', 'python', 'vba', 'c' ]
console.log(result);//8

配列の先頭の要素を取得して削除する(shift)

配列の先頭の要素を取得して削除するにはshiftメソッドを使用します。

js

let array = ['html', 'css', 'js', 'java', 'php', 'python'];
let result = array.shift();
console.log(array);//[ 'css', 'js', 'java', 'php', 'python' ]
console.log(result);//html

配列の先頭に「指定した要素」を追加(unshift)

配列の先頭に「指定した要素」を追加するにはunshiftメソッドを使用します。

js

let array = ['html', 'css', 'js', 'java', 'php', 'python'];
let result = array.unshift('ruby','swift');
console.log(array);//[ 'ruby', 'swift', 'html', 'css', 'js', 'java', 'php', 'python' ]
console.log(result);//8

配列を指定した値で上書き(fill)

配列を指定した値で上書きするにはfillメソッドを使用します。
元の配列も上書きされるので注意が必要です。

js

let array = ['html', 'css', 'js', 'java', 'php', 'python'];
let array2 = array.fill('c','0','6');
console.log(array);//[ 'c', 'c', 'c', 'c', 'c', 'c' ]
console.log(array2);//[ 'c', 'c', 'c', 'c', 'c', 'c' ]

配列の要素を逆順に並び替える(reverse)※降順ではない

配列の要素を逆順に並び替えるにはreverseメソッドを使用します。
元の配列も上書きされるので注意が必要です。

js

let array = [10,5,1,8,4,6,2,7,3,9];
let result = array.reverse();
console.log(array);//[ 9, 3, 7, 2, 6, 4, 8, 1, 5, 10 ]
console.log(result);//[ 9, 3, 7, 2, 6, 4, 8, 1, 5, 10 ]

配列の要素を昇順（辞書順）に並び替える(sort)

配列の要素を昇順（辞書順）に並び替えるにはsortメソッドを使用します。
元の配列も上書きされるので注意が必要です。

js

let array = [10,5,1,8,4,6,2,7,3,9];
let result = array.sort();
console.log(array);//[ 1, 10, 2, 3, 4, 5, 6, 7, 8, 9 ]
console.log(result);//[ 1, 10, 2, 3, 4, 5, 6, 7, 8, 9 ]

昇順に並び替えるには

昇順に並び替えるには以下のように記述する必要があります。
元の配列も上書きされるので注意が必要です。

js

let array = [10,5,1,8,4,6,2,7,3,9];
let result = array.sort((a, b) => a - b);
console.log(array);//[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
console.log(result);//[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

降順に並び替えるには

降順に並び替えるには一度array.sort((a, b) => a - b)で昇順に並び替えたものをreverseで逆順に並び替えることによって実現します。
元の配列も上書きされるので注意が必要です。

js

let array = [10,5,1,8,4,6,2,7,3,9];
let asc = array.sort((a, b) => a - b);
let desc = asc.reverse();
console.log(array);//[ 10, 9, 8, 7, 6, 5, 4, 3, 2, 1 ]
console.log(asc);//[ 10, 9, 8, 7, 6, 5, 4, 3, 2, 1 ]
console.log(desc);//[ 10, 9, 8, 7, 6, 5, 4, 3, 2, 1 ]

以上で記事の解説はお終い！

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！

【Udemy厳選】HTML、CSS、JavaScriptで人気のオススメ動画コース
【Udemy厳選】2023年HTML、CSS、JavaScriptで人気のオススメ動画コース13選

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

【Javascript】分割代入
【JavaScript入門】分割代入

次の記事

【JavaScript入門】配列を順次処理する方法(forEa…
【Javascript】配列を順次処理する方法(forEachの使い方)