[JS] Array 01

chooing·2022년 5월 7일
0

JavaScript

목록 보기
1/3

Array

  • Array는 Object이다.
  • 배열은 0부터 시작한다.
  • [ ]는 배열의 리터럴한 표현이다.

값 추가, 삭제

  • unshift: 배열 맨 앞 추가
  • shift: 배열 맨 앞 삭제
  • push: 배열 맨 뒤 추가
  • pop: 배열 맨 뒤 삭제
const color = ['🟡','🟣','🟢'];

color.unshift('🔴'); // unshift
console.log(color); // ['🔴', '🟡','🟣','🟢']

let first = color.shift(''); // shift
console.log(color, first); // ['🟡','🟣','🟢'], '🔴'

color.push('🔵'); // push
console.log(color); // ['🟡','🟣','🟢','🔵']

let last = color.pop(''); // pop
console.log(color, first); // ['🟡','🟣','🟢'], '🔵'

배열 → 문자열, 배열 ← 문자열

join

배열.join(구분문자);

  • 배열의 값들을 지정한 구분문자로 연결하여 하나의 문자열로 만든다.
  • 기존 배열에 영향을 끼치지 않는다
  • 결과값을 반환하기 때문에 변수에 저장해 호출한다.
const heart = ['💛', '💚', '💙'];

let joinHeart01 = heart.join();
console.log(joinHeart01); // 💛,💚,💙

let joinHeart02 = heart.join('');
console.log(joinHeart02); // 💛💚💙

let joinHeart03 = heart.join('&');
console.log(joinHeart03); // 💛&💚&💙

주로 이런 식으로 사용된다.

const phone = ['010', '1111', '2222'];
const phoneJoin = numbers.join('-');
console.log(phoneJoin); // 010-1111-2222

split

문자열.split(구분문자);

  • 문자열을 구분문자 기준으로 구분하여 배열로 만든다.
const phoneSplit01 = '010-1111-2222'.split();
console.log(phoneSplit01); // ['010-1111-2222']

const phoneSplit02 = '010-1111-2222'.split('');
console.log(phoneSplit02); // ['0', '1', '0', '-', '1', '1', '1', '1', '-', '2', '2', '2', '2']

const phoneSplit03 = '010-1111-2222'.split('-');
console.log(phoneSplit03); // ['010', '1111', '2222']

fill

배열.fill(value);

  • 배열의 모든 값을 하나의 값으로 채운다.
  • 기존 배열의 내용을 바꾼다. (반환 X)

배열.fill(value, startNum, endNum);

  • startNum부터 endNum 전 까지 채워진다.
  • 음수를 넣으면 뒤에서 부터 채워진다.
  • endNum을 생략할 수 있다. (default=0)
const fiveApple = Array(5).fill('🍎');
console.log(fiveApple); // ['🍎','🍎','🍎','🍎','🍎'];

fiveApple.fill('🍋', 1, 4);
console.log(fiveApple); // ['🍎', '🍋', '🍋', '🍋', '🍎']

fiveApple.fill('🍇', -3);
console.log(fiveApple); //['🍎', '🍋', '🍇', '🍇', '🍇']

원하는 값 찾거나 확인하기

find

  • 배열에서 맨 처음으로 조건에 해당하는 값을 찾아낸다.
  • 조건에 해당하는 값을 찾아내면 이후의 값들은 무시하고 검색을 끝낸다.
const blues = ['💙','🔵','🟦','🔷','🔵'];
const findCircle = blues.find((figure) => figure ==='🔵');
console.log(findCircle); // 🔵

findIndex

배열에서 맨 처음으로 조건에 해당하는 값의 인덱스(위치)를 찾아낸다.

const blues = ['💙','🔵','🟦','🔷','🔵'];
const findIndexCircle = blues.findIndex((figure) => figure ==='🔵');
console.log(findIndexCircle); // 1

filter

  • 배열에서 조건에 해당하는 모든 값을 찾아낸다.
  • 조건에 해당하는 모든 값을 찾아내기 때문에 배열 전체를 순회하여 검색한다.
  • 결과 값은 배열로 반환된다.
const blues = ['💙','🔵','🟦','🔷','🔵'];
const findCircles = blues.filter((figure) => figure ==='🔵');
console.log(findCircles); // ['🔵', '🔵']

indexOf

배열.indexOf(value)

  • 배열에 해당 value의 첫번째 인덱스를 반환한다.
  • value가 배열에 없으면 -1을 반환한다.

배열.indexOf(value, fromIndex)

  • 배열의 formIndex부터 value를 검색한다.
  • formIndex가 음수면 뒤에서 부터 검색한다.
  • fromIndex을 생략할 수 있다. (default=0)
const setMenu =['🍟','🍔','🥤','🍗','🍔'];

const indexOfburger01 = setMenu.indexOf('🍔');
console.log(indexOfburger01); // 1

const indexOfburger02 = setMenu.indexOf('🍔', 3);
console.log(indexOfburger02); // 4

const indexOfPizza = setMenu.indexOf('🍕');
console.log(indexOfPizza); //-1

includes

배열.includes(value)

  • 배열이 value를 가지고 있는지 true, false로 여부를 확인한다.
  • value가 문자열일 경우 대소문자를 구분한다.

배열.includes(value, fromIndex)

  • 배열의 formIndex부터 value를 검색한다.
  • formIndex가 음수면 뒤에서 부터 검색한다
  • fromIndex을 생략할 수 있다. (default=0)
const setMenu =['🍟','🍔','🥤','🍗','🍔'];

const includesDrink01 = setMenu.includes('🥤');
console.log(includesDrink01); //true

const includesDrink02 = setMenu.includes('🥤', -3);
console.log(includesDrink02); //true

const includesDrink03 = setMenu.includes('🥤', 3);
console.log(includesDrink03); //false

const includesRice = setMenu.includes('🍙');
console.log(includesRice); //false

응용하기

const lionFE2 = Array(70).fill('🦁');
console.log(lionFE2);

lionFE2.unshift('🦄');
lionFE2.push('🦄');
console.log(lionFE2);

lionFE2.shift();
lionFE2.pop();
console.log(lionFE2);

const noLionFE2 = ['🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦄', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦄', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁', '🦁'];

noLionFE2.includes('🦄');
noLionFE2.indexOf('🦄');
noLionFE2.indexOf('🦄',22);

noLionFE2.find((lion) => lion !=='🦁');
noLionFE2.findIndex((lion) => lion !=='🦁');

noLionFE2.filter((lion) => lion !=='🦁');
const lionFE2 = noLionFE2.filter((lion) => lion ==='🦁');

profile
멋찐 프론트엔드 개발자가 되기 위해 공부 중입니다

2개의 댓글

comment-user-thumbnail
2022년 5월 10일

🦁❤

답글 달기
comment-user-thumbnail
2022년 5월 10일

이해가 한 번에 쏙 되네요! 저장하고 헷갈릴 때마다 보러 오겠습니다~!

답글 달기