TIL 003 | JavaScript Array.prototype.map()

18826 ワード
JavaScript js web WeCode TIL Map テキストリンク

ユーザーがユーザーにアクセスできるようにする方法
  • コード入力の量を大幅に減らすことができる.
  • コードの読み取り可能性が向上しました.
  • の既存の配列が保持されているため、コードの理解が容易である.

    • 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
    InnoDBストレージエンジン(engine)メインスレッド(master thread)ワークフロー分析
    構造関数はvirtualでなければなりません.そうしないとメモリが漏れます.