JavaScriptのArrayオブジェクトに関して(前編)

2021 2/02

2020.12.24 2021.02.02

トモジ

Arrayオブジェクトって何？
詳しく知りたい・・

本記事は、
上記のような方に向けて記事を書いています。

こんにちは、トモジです。

私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。

本記事は、Arrayオブジェクトに関して要点を
わかりやすく説明しております。

記事の内容

1.JavaScriptのArrayオブジェクト

Arrayオブジェクトは、
配列型の値を扱うためのオブジェクトで
要素を[追加]・[削除]・[結合]・[並べ替え]
などを行うための機能が提供されております。

非常にたくさんの機能が提供されておりますので、
今回は前編(オレンジ枠)を順番に説明します。

2.基本類

Arrayオブジェクトの基本は、
以下の9種類のメンバーがありますので
順番に見ていきましょう。

length

lengthは、配列のサイズを確認できます。

例

lengthに関して

var ary = ["総統", "吉田くん", "フィリップ", "レオナルド博士", "ぼさつとうげ"];

console.log(ary.length);

出力結果

isArray

isArrayは、指定したオブジェクトが
配列であるかを確認できます。

例

isArrayに関して

var ary = ["総統", "吉田くん", "フィリップ", "レオナルド博士", "ぼさつとうげ"];
var obj = {"name":"吉田くん", "age":21, "birthday":"7月27日"};

console.log("配列 : " + Array.isArray(ary));
console.log("オブジェクト : " + Array.isArray(obj));
console.log("数値 : " + Array.isArray(123));
console.log("文字列 : " + Array.isArray("foo"));

出力結果

配列 : true
オブジェクト : false
数値 : false
文字列 : false

toString

toStringは、
[要素,要素,・・・]の形で文字列に変換します。

例

toStringに関して

var ary = ["総統", "吉田くん", "フィリップ"];

console.log("toString : " + ary.toString());

出力結果

toString : 総統,吉田くん,フィリップ

toLocaleString

toLocaleStringは、
指定したロケールにあわせて対象の数値を
文字列に変換した値を返します。

例

toLocaleStringに関して

var num = 12345.67890;

var str = num.toLocaleString();

// 言語の変換
var strArabic = num.toLocaleString('ar-EG');
var strChinese = num.toLocaleString('zh-Hans-CN-u-nu-hanidec');

// 単位を付ける
var strJapan = num.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
var strGerman = num.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' });

// 有効数字のケタ数を指定
var strIndia = num.toLocaleString('en-IN', { maximumSignificantDigits: 6 });

console.log("toLocaleString : " + str);
console.log("アラビア : " + strArabic);
console.log("中国 : " + strChinese);
console.log("日本 : " + strJapan);
console.log("ドイツ : " + strGerman);
console.log("インド : " + strIndia);

出力結果

toLocaleString : 12,345.679
アラビア : ١٢٬٣٤٥٫٦٧٩
中国 : 一二,三四五.六七九
日本 : ￥12,346
ドイツ : 12.345,68 €
インド : 12,345.7

indexOf

indexOfは、
配列の中に指定した文字列があるか確認できます。

検索した文字がある場合は位置の番号を返し、
検索した文字がない場合は、[-1]を返します。

例

indexOfに関して

var ary = ["総統", "吉田くん", "フィリップ"];

console.log("indexOf(合致した場合) : " + ary.indexOf("吉田くん"));
console.log("indexOf(合致しない場合) : " + ary.indexOf("吉田"));

出力結果

indexOf(合致した場合) : 1
indexOf(合致しない場合) : -1

lastIndexOf

lastIndexOfは、指定した配列がある場合に、
最後の文字列だけを取得することができます。

例

lastIndexOfに関して

var ary = ["総統", "吉田くん", "フィリップ", "吉田くん"];

console.log("lastIndexOf : " + ary.lastIndexOf("吉田くん"));

出力結果

lastIndexOf : 3

entries

entriesは、オブジェクトの
キー(key)と値(value)を全て取得します。

例

entriesに関して

var obj = {"name":"テスラ", "gender":"male", "iq":240};

console.log("entries : " + Object.entries(obj));

出力結果

entries : name,テスラ,gender,male,iq,240

keys

keysは、全てのキーのみ取得します。

例

keysに関して

var obj = {"name":"テスラ", "gender":"male", "iq":240};

console.log("keys : " + Object.keys(obj));

出力結果

keys : name,gender,iq

values

valuesは、全ての値を取得します。

例

valuesに関して

var obj = {"name":"テスラ", "gender":"male", "iq":240};

console.log("values : " + Object.values(obj));

出力結果

keys : テスラ,male,240

3.加工

Arrayオブジェクトの加工は、
以下の8種類のメンバーがありますので
順番に見ていきましょう。

concat

concatは、
指定配列を現在の配列に繋げることができます。

例

concatに関して

