teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

ES5のコードを

2019/01/16 06:14

投稿

miyabi-sun
miyabi-sun

スコア21465

answer CHANGED
@@ -1,7 +1,24 @@
1
1
  [Array.prototype.map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)の中身はだいたいこのような挙動になっています。
2
2
 
3
3
  ```JavaScript
4
+ function map (items, callback) {
5
+ var results = [];
6
+ for (var i = 0; i < items.length; i++) {
7
+ var item = items[i];
8
+ var result = callback(item, i, items);
9
+ results.push(result);
10
+ }
11
+ return results;
12
+ }
13
+
14
+ function add2 (num) {
15
+ return num + 2;
16
+ }
17
+ console.log(map([1, 2, 3], add2)); // [3, 4, 5]
18
+ console.log([1, 2, 3].map(add2)); // [3, 4, 5]
19
+
20
+ // ES6仕様
4
- const map = (items, callback) => {
21
+ const amap = (items, callback) => {
5
22
  const results = [];
6
23
  for (let i = 0; i < items.length; i++) {
7
24
  const item = items[i];
@@ -11,20 +28,31 @@
11
28
  return results;
12
29
  }
13
30
 
14
- const add2 = it => it + 2;
31
+ const aadd2 = it => it + 2;
15
- console.log(map([1, 2, 3], add2)); // [3, 4, 5]
32
+ console.log(amap([1, 2, 3], aadd2)); // [3, 4, 5]
16
- console.log([1, 2, 3].map(add2)); // [3, 4, 5]
33
+ console.log([1, 2, 3].map(aadd2)); // [3, 4, 5]
17
34
  ```
18
35
 
36
+ もうまんまこれなので、ゆっくりでも良いので反芻して飲み込んでください。
37
+ mapというのは数学用語の[写像](https://ja.wikipedia.org/wiki/%E5%86%99%E5%83%8F)で、
38
+ 配列を集合、関数を公式に見立てただけのまんまそれです。
39
+
40
+ 工場でラインに乗って流れてきたモノを上からぎゅーってプレス加工して大量生産するのもmapと言うそうですよ。
41
+
19
42
  > リターンの部分なのですが、どこに値を返しているのかイメージできません。
20
43
 
21
- `const result = callback(item, i, items);`の部分に着目してください。
44
+ `result = callback(item, i, items);`の部分に着目してください。
22
45
  mapは配列の全ての要素に同じ関数を適用し、その戻り値を使って新しい配列を作っています。
23
46
  ですので、戻り値を返さない関数だとundefinedの配列になってしまいます。
24
47
 
25
48
  ```JavaScript
26
- const result = [1, 2, 3].map(it => {
49
+ var result = [1, 2, 3].map(function (it) {
27
50
  it + 2; // 四則演算を行うが何もreturnしていない
51
+ })
52
+
53
+ // ES6仕様
54
+ const aresult = [1, 2, 3].map(it => {
55
+ it + 2; // 四則演算を行うが何もreturnしていない
28
56
  });
29
- console.log(result); // [undefined, undefined, undefined]
57
+ console.log(aresult); // [undefined, undefined, undefined]
30
58
  ```

1

第三引数がなかったので追加

2019/01/16 06:13

投稿

miyabi-sun
miyabi-sun

スコア21465

answer CHANGED
@@ -1,11 +1,11 @@
1
- Array.prototype.mapの中身はだいたいこのような挙動になっています。
1
+ [Array.prototype.map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)の中身はだいたいこのような挙動になっています。
2
2
 
3
3
  ```JavaScript
4
- const map = (array, callback) => {
4
+ const map = (items, callback) => {
5
5
  const results = [];
6
- for (let i = 0; i < array.length; i++) {
6
+ for (let i = 0; i < items.length; i++) {
7
- const item = array[i];
7
+ const item = items[i];
8
- const result = callback(item, i);
8
+ const result = callback(item, i, items);
9
9
  results.push(result);
10
10
  }
11
11
  return results;
@@ -18,7 +18,7 @@
18
18
 
19
19
  > リターンの部分なのですが、どこに値を返しているのかイメージできません。
20
20
 
21
- `const result = callback(item, i);`の部分に着目してください。
21
+ `const result = callback(item, i, items);`の部分に着目してください。
22
22
  mapは配列の全ての要素に同じ関数を適用し、その戻り値を使って新しい配列を作っています。
23
23
  ですので、戻り値を返さない関数だとundefinedの配列になってしまいます。
24
24