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

JavaScriptのコールバックメソッドの基本的な使い方(forEach、map、some、filter、sort)

JavaScriptの勉強をする中で配列のコールバック系メソッドの知識がふわっとしていると感じたので記事にまとめます。

forEachメソッド

配列の全ての要素を1回ずつ呼び出す。
呼び出した要素、その要素のインデックス番号、元の配列を引数に指定できる。

インデックス番号と元の配列を使って要素を取り出すこともできる。

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

arr.forEach((value, index, orgArray) => {
  console.log(`value : ${value} index : ${index} arr[${index}]: ${orgArray[index]}`);
});

出力結果

value : 1 index : 0 arr[0]: 1
value : 2 index : 1 arr[1]: 2
value : 3 index : 2 arr[2]: 3
value : 4 index : 3 arr[3]: 4
value : 5 index : 4 arr[4]: 5
value : 6 index : 5 arr[5]: 6
value : 7 index : 6 arr[6]: 7
value : 8 index : 7 arr[7]: 8
value : 9 index : 8 arr[8]: 9
value : 10 index : 9 arr[9]: 1

第3引数の元の配列の値を変更すると元の配列も変更される。

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

console.log(arr)
arr.forEach((value, index, orgArray) => {
  orgArray[index] = value * 2;
});
console.log(arr)

出力結果

[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
[ 2, 4, 6, 8, 10, 12, 14, 16, 18, 20 ]

mapメソッド

配列の全ての要素を1回ずつ呼び出して処理を実施する。
その結果から新しい配列を生成する。
新しい配列に格納する要素を返す必要がある。

引数の指定方法はforEachと同じ。

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

let newArr = arr.map((value, index, orgArray) => {
  return value + 10;
});

// 省略した形
// let newArr = arr.map((value, index, orgArray) => value + 10);

console.log(newArr);

出力結果

[ 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 ]

someメソッド

配列の全ての要素を1回ずつ呼び出して、関数内のテストを実施する。
1つ以上がTrueならTrue、全てFalseならFalseを返す。

let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9]

var tenOrMore = function(value) {
  return value >= 10;
};

console.log(arr1.some(tenOrMore));
console.log(arr2.some(tenOrMore));

console.log(arr1.some(value => value >= 10));
console.log(arr2.some(value => value >= 10));

出力結果

true
false
true
false

filterメソッド

配列の全ての要素を1回ずつ呼び出して、条件に当てはまる要素だけの配列を返す。

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const even = function(value) {
  return value % 2 === 0;
};

console.log(arr.filter(even));
console.log(arr.filter(value => value % 2 ===0));

出力結果

[ 2, 4, 6, 8, 10 ]
[ 2, 4, 6, 8, 10 ]

sortメソッド

配列の要素をソートした結果を返す。
デフォルトだと文字列として昇順にソートされる。

let arr1 = [1, 3, 7, 10, 2, 9, 4, 8, 5, 7]

// 文字列としてソート
console.log(arr1.sort());

// 数値としてソート
console.log(arr1.sort((x, y) => x - y));

let arr2 = [
  ['C001', 4],
  ['A002', 5],
  ['A001', 1],
  ['B001', 3],
  ['C002', 2],
  ['B002', 7]
]

// ソートキーを2種にする場合
arr2.sort((id, num) => {
  //ID(昇順)
  if (id[0] > num[0]) return 1;
  if (id[0] < num[0]) return -1;
  //番号(降順)
  if (id[0] > num[0]) return -1;
  if (id[0] < num[0]) return 1;
})

console.log(arr2);

出力結果

[ 1, 10, 2, 3, 4, 5, 7, 7, 8, 9 ]
[ 1, 2, 3, 4, 5, 7, 7, 8, 9, 10 ]
[ [ 'A001', 1 ],
  [ 'A002', 5 ],
  [ 'B001', 3 ],
  [ 'B002', 7 ],
  [ 'C001', 4 ],
  [ 'C002', 2 ] ]

終わりに

やろうと思えばforEachで済ますことができますが、処理に応じた適切なメソッドを使えるようにしたいなと思いました。
記載内容に誤り等ありましたら、ご指摘ください。

参考

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
https://infoteck-life.com/a0112-js-array-sort-multi/

Why do not you register as a user and use Qiita more conveniently?
  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