2-12. 배열 내장 함수

2022. 6. 20. 14:40React/한입 크기로 잘라 먹는 리액트(React.js)

세 함수는 같은 결과를 낸다. 같은 기능이다.

const arr = [1, 2, 3, 4];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

arr.forEach(function (elm) {
  console.log(elm);
});

arr.forEach((elm) => console.log(elm));

for문을 이용하여 배열을 나타낼 수 있지만,

forEach문을 사용해서 함수를 나타낼 수 있는데 위의 두 방법과 같이 나타낼 수 있다.

 

그럼, 배열 값에 값을 곱하려면 어떻게 나타낼 수 있을까?

먼저 기본적으로 push를 사용해서 넣을 수 있다.

const arr = [1, 2, 3, 4];
const newArr = [];

arr.forEach(function (elm) {
  newArr.push(elm * 2);
}); 

console.log(newArr);

이것을 map을 나타내서 나타낼 수도 있다.

const arr = [1, 2, 3, 4];
const newArr = arr.map((elm) => {
  return elm * 2;
});

console.log(newArr);

 

숫자를 포함하는지 안하는지도 확인이 가능하다.

1. forEach함수 사용

const arr = [1, 2, 3, 4];

let number = 3;

arr.forEach((elm) => {
  if (elm === number) {
    console.log(true);
  }
});

2. includes 함수 사용

console.log(arr.includes(number));

 

하지만 숫자, 문자의 비교일 경우 false를 출력한다.

 

3. indexOf 함수를 사용하여 포함 숫자가 어디에 있는지 찾을 수 있다.

만약 없는 숫자라면 -1을 출력한다.

 

4. 문자의 경우 findIndex를 사용하여 비교 가능하다.

const arr = [
  { color: "red" },
  { color: "black" },
  { color: "blue" },
  { color: "green" }
];

console.log(arr.findIndex((elm) => elm.color === "green"));

그러나 아래와 같이도 표현할 수 있다.

const arr = [
  { color: "red" },
  { color: "black" },
  { color: "blue" },
  { color: "green" },
  { color: "blue" }
];

console.log(
  arr.findIndex((elm) => {
    return elm.color === "blue";
  })
);

 

그리고, 똑같은 문자가 두개라면 첫번째 문자의 위치를 출력한다.

 

이렇게도 나타낼 수 있다.

const arr = [
  { color: "red" },
  { color: "black" },
  { color: "blue" },
  { color: "green" },
  { color: "blue" }
];

const idx = arr.findIndex((elm) => {
  return elm.color === "blue";
});

console.log(idx);

이렇게 엘리먼트를 나타낼 수도 있다.

 

배열 필터링

1. filter함수를 이용하여 출력하면 된다.

const arr = [
  { num: 1, color: "red" },
  { num: 2, color: "black" },
  { num: 3, color: "blue" },
  { num: 4, color: "green" },
  { num: 5, color: "blue" }
];

console.log(arr.filter((elm) => elm.color === "blue"));

 

배열을 자를 수 있는 내장함수

1. slice

const arr = [
  { num: 1, color: "red" },
  { num: 2, color: "black" },
  { num: 3, color: "blue" },
  { num: 4, color: "green" },
  { num: 5, color: "blue" }
];

console.log(arr.slice(0, 2));

이렇게 두개의 항목을 출력하는데, 

첫번째 인자 begin, 두번째 인자 end라고 하는데, 

slice는 end -1까지 함

 

붙이기

1. concat 사용하기

const arr1 = [
  { num: 1, color: "red" },
  { num: 2, color: "black" },
  { num: 3, color: "blue" }
];

const arr2 = [
  { num: 4, color: "green" },
  { num: 5, color: "blue" }
];

console.log(arr1.concat(arr2));

 

배열 정렬

1. sort는 원본 배열 정렬

let chars = ["나", "다", "가"];

chars.sort();

console.log(chars);

 

숫자 정렬

숫자 정렬을 sort를 사용해 하려고 했지만, sort는 문자열 중심이기 때문에 앞에 숫자가 0먼저, 1먼저, 2먼저, 3 이렇게 정렬이 된다. 

이렇게 만들면 정상적으로 숫자도 정렬이 된다.

 

배열 내 모든것을 함치는 것

1. join 함수 사용

 

'React > 한입 크기로 잘라 먹는 리액트(React.js)' 카테고리의 다른 글

3-2. 삼항 연산자(조건문 한 줄로 끝내기)  (0) 2022.06.21
3-1. Truthy & Falsy  (0) 2022.06.21
2-11. 반복문  (0) 2022.06.17
2-10. 배열  (0) 2022.06.17
2-9. 객체  (0) 2022.06.17