JavaScript 배열 내장 함수

석준수·2022년 6월 10일
0

JavaScript

목록 보기
9/9

배열 내장함수

반복문에서 말했듯이 배열도 다른 자료형과 같이 반복문을 통해 반복할 수 있습니다
하지만 배열 내장함수를 사용하면 좀 더 쉽게 사용가능 합니다

foreach

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

arr.forEach(function (elm) {
  console.log(elm * 2);
}); // 2 4 6 8 10 

foreach 반복문은 오직 Array 객체에서만 사용가능한 메서드
배열의 요소들을 반복하여 작업을 수행 가능(배열 반복문)

map

const arr = [1, 2, 3];
const newarr = arr.map((elm) => {
  return elm * 2;
});
console.log(newarr); // 2 4 6 

map 함수는 forEach와 마찬가지로 Array의 각 요소를 순회하여 반복하고 callback 함수 실행
callback 함수에서 리턴되는 값을 배열로 생성

쉽게 말해서 배열의 모든 요소를 순회하면서 콜백함수 내용을 실행하고 리턴되는 값을 새로운 배열 생성

includes

const arr = [1,2,3,4];
let number = "3";
console.log(arr.includes(number)); // false

배열에 자신이 원하는 타입이 있는지 논리형으로 찾는 함수

indexOf

const arr = [1,2,3,4];
let number = 3;
console.log(arr.indexOf(number)); // 2

원하는 항목이 배열의 몇번째 원소인지 찾아주는 함수

findIndex

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

console.log(arr.findIndex((elm) => elm.color === "red")); // 0

배열안에 구조가 객체,배열이라면 indexof로 찾을 수 없고 findIndex함수를 이용해서 찾을 수 있음
콜백함수를 이용하여 배열내에 이제 객체의 인덱스 번호를 찾을 수 있음

find

const arr = [
  { color1: "red" },
  { color2: "blue" },
  { color3: "green" },
  { color4: "gray" }
];

console.log(arr.find((elm) => elm.color3)); // {color3: "green"}

findIndex 처럼 배열 안에 값들을 찾는 함수이자만 인덱스 번호를 찾지 않고 값을 찾음

filter

const arr1 = [
  { color: "red" },
  { color: "blue" },
  { color: "green" },
  { color: "gray" }
];
console.log(arr1.filter((elm) => elm.color));

filter 함수는 전달한 콜백함수를 반환하는 모든 요소를 배열로 반환하는 함수

slice

const arr1 = [
  { color: "red" },
  { color: "blue" },
  { color: "green" },
  { color: "gray" }
];
console.log(arr1.slice(0, 3)); // red ,blue,green

slice 함수는 배열을 잘라낼 때 사용하는 함수 , 사용법은 (시작 번호,종료 번호)
실제로 잘리는 것은 0,3이라 하면 0,1,2 까지 잘림

concat

const arr1 = [
  { color: "red" },
  { color: "blue" },
  { color: "green" },
  { color: "gray" }
];
const arr2 = [{ color: "red1" }, { color: "blue1" }];
console.log(arr1.concat(arr2));

concat 함수는 여러개의 배열을 하나의 배열로 합쳐줍니다.

sort

let test = ["파", "하", "가", "나", "다", "라"];
let number = [1,2,10,30,40,7,8,9];
console.log(test.sort()); // 가 나 다 라 파 하
console.log(number.sort()); // 10, 2, 30, 40, 7, 8, 9

sort 함수는 순서대로 정렬
주의할점은 문자열 기준으로 정렬 되기 때문에 숫자는 작은 순서대로 정렬하기 힘듬

sort 오름차순 정렬

let number = [1, 2, 10, 30, 40, 7, 8, 9];
const compare = (a, b) => {
  if (a > b)  return 1;
  if (a < b)  return -1;
  return 0;
};
console.log(number.sort(compare));

join

let number = ["석준수", "님", "안", "녕", "하", "세", "요"];
console.log(number.join("")); // 석준수님 안녕하세요

배열의 값들을 문자열 형태로 모두 다 합치는 함수

profile
석준수 입니다.

0개의 댓글