TIL 20|アレイ内の方法

1. forEach()

forEach文の原理は、仕様を使用してコールバック関数を記述する場合、このコールバック関数の最初のパラメータに従って配列内の要素を順番に渡し、コールバック関数のたびに実行することです.したがって、コールバック関数のパラメータを作成する必要があります.コールバック関数のパラメータはfor of文の変数と同じ役割を果たす.

const members = ['영훈','윤수','동욱','태호']

members.forEach( member => {
  console.log(`${member}님이 입장하셨습니다.`)
})

// 위 forEach 문은 for of문과 똑같이 동작한다.
/*
for (let member of members){
  console.log(`${member}님이 입장하셨습니다.`)
}
*/

forEachメソッドには、コールバック関数に使用できる2つのパラメータがあります.2番目のパラメータはインデックスです.

members.forEach((member, index)=> {
  console.log(`${index} ${member}님이 입장하셨습니다.`)
})

//다른 배열과 활용할 때 같은 인덱스로 매칭할 때도 사용할 수 있다.
const firstNames = ['영훈','윤수','동욱','태호']
const lastNames = ['강','이','손','성']

firstNames.forEach((firstName, i) => {
  console.log(`${lastNames[i]}${firstName}님이 입장하셨습니다.`)
})

3番目のパラメータは、重複配列自体を渡します.変数内の配列の場合、配列名を使用するだけでよいため、配列名は一般的に使用されません.

members.forEach((member, index, array)=> {
  console.log(`${index} ${member}님이 입장하셨습니다.`)
  console.log(array)
})

2. map()

map法の動作原理はforeachに似ているが,アーク長の結果を用いて新しい配列を返す点が異なる.
アレイを繰り返し操作するだけであれば、繰り返し操作で新しいアレイが必要な場合にmapメソッドを使用します.

const fullNames = firstNames.map((firstName, i) => lastNames[i] + firstName)
console.log(fullNames) // ["강영훈","이윤수","손동욱","성태호"] , 작성한 콜백 함수의 리터값들로 구성된 새로운 배열

//forEach 메소드는 리턴값이 없기 때문에 변수에 담으면 undefined가 출력된다.

*forEachとmapは、コールバック関数の内部で配列を編集できます.

const members = ['영훈','윤수','동욱','태호']
members.forEach( member => {
  console.log(`${member}님이 입장하셨습니다.`)
  members.push('코드잇')
})

無限ループに陥るような気がしますが、元の配列の回数で4回しか繰り返しません.
ただし、繰り返し中に配列の長さが減少すると、繰り返しの長さが減少することに注意してください.

const members = ['영훈','윤수','동욱','태호']
members.forEach( member => {
  console.log(`${member}님이 입장하셨습니다.`)
  members.pop()
}) //두번만 반복한다.

3.filter()とfind()

条件を満たす要素のみを選択して、新しい配列を作成したり、新しい値を返したりします.

const devices = [
  {name:'GalaxyNote', brand: 'Samsung'},
  {name:'MacbookPro', brand: 'Apple'},
  {name:'iPad', brand: 'Apple'},
  {name:'GalaxyWatch', brand: 'Samsung'},
  {name:'iMac', brand: 'Apple'},
  {name:'GalaxyBuds', brand: 'Samsung'},
  {name:'Gram', brand: 'LG'},
  {name:'GalaxyBook', brand: 'Samsung'},
  {name:'SurfacePro', brand: 'Microsoft'},
  {name:'zenBook', brand: 'Asus'},
  {name:'MacbookAir', brand: 'Apple'},
]

const apples = devices.filter((el) => el.brand === 'Apple') // return 문으로 값을 전달하는 것이 아니라 boolean 값을 전달하는 조건식을 리턴한다.

//콜백함수가 리턴하는 조건식이 true가 되는 값만 모아서 새로운 배열을 리턴한다. 
console.log(apples) // brand가 apple인 요소만 담긴 객체 배열 리턴