var ary1 = ["ネコ","イヌ"];
var ary2 = ["サル","ブタ"];
var ary3 = ["ウマ","カメ"];

var sumAry = ary1.concat(ary2);

console.log("concat : "  + sumAry.concat(ary3));

出力結果

concat : ネコ,イヌ,サル,ブタ,ウマ,カメ

join

joinは、配列内の要素を区切り文字(自由に指定)で
連結します。

例

joinに関して

var ary = ["総統", "吉田くん", "フィリップ"];

console.log("join( / ) : " + ary.join(" / "));
console.log("join( ❗️ ) : " + ary.join("❗️"));

出力結果

join( / ) : 総統 / 吉田くん / フィリップ
join(❗️ ) : 総統❗️吉田くん❗️フィリップ

slice

sliceは、スタート位置とエンド位置を
決めて要素を取得できます。
※エンド位置は含まない

例

sliceに関して

var ary = ["総統", "吉田くん", "フィリップ", "レオナルド博士", "ぼさつとうげ"];

console.log("slice : " + ary.slice(1,3));

出力結果

slice(1,３) : 吉田くん,フィリップ

splice

spliceは、スタート位置とエンド位置を
決めて要素を置き換えます。
※エンド位置は含まない

例

spliceに関して

var ary = ["総統", "吉田くん", "フィリップ"];

console.log("要素取得 : " + ary.splice( 1, 2, 'ぼさつとうげ', '大家さん'));
console.log("置き換え後の結果 : " + ary);

出力結果

要素取得 : 吉田くん,フィリップ
置き換え後 : 総統,ぼさつとうげ,大家さん

from

fromは、配列のようなオブジェクトや
反復可能オブジェクトから
Arrayインスタンスを生成します。

例

fromに関して

var str = "ぼさつとうげ";
var array = [1, 2, 3];

console.log("from(文字列) : " + Array.from(str));
console.log("from(文字列) : " + Array.from(str[1]));
console.log("from(関数) : " +Array.from(array, x => x + x));

出力結果

from(文字列) : ぼ,さ,つ,と,う,げ
from(文字列) : さ
from(関数) : 2,4,6

of

ofは、引数の数や型にかかわらず新しい
Arrayインスタンスを生成します。

例

ofに関して

var arrayOf = Array.of(10); //[10]
var arrayOfs = Array.of('文字',1,false); //['文字', 1, false]

var emptyArray = Array(10); //空の配列10個
var arrays = Array(1, 2, 3); //[1, 2, 3]

console.log("arrayOf:" + arrayOf);
console.log("arrayOfs:" + arrayOfs);
console.log("emptyArray:" + emptyArray);
console.log("arrays:" + arrays);

出力結果

arrayOf:10
arrayOfs:文字,1,false
emptyArray:,,,,,,,,,
arrays:1,2,3

copyWithin

copyWithinは、スタート位置とエンド位置を
決めて要素をコピーします。
※エンド位置は含まない

例

copyWithinに関して

var ary = ["総統", "吉田くん", "フィリップ", "レオナルド博士", "ぼさつとうげ"];

console.log("copyWithin(2,0,2) : " + ary.copyWithin(2,0,2));

出力結果

copyWithin(2,0,2) : 総統,吉田くん,総統,吉田くん,ぼさつとうげ

fill

fillは、スタート位置とエンド位置を
決めて要素を指定文字に置き換えます。
※エンド位置は含まない

例

fillに関して

var ary = ["総統", "吉田くん", "フィリップ", "レオナルド博士", "ぼさつとうげ"];

console.log("fill() : " + ary.fill('秘密結社',0,5));

出力結果

fill(‘秘密結社’,0,5) : 秘密結社,秘密結社,秘密結社,秘密結社,秘密結社

まとめ

最後にこの記事のポイントをまとめておきます。

まとめ

基本

length
配列のサイズを確認
isArray
配列であるかを確認
toString
文字列に変換
toLocaleString
対象の数値を文字列に変換
indexOf
指定した文字があるか確認
lastIndexOf
指定した再度の文字があるか確認
entries
オブジェクトのキーと値を取得
keys
オブジェクトのキーを取得
values
オブジェクトの値を取得

加工

concat
指定配列を現在の配列に繋げる
join
区切り文字で連結
slice
開始と終了の要素を取得
splice
開始と終了を決めて要素を置換
from
配列のようなオブジェクトや
反復可能オブジェクトから
Arrayインスタンスを生成
of
引数の数や型にかかわらず新しい
Arrayインスタンスを生成
copyWithin
開始と終了の要素をコピー
fill
開始と終了を決めて指定文字に置換

JavaScriptのArrayオブジェクトに関して(前編)

1.JavaScriptのArrayオブジェクト

2.基本類

length

isArray

toString

toLocaleString

indexOf

lastIndexOf

entries

keys

values

3.加工

concat

join

slice

splice

from

of

copyWithin

fill

まとめ

関連記事