JavaScriptの配列操作についての整理

JavaScriptでの配列操作を使う機会が多いが、毎回ググってる気がするのでひとまずよく使うものについて整理してみる。

配列操作

  const arr1 = [10, 20, 30];
  const arr2 = [40, 50, 60];

  const arrObj = [
    {
      id: 1,
      name: "A"
    },
    {
      id: 2,
      name: "B"
    },
    {
      id: 3,
      name: "C"
    },
    {
      id: 4,
      name: "D"
    },
    {
      id: 5,
      name: "E"
    },
    {
      id: 6,
      name: "F"
    }
  ];

length

配列の要素数を取得する返り値：number

  const arr1 = [10, 20, 30];

  console.log("length", arr1.length);
  // => length 3

indexOf

見つかった最初の要素の添字を返す、見つからなかった場合は-1を返す返り値：number

  const arr1 = [10, 20, 30];

  console.log("indexOf", arr1.indexOf(20));
  // => indexOf 1
  console.log("indexOf", arr1.indexOf(40));
  // => indexOf -1

join

全要素を順に連結した文字列を新たに作成区切り文字を指定できる返り値：string

  const arr1 = [10, 20, 30];

  console.log("join", arr1.join());
  // => join 10,20,30

slice

配列のすべてまたは一部をコピーする返り値：Array

  const arr1 = [10, 20, 30];

  console.log("slice", arr1.slice(2));
  // => slice [30]

concat

配列同士を結合返り値：Array

  const arr1 = [10, 20, 30];
  const arr2 = [40, 50, 60];

  console.log("concat", arr1.concat(arr2));
  // => concat [10, 20, 30, 40, 50, 60]

reverse

逆順返り値：Array

  const arr1 = [10, 20, 30];

  console.log("reverse", arr1.reverse());
  // => reverse [30, 20, 10]

sort

並び替え返り値：Array

  const arr1 = [10, 20, 30];

  console.log("sort", arr1.sort()); // 昇順
  console.log(
    "sort",
    arr1.sort((x, y) => y - x)
  ); // 降順
  // => sort [30, 20, 10]

map

新しい配列を生成　全ての要素に対して関数を一度ずつ実行,新しい配列を生成返り値：Array


  console.log(
    "map",
    arrObj.map((item) => ({ id: item.id + "_map", name: item.name + "_map" }))
  );
  // => map [{id: "1_map",name: "A_map"} ...]

filter

絞り込み(複数要素)　true を返した要素からなる新しい配列を生成返り値：Array

  console.log(
    "filter",
    arrObj.filter((item) => item.id % 2 === 0)
  );
  // filter [{id:2, name: "A"},{id:4, name: "D"},{id:6, name: "F"}]

find

絞り込み(1要素)　true を返す要素が見つかるまで、要素に対して一度ずつ関数を実行する返り値： Arrayの１要素

  console.log(
    "find",
    arrObj.find((item) => item.id === 5)
  );
  // => find {id: 5, name: "E"}

some

true を返す要素が見つかるまで、要素に対して一度ずつ関数を実行,１つでもtrue を返す要素が見つかると、 true を返す。返り値： boolean

  console.log(
    "some",
    arrObj.some((item) => item.id === 5)
  );
  // => some true

every

false を返す要素が見つかるまで、要素に対して一度ずつ関数を実行,false を返す要素が見つかると、 false を返す。すべてがtrueであればtrueを返す返り値： boolean

  console.log(
    "every",
    arrObj.every((item) => item.id !== null)
  );
  // every false

reduce

配列を繰り返し処理し、計算結果を返す返り値：計算結果

  console.log(
    "reduce",
    arr1.reduce((prev, current, index) => prev + current)
  );

Kohei Blog

夫・父親・医療系エンジニア