// filter 메소드는 리턴값이 항상 배열이기 때문에 조건을 만족하는 요소가 하나라도 배열로 리턴한다.
const myLaptop = devices.filter(el => el.name === 'Gram')
console.log(myLaptop)
console.log(...myLaptop) // 따라서 spread 구문을 활용해 배열을 벗겨내는 작업이 필요할 때도 있다.

// 유일한 하나의 값만 찾고 싶을 때에는 filter가 아닌 find 메소드를 사용한다.
const myLaptop = devices.find(el => el.name === 'Gram')
console.log(myLaptop) // {name:'Gram', brand: 'LG'}

filterの戻り値は配列であり、findは値である.同じ配列でメソッドを使用しても、繰り返し回数の違いがある場合があります.findの場合、条件を満たす値が1つしか検索されないため、その値を検索した瞬間に重複が終了します.filterは条件を満たすすべての値を返さなければならないので、配列の長さを繰り返す必要があります.存在しない値を検索しようとするとundefinedが出力されます.

4.some()とeach()

someとeachでは,2つの方法はtrue flaseと呼ばれる2つのタイプのみを返す.
theme():条件を満たす要素が1つ以上あるかどうか、条件を満たす要素が1つしか見つからない場合は、繰り返し終了

const numbers = [1,3,5,7,9]

const someReturn = numbers.some((el) => el > 5) 
console.log('some:', someReturn) // some: true

each():条件を満たさない要素が1つしか見つからない場合は、繰り返し終了

const everyReturn = numbers.every((el) => el > 5)
console.log('every:', everyReturn) // every: false

呼び出しメソッドの配列が空の配列である場合、コールバック関数を実行しなくてもflase、eat、trueがいくつか返されます.

5. reduce()

const numbers = [1,2,3,4]

//현재 함수의 리턴값이 다음의 파라미터 acc로 전달되는 메소드
numbers.reduce((acc, el, i, arr) => {
  return nextAccValue;
}, initialAccValue)

const sumAll = numbers.reduce((acc, el, i)=>{
  console.log(`${i}번 index의 요소로 콜백함수가 동작중입니다.`)
  console.log('acc:', acc)
  console.log('el:',el)
  return acc + el
}, 0) // 만약, 두번째 파라미터를 생략하면 배열의 0번 인덱스가 acc에 들어간다. 

console.log('sumAll:', sumAll) // 10

6. sort()

sort法を用いて配列を並べ替えることができる.sortメソッドに仕様が渡されない場合、デフォルトではUnicodeで定義された文字列順にソートされます.したがって、数値をソートする場合、私たちが一般的に理解している昇順または降順ソートではありません.

const letters = ['D', 'C', 'E', 'B', 'A'];
const numbers = [1, 10, 4, 21, 36000];

letters.sort();
numbers.sort();

console.log(letters); // (5) ["A", "B", "C", "D", "E"]
console.log(numbers); // (5) [1, 10, 21, 36000, 4]

昇順と降順を実現するために、以下のコールバック関数を記述できます.

// 오름차순 정렬
numbers.sort((a, b) => a - b);
console.log(numbers); // (5) [1, 4, 10, 21, 36000]

// 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers); // (5) [36000, 21, 10, 4, 1]

sortメソッドは元の配列の要素をソートするため、ソートすると以前の順序に戻ることはできません.

7. reverse()

逆の方法というように、並び順を逆さまにします.逆メソッドには他のパラメータは存在しないため,単純メソッドを呼び出すだけで配列の順序が逆転する.sortメソッドと同様に、元の配列の要素を反転させることに注意する必要があります.

const letters = ['a', 'c', 'b'];
const numbers = [421, 721, 353];

letters.reverse();
numbers.reverse();

console.log(letters); // (3) ["b", "c", "a"]
console.log(numbers); // (3) [353, 721, 421]