JavaScript配列

はじめに

配列が保持するメソッドにはコールバック関数を引数に取るものがある。コールバック関数を引数に取ることにより配列の要素に対する繰り返しの処理の記述の簡略化ができる。ここではforEach、filter、sortについて説明をする。

forEach

forEachメソッドは配列の要素に他する繰り返し処理をコールバック関数を利用して書くことができる。
以下のようにコールバック関数の引数として値、添字、配列が渡される。
例１）

const arry = [1, 2, 3, 4, 5];
arry.forEach(function(value, index,arry) {
   console.log(value, index, arry);
});

出力

1 0 [ 1, 2, 3, 4, 5 ]
2 1 [ 1, 2, 3, 4, 5 ]
3 2 [ 1, 2, 3, 4, 5 ]
4 3 [ 1, 2, 3, 4, 5 ]
5 4 [ 1, 2, 3, 4, 5 ]

例２）

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

const inc2 = (vale => {
  console.log(vale + 2);
});

arry.forEach(inc2);

出力

3
4
5
6
7

filter

filterメソッドはコールバック関数の条件がtrueになったときの配列の要素のみを保持する新しい配列を作成する。
例１）

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

const gt2 = (val => {
  return val > 2;
});

console.log(arry.filter(gt2));

出力

[3, 4, 5]

例２）

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

const newArry = arry.filter((i) => {
    return i > 2;
})

console.log(newArry);

出力

[3, 4, 5]

sort

sortメソッドは要素の順番を並べ替えることができる。
例）

const arry = ["b", "a", "d", "c"];
console.log(arry.sort());

出力

[ 'a', 'b', 'c', 'd' ]

比較関数を利用してソートする場合。

const sortArry = ((val1, val2) => {
  return val1 - val2;
});

const arry = [10, 4, 7, 2, 1, 8, 4];
console.log(arry.sort(sortArry));

出力

[ 1, 2, 4, 7, 8, 10 ]

上記のコードのように
「戻り値が負の場合は　val1, val2
戻り値が正の場合は　val2, val1
0の場合は変更なし。」
になる。
つまり、昇順にソートしたい場合はreturn val1 - val2。
降順にソートしたい場合はreturn val2 - val1 にすれば良い。

問題

以下のtodosを用いて➀～➃の操作を行う。
（priorityは優先度）

const todos = [
  { title: "晩御飯", priority: 2, completed: false },
  { title: "ゴミ出し", priority: 1, completed: true },
  { title: "食材の買い出し", priority: 3, completed: false },
  { title: "洗濯", priority: 2, completed: true },
  { title: "録画の視聴", priority: 1, completed: false },
];

➀todosを以下のように出力。
完了しているタスク　=> {title}は完了！
未完了のタスク　=> {title}をやらないと！
➁完了していないタスクを抽出して新しい配列を作成。
➂完了していないタスクを優先度が高い順に並べる。

➀の回答例

const todos = [
  { title: "晩御飯", priority: 2, completed: false },
  { title: "ゴミ出し", priority: 1, completed: true },
  { title: "食材の買い出し", priority: 3, completed: false },
  { title: "洗濯", priority: 2, completed: true },
  { title: "録画の視聴", priority: 1, completed: false },
];

todos.forEach(({ title, completed }) => {
  if (completed) {
    console.log(`${title}は完了！`);
  } else {
    console.log(`${title}をやらないと！`);
  }
});

出力

晩御飯をやらないと！
ゴミ出しは完了！
食材の買い出しをやらないと！
洗濯は完了！
録画の視聴をやらないと！

➁の回答例1

const todos = [
  { title: "晩御飯", priority: 2, completed: false },
  { title: "ゴミ出し", priority: 1, completed: true },
  { title: "食材の買い出し", priority: 3, completed: false },
  { title: "洗濯", priority: 2, completed: true },
  { title: "録画の視聴", priority: 1, completed: false },
];

const notCompleted = todos.filter(({ completed }) => {
  return !completed;
});

console.log(notCompleted);

➁の回答例２

const todos = [
  { title: "晩御飯", priority: 2, completed: false },
  { title: "ゴミ出し", priority: 1, completed: true },
  { title: "食材の買い出し", priority: 3, completed: false },
  { title: "洗濯", priority: 2, completed: true },
  { title: "録画の視聴", priority: 1, completed: false },
];

const isCompleted = ({completed}) => {
    return !completed;
}

const notCompleted = todos.filter(isCompleted);

出力

[
  { title: '晩御飯', priority: 2, completed: false },
  { title: '食材の買い出し', priority: 3, completed: false },
  { title: '録画の視聴', priority: 1, completed: false }
]

➂の回答例

const todos = [
  { title: "晩御飯", priority: 2, completed: false },
  { title: "ゴミ出し", priority: 1, completed: true },
  { title: "食材の買い出し", priority: 3, completed: false },
  { title: "洗濯", priority: 2, completed: true },
  { title: "録画の視聴", priority: 1, completed: false },
];

const notCompleted = todos.filter(({ completed }) => {
  return !completed;
});

notCompleted.sort((todoA, todoB) => {
    return todoB.priority- todoA.priority;
});
console.log(notCompleted);

出力

[
  { title: '食材の買い出し', priority: 3, completed: false },
  { title: '晩御飯', priority: 2, completed: false },
  { title: '録画の視聴', priority: 1, completed: false }
]