▼▼TIL 8・Javascript配列内蔵関数1

13754 ワード
JavaScript TIL テキストリンク
  • forEach
  • map
  • indexOf
  • findIndex
  • find

    • 1. forEach

    forEach 함수はfor文の代わりに使用できます.
    次のような配列があると仮定します.
    const fruits = ['apple', 'banana', 'melon', 'orange', 'strawberry'];
    このとき、アレイ内のすべての要素を出力したい場合は、for문を使用して出力することができる.
    const fruits = ['apple', 'banana', 'melon', 'orange', 'strawberry'];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
    ただし、配列内蔵関数forEach 함수を使用して、より簡潔なコードを記述することができる.
    const fruits = ['apple', 'banana', 'melon', 'orange', 'strawberry'];

fruits.forEach(fruit => {
  console.log(fruit);
});

    2. map

    map 함수は、アレイ内の要素を変換するために使用される.
    要素を変換して新しい配列を生成します.
    次の配列がある場合は、各要素の二乗で新しい配列を作成します.
    const array = [1, 2, 3, 4, 5, 6, 7, 8];

const squared = array.map(n => n * n);
console.log(squared);

    3. indexOf

    indexOfは、必要な値が配列のいくつか目であることを見出す関数です.
    const fruits = ['apple', 'banana', 'melon', 'orange', 'strawberry'];

const index = fruits.indexOf('strawberry');
console.log(index);
    結果値は4です.(配列のインデックスは0～世紀)

    4. findIndex


    配列の値がオブジェクトまたは配列の場合、indexOf関数では見つかりません.findIndex 함수を使用します.
    const fruits = [
  
  { id: 1,
    name: 'apple',
    color: 'red' },
  
  { id: 2,
    name: 'banana',
    color: 'yellow' },
  
  { id: 3,
    name: 'melon',
    color: 'green' },
  
  { id: 4,
    name: 'orange',
    color: 'orange' },
  
  { id: 5,
    name: 'strawberry',
    color: 'red' },
];

const index = fruits.findIndex(fruit => fruit.id === 4);
console.log(index);
    結果値は3です.

    5. find

    find 함수は、findIndex関数が返すインデックス値ではなく、要素値そのものを返します.
    const fruits = [
  
  { id: 1,
    name: 'apple',
    color: 'red' },
  
  { id: 2,
    name: 'banana',
    color: 'yellow' },
  
  { id: 3,
    name: 'melon',
    color: 'green' },
  
  { id: 4,
    name: 'orange',
    color: 'orange' },
  
  { id: 5,
    name: 'strawberry',
    color: 'red' },
];

const fruit = fruits.find(fruit => fruit.id === 4);
console.log(fruit);
    結果値は、要素値がオブジェクトであるため、{ id: 4, name: 'orange', color: 'orange' }です.
    Go言語のビルド生活を drone.ioで幸せに暮らす #golang
    テンプレートメソッドアレイ