Help us understand the problem. What is going on with this article?

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);
});
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away