JavaScriptの配列

配列の定義

js

//空の配列を作る
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"
}];

配列の長さの取得

js

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

要素の追加

先頭への要素の追加

js

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

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

末尾への要素の追加

js

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

要素の削除

先頭の要素の削除

js

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

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

末尾の要素の削除

js

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

要素の置換

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

js

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

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

配列の連結

concatによる連結

js

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

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

"..."による連結

js

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

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

配列の要素の結合

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

js

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

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

js

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

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

分割代入

js

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回目以降はヒットしません。

js

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

検索開始位置を指定する

js

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

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

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

js

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

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

検索開始位置を指定する

js

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

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

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

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

js

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

検索開始位置を指定する

js

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

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

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

everyとsomeの違い

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

every

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

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

js

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

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

console.log(judgment);

some

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

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

js

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	配列(省略可能)

js

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

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

console.log(target); //3

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

js

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

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

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

逆順

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

js

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

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

ソート

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

js

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	配列(省略可能)

js

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	配列(省略可能)

js

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

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

console.log(total);

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

js

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	配列(省略可能)

js

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

console.log(square);

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

js

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	配列(省略可能)

js

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>

js

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>

js

const divGroup = document.getElementsByTagName("div");
console.log(divGroup); //NodeList
       
const divArray = [...divGroup];
console.log(divArray); //配列

String

js

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

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

配列の各要素に処理

forEach

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

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

js

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

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