JavaScriptの配列

配列の定義

//空の配列を作る
const array1 = [];

//数値をまとめた配列
const array2 = [0, 2, 8];

//文字列をまとめた配列
const array3 = ["bernard", "peter", "stephen", "gillian"];

//数値、文字列、真偽値をまとめた配列
const array4 = [1, "bernard", false];

//数値をまとめた2次元配列
const array5 = [
  [1, 1, 1],
  [2, 2, 2]
];

//オブジェクトをまとめた配列
const array6 = [{
  id: 1,
  name: "bernard"
}, {
  id: 2,
  name: "peter"
}];

配列の長さの取得

const array = ["bernard", "peter", "stephen", "gillian"];
console, log(array.length);

要素の追加

先頭への要素の追加

const array = ["bernard", "peter", "stephen", "gillian"];

array.unshift("phil", "tom");
console.log(array); //["phil", "tom", "bernard", "peter", "stephen", "gillian"]

末尾への要素の追加

const array = ["bernard", "peter", "stephen", "gillian"];

array.push("phil", "tom");
console.log(array); //["bernard", "peter", "stephen", "gillian", "phil", "tom"]

要素の削除

先頭の要素の削除

const array = ["bernard", "peter", "stephen", "gillian"];

array.shift();
console.log(array); //["peter", "stephen", "gillian"]

末尾の要素の削除

const array = ["bernard", "peter", "stephen", "gillian"];

array.pop();
console.log(array); //["bernard", "peter", "stephen"]

要素の置換

置換対象を0個にして追加として使う事もできます。

const array = ["bernard", "peter", "stephen", "gillian"];

//1番目の要素(peter)から1つ分の要素をphilに置換する
array.splice(1, 1, "phil");
console.log(array);

配列の連結

concatによる連結

const array1 = ["bernard", "peter"];
const array2 = ["stephen"];

const combinedArray = array1.concat(array2);
console.log(combinedArray); //) ["bernard", "peter", "stephen"]

"..."による連結

const array1 = ["bernard", "peter"];
const array2 = ["stephen"];

const combinedArray = [...array1, ...array2];
console.log(combinedArray); // ["bernard", "peter", "stephen"]

配列の要素の結合

区切り文字指定省略時は「,」区切りです。

const array = ["bernard", "peter", "stephen", "gillian"];

const combinedString = array.join();
console.log(combinedString); //bernard,peter,stephen,gillian

区切り文字指定が("")の場合：区切り文字無し

const array = ["bernard", "peter", "stephen", "gillian"];

const combinedString = array.join("");
console.log(combinedString); //bernardpeterstephengillian

分割代入

let a;
let b;
let c;

[a, b, c] = [1, 2, 3];

console.log(a); //1
console.log(b); //2
console.log(c); //3

要素の検索

検索したい要素が最初に出てくる位置

最初に出てくるもののみヒットするので、2回目以降はヒットしません。

const array = ["bernard", "peter", "stephen", "gillian", "bernard"];

console.log(array.indexOf("bernard")); //0

検索開始位置を指定する

const array = ["bernard", "peter", "stephen", "gillian", "bernard"];

console.log(array.indexOf("bernard", 1)); //4(最初の要素が検索対象から外れるため)

検索したい要素が最後に出てくる位置

末尾から検索して、最初に出てくるもののみヒットするので、2回目以降はヒットしません。

const array = ["bernard", "peter", "stephen", "gillian", "bernard"];

console.log(array.lastIndexOf("bernard")); //4

検索開始位置を指定する

const array = ["bernard", "peter", "stephen", "gillian", "bernard"];

console.log(array.lastIndexOf("bernard", 1)); //(末尾の要素が検索対象から外れるため)

検索したい要素が配列に含まれるか判定

1個以上含まれるとtrueが返ります。

const array = ["bernard", "peter", "stephen", "gillian"];

console.log(array.includes("bernard")); //true

検索開始位置を指定する

const array = ["bernard", "peter", "stephen", "gillian"];

console.log(array.includes("bernard", 1)); //false(0番目の要素が検索対象から外れるため)

配列の要素が条件を満たすか判定

everyとsomeの違い

everyとsomeの違い	内容
every	条件を全ての値が満たすかの判定
some	条件を満たすものがあるかの判定

every

結果は真偽値になります。

引数の位置	変数
1	値
2	インデックス(省略可能)
3	配列(省略可能)

const sampleArray = [1, 2, 3, 4, 5];

const judgment = sampleArray.every((value, index, array) => {
  return (value >= 1);
});

console.log(judgment);

some

結果は真偽値になります。

引数の位置	変数
1	値
2	インデックス(省略可能)
3	配列(省略可能)

const sampleArray = [1, 2, 3, 4, 5];

const judgment = sampleArray.some((value, index, array, js) => {
 return (value > 3);
});

console.log(judgment);

条件を満たす要素を検索

find

条件を満たす最初の最初の要素の値を返します。

引数の位置	変数
1	値
2	インデックス(省略可能)
3	配列(省略可能)

const sampleArray = [1, 2, 3, 4, 5];

