0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

p5.js・JavaScript で map・スプレッド構文・reduce を使って要素数の長さの最大値を得る: 配列の配列(2次元配列)とオブジェクトの配列で

Last updated at Posted at 2023-01-03

表題の通り、以下のような配列の中で、最大の長さ・要素数を持つものの、長さ・要素数の値を求める話です。

const testArray = [
  [5, 10, 8, 7, 11],
  [1],
  [3, 6, 2],
  [12, 8, 7, 4, 2, 1, 0, 9],
  [1, 8],
];
const testArray = [
  { a: 0, b: 3 },
  { a: 7 },
  { a: 8, b: 6, c: 11, d: 3 },
  { a: 9, b: 2, c: 12 },
];

2次元配列を対象にした処理

まずは、異なる長さの配列を要素にもった配列、その 2次元配列を対象に要素数の最大の長さを求めてみます。
プログラムは以下の通りで、「単純なループ処理」・「reduce を使ったもの」・「map・スプレッド構文を使ったもの」の 3通りをのせています。

const testArray = [
  [5, 10, 8, 7, 11],
  [1],
  [3, 6, 2],
  [12, 8, 7, 4, 2, 1, 0, 9],
  [1, 8],
];

function setup() {
  createCanvas(450, 350);

  // 単純なループで処理
  let maxLength = 0;
  for (element of testArray) {
    if (element.length > maxLength) {
      maxLength = element.length;
    }
  }
  console.log(maxLength);

  // reduce を利用
  const maxLength2 = testArray.reduce((previousValue, currentValue) =>
    max(
      Array.isArray(previousValue) ? previousValue.length : previousValue,
      currentValue.length
    )
  );
  console.log(maxLength2);

  // map・スプレッド構文を利用
  const maxLength3 = max(...testArray.map((arr) => arr.length));
  console.log(maxLength3);
}

function draw() {}

ここで、p5.js の関数を使っているのは、 max() の部分のみです。
これは、もちろん JavaScript のみで書くなら Math.max() で置きかえてやれば OK です。

これらの中では、map・スプレッド構文を利用する形がシンプル。

オブジェクトの配列を対象にした処理

次に、異なる要素数のオブジェクトを要素にもった配列を対象にしてみます。

上記の map・スプレッド構文を利用する形がシンプルだったので、それを用います。

const testArray = [
  { a: 0, b: 3 },
  { a: 7 },
  { a: 8, b: 6, c: 11, d: 3 },
  { a: 9, b: 2, c: 12 },
];

function setup() {
  createCanvas(450, 350);

  // 単純なループで処理
  let maxLength = 0;
  for (element of testArray) {
    if (Object.keys(element).length > maxLength) {
      maxLength = Object.keys(element).length;
    }
  }
  console.log(maxLength);

  // map・スプレッド構文を利用
  const maxLength3 = max(
    ...testArray.map((object) => Object.keys(object).length)
  );
  console.log(maxLength3);
}

function draw() {}

参照した情報

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?