ユーザーがユーザーにアクセスできるようにする方法

コード入力の量を大幅に減らすことができる.

コードの読み取り可能性が向上しました.

の既存の配列が保持されているため、コードの理解が容易である.

Array.prototype.map()

1.使用方法

map()メソッドは、アレイ内の各要素が所与のコールバック関数を呼び出す結果をまとめ、新しいアレイを返す.各要素にコールバック関数を呼び出すと、値が変更された配列が返されます.既存のレイアウトはまだ存在します.

let originalArray = [1,2,3,4,5];
let newArray = originalArray.map(function addOne(num) {
  return num + 1; 
});

console.log(originalArray); // output : [1,2,3,4,5]
console.log(newArray); // output : [2,3,4,5,6]

匿名関数も使用できます

let originalArray = [1,2,3,4,5];
let newArray = originalArray.map(function(num) {
  return num + 1;
});

console.log(originalArray); // output : [1,2,3,4,5]
console.log(newArray); // output : [2,3,4,5,6]

コールバック関数を独立関数として使用するには、mapメソッドに渡すには変数名を指定する必要があります.

let originalArray = [1,2,3,4,5];

function addOne (num) {
  return num +1; 
}

let newArray = originalArray.map(addOne);

console.log(originalArray); // output : [1,2,3,4,5]
console.log(newArray); // output : [2,3,4,5,6]

ラムダ(矢印関数)を使用できます.

let originalArray = [1,2,3,4,5];
let newArray = originalArray.map(num => num+1);

console.log(originalArray); // output : [1,2,3,4,5]
console.log(newArray); // output : [2,3,4,5,6]

2.働き方

mapメソッドのコールバック関数には、次の3つのパラメータが使用されますが、これらは必須ではありません.array.map((value, index, array) => { ... }); value:既存のアレイの値index:現在処理中のアイテムのインデックスarray:元の呼び出し配列、一般的ではありません(配列が変数に接続されている場合、mapの元の呼び出し配列への参照)

let myArray = [1,2,3];

// 세번째 인수를 사용하여 매핑
myArray.map((value, index, array) => {
  return array[index] + 1;
});

// 원래 배열을 보유하는 변수를 사용
myArray.map((value, index) => {
  return myArray[index] + 1;
});

// 수동으로 배열에 접근하지 않고 map만 사용
myArray.map((value) => {
  return value +1;
});

3.複雑なデータでmapを使用する方法

1.mapを使用してオブジェクトキーを抽出する

オブジェクト配列要素のキー値を抽出できます.

let originalArray = [
  { a: 1, b: 'first' },
  { a: 2, b: 'second' },
  { a: 3, b: 'third' },
];

let newArray = originalArray.map(object => object.b);

console.log(newArray); // output : ['first', 'second', 'third']

各オブジェクトを取得し、bキーの値を返すことで、オブジェクト配列を文字列配列に変換します.

2.2 D配列でmapを使用する方法

地図に地図を重ねて使う.

let myArray = [[1,2,3,],[4,5,6], [7,8,9]];

let newArray = myArray.map(value => value.map(num => num*2));

console.log(newArray); // output: [[2,4,6],[8,10,12], [14,16,18]];

3.条件マッピング:配列内の項目を変更する

たとえば、アレイの10以上の数値を変更したいだけです.

let originalArray = [5, 10, 15, 20];
 
let newArray = originalArray.map(num => {
  if (num >= 10) {
    return num * 2;
  }
  return num;
});
 
console.log(newArray); // output: [5, 20, 30, 40]

3つの演算子を使用すると、より短く書くことができます.

let originalArray = [5, 10, 15, 20];

let newArray = originalArray.map(number => number >= 10? number * 2 : number, );

console.log(newArray); // output: [5, 20, 30, 40]

リファレンス
Array.prototype.map() - JavaScript | MDN
Deep Dive into JavaScript's Array Map Method