const target = sampleArray.find((element, index, array) => {
  return (element === 3);
});

console.log(target); //3

最初に条件を満たす番目を取得

const array = ["bernard", "peter", "stephen", "gillian"];

console.log(array.findIndex((element) => {
  return (element === "peter")
})); //1

配列の要素の順番を変更する

逆順

元の配列に変更を加えます。

const array = ["bernard", "peter", "stephen", "gillian"];

array.reverse();
console.log(array); //["gillian", "stephen", "peter", "bernard"]

ソート

元の配列に変更を加えます。

const array = ["bernard", "peter", "stephen", "gillian"];

array.sort();
console.log(array); //["bernard", "gillian", "peter", "stephen"]

配列の要素を全部足す

reduceとreduceRightの違い

reduceとreduceRightの違い	内容
reduce	左から処理する
reduceRight	右から処理する

reduce

処理をして1つの値を取得します。(合計などに使います)

引数の位置	変数
1	それまでの結果
2	現在の値
3	インデックス(省略可能)
4	配列(省略可能)

const sampleArray = [1, 2, 3, 4, 5];

const total = sampleArray.reduce((previousValue, currentValue, index, array) => {
  return previousValue + currentValue;
});

console.log(total);

reduceRight

処理をして1つの値を取得します。(合計などに使います)

引数の位置	変数
1	それまでの結果
2	現在の値
3	インデックス(省略可能)
4	配列(省略可能)

const sampleArray = [1, 2, 3, 4, 5];

const total = sampleArray.reduceRight((previousValue, currentValue, index, array) => {
  return previousValue + currentValue;
});

console.log(total);

2次元配列を1次元配列にする

const arrayGroup = [
  ["bernard", "peter", "stephen"],
  ["gillian", "phil", "tom"]
];

const reducedArray = arrayGroup.reduce((previousArray, currentArray) => {
  return previousArray.concat(currentArray);
});

console.log(reducedArray);

配列から別の配列を作る

map

配列から配列を作るメソッドです。
元の配列は変更されません。

引数の位置	変数
1	値
2	インデックス(省略可能)
3	配列(省略可能)

const sampleArray = [1, 2, 3, 4, 5];
  const square = sampleArray.map((value, index, array) => {
  return value * value;
});

console.log(square);

オブジェクトから配列を作る

const data = [{
     id: 1,
     name: "bernard"
   },
   {
     id: 2,
     name: "peter"
  },
  {
    id: 3,
    name: "stephen"
  },
  {
    id: 4,
    name: "gillian"
  }
];

const array = data.map((value, index, array) => {
  return value.name;
});

console.log(array);

配列をフィルタリングして別の配列を作る

filter

条件にあうものだけを抽出します。
配列の各要素を引数として、都度コールバック関数を実行して、trueを返した値から新しい配列を返します。

引数の位置	変数
1	値
2	インデックス(省略可能)
3	配列(省略可能)

const sampleArray = [1, 2, 3, 4, 5];

const filteredArray = sampleArray.filter((value, index, array) => {
  return (value > 2);
});

console.log(filteredArray);

配列風オブジェクトを配列に変換

NordList

html

<div>a</div>
 <div>b</div>
 <div>c</div>

const divGroup = document.querySelectorAll("div");
console.log(divGroup); //NodeList

const divArray = [...divGroup];
console.log(divArray); //配列

HTMLCollection

html

<div>a</div>
<div>b</div>
<div>c</div>

const divGroup = document.getElementsByTagName("div");
console.log(divGroup); //NodeList

const divArray = [...divGroup];
console.log(divArray); //配列

String

const string = "sampleword";
console.log(string); //NodeList

const stringArray = [...string];
console.log(stringArray); //配列

配列の各要素に処理

forEach

配列の値に同じ処理を繰り返します。
undefinedを返します。

引数の位置	変数
1	値
2	インデックス(省略可能)
3	配列(省略可能)

const sampleArray = [1, 2, 3, 4, 5];

sampleArray.forEach((value, index, array) => {
  console.log(value);
});

配列の定義

配列の長さの取得

要素の追加

先頭への要素の追加

末尾への要素の追加

要素の削除

先頭の要素の削除

末尾の要素の削除

要素の置換

配列の連結

concatによる連結

"..."による連結

配列の要素の結合

分割代入

要素の検索

検索したい要素が最初に出てくる位置

検索開始位置を指定する

検索したい要素が最後に出てくる位置

検索開始位置を指定する

検索したい要素が配列に含まれるか判定

検索開始位置を指定する

配列の要素が条件を満たすか判定

everyとsomeの違い

every

some

条件を満たす要素を検索

find

最初に条件を満たす番目を取得

配列の要素の順番を変更する

逆順

ソート

配列の要素を全部足す

reduceとreduceRightの違い

reduce

reduceRight

2次元配列を1次元配列にする

配列から別の配列を作る

map

オブジェクトから配列を作る

配列をフィルタリングして別の配列を作る

filter

配列風オブジェクトを配列に変換

NordList

HTMLCollection

String

配列の各要素に処理

forEach

Trending Articles