배열

2020. 11. 2. 22:47·BootCamp_Codestates/Pre Tech Blog

 

배열 기초 메소드

  • 배열 요소(element)의 조회, 추가, 삭제, 복사, 분리 하는 법을 이해할 수 있다.
    • unshift, shift, slice, length
  • 자바스크립트의 특정 값이 배열인지 아닌지 판별할 수 있다. Array.isArray
  • 배열의 요소(element)를 추가 및 삭제할 수 있다. push, pop
  • 자바스크립트의 특정 값이 배열에 포함되어 있는지 확인할 수 있다. indexOf, includes

Array 메소드 구성

 

1. 원본 배열을 변경하는 Array.prototype 메소드

 

  • Array.push(): 하나 이상의 요소를 배열의 가장 마지막에 추가합니다.
  • Array.pop(): 배열의 가장 마지막 요소를 제거하고, 그 제거된 요소를 반환합니다.
  • Array.shift(): 배열의 가장 마지막 요소가 아닌 첫 요소를 제거하고, 그 제거된 요소를 반환합니다.
  • Array.unshift(): 하나 이상의 요소를 배열의 가장 앞에 추가합니다.
  • Array.reverse():배열 요소의 순서를 전부 반대로 교체합니다.
  • Array.sort():해당 배열의 배열 요소들을 알파벳 순서에 따라 정렬합니다.
  • Array.splice(인덱스, 갯수, 추가할문자):기존의 배열 요소를 제거하거나 새로운 배열 요소를 추가하여 배열의 내용을 변경합니다.

 

2. 원본 배열은 변경하지 않고 참조만 하는 메소드

 

  • Array. join(): 배열 => 하나의 문자열로 반환. 인수로 전달받은 문자열은 배열 요소 사이를 구분 짓는 구분자로 사용되는데, 인수가 없으면 기본값으로 쉼표(,)를 구분자로 사용합니다. toString()보다 범용성이 높다.
  • Array.slice(): 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 모든 배열 요소를 추출하여 새로운 배열을 반환합니다. 인수로 종료 인덱스가 전달되지 않으면 마지막 배열 요소까지 모두 추출합니다. 문자열에도 같은 메소드가 있음.
  • Array.concat(): 해당 배열의 뒤에 인수로 전달받은 배열을 합쳐서 만든 새로운 배열을 반환합니다.
  • Array.toString(): 해당 배열의 모든 요소를 하나의 문자열로 반환합니다. 이때 배열 요소의 사이에는 자동으로 쉼표(,)가 삽입됩니다.

 

3. 추가 메소드

  • Array[인덱스]: 인덱스로 배열 항목 접
  • Array.indexOf(항목): 전달받은 값과 동일한 배열 요소가 처음으로 등장하는 위치의 인덱스를 반환함.
  • Array.lastIndexOf(항목): 전달받은 값과 동일한 배열 요소가 마지막으로 등장하는 위치의 인덱스를 반환함.
  • Array.includes(항목): 해당 항목 포함하는지 boolean 값으로 반환함.

 

Kinda Experiment

addToBack

removeFromBack

addToFront

removeFromFront

 

배열에 특정 단어 유무 검사하기

 

존재 여부 확인하기

 

배열의 요소 포함 여부 함수 만들기

includes 메소드의 경우 호환성이 낮기 때문에 인덱스와 포함여부를 확인할 수 있는 indexOf 가 더 유용하다.

 


 

추가설명!!!!

 

slice()

slice(n+1)

//0번째부터 (n+1)개의 요소를 삭제하고, n+1번째부터 요소들로 새로운 배열을 만든다.

 

주의사항

slice에 두가지 매개변수가 들어갈 경우,

slice(a,b): a번째 요소부터 b번째 요소까지 잘라내어 새로운 배열을 만든다.

 

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2, 4));

// expected output: Array ["camel", "duck"]

'BootCamp_Codestates > Pre Tech Blog' 카테고리의 다른 글

Scope  (0) 2020.11.03
객체  (0) 2020.11.03
디버깅이란?  (0) 2020.10.28
반복문  (0) 2020.10.28
조건문_2020.10.26  (0) 2020.10.27
'BootCamp_Codestates/Pre Tech Blog' 카테고리의 다른 글
  • Scope
  • 객체
  • 디버깅이란?
  • 반복문
JTB
JTB
웹/앱 개발 정보를 공유하고 있습니다.
  • JTB
    JTechBlog
    JTB
  • 전체
    오늘
    어제
    • All About Programming;) N
      • Computer Science
        • Terminology and Concepts
        • Network
        • Operating System
        • Database
        • Data Structure
      • Frontend
        • Javascript Essentials
        • Perfomance Optimization
        • JS Patterns
        • Next.js
        • Flutter
      • Backend
        • Node.js
      • DevOps
        • Docker & Kubernetes
      • Coding Test N
        • LeetCode N
        • Programmers
      • Tech Books & Lectures
        • Javascript_Modern JS Deep d..
        • Network_IT 엔지니어를 위한 네트워크 입문
      • Projects
        • PolyLingo_2025
        • Build Your Body_2024
        • JStargram_2021
        • Covid19 Tracker_2021
        • JPortfolio_2021
      • BootCamp_Codestates
        • TIL
        • TILookCloser
        • Pre Tech Blog
        • IM Tech Blog
        • Daily Issues and DeBugging
        • First Project
        • Final Project
        • Sprint Review
        • Good to Know
        • Socrative Review
        • HTML & CSS
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

    • 글쓰기
    • 관리
  • 공지사항

  • 인기 글

  • 태그

    Time complexity and Space complexity
    How memory manage data
    VoiceJournal
    자바스크립트 딥다이브
    mobile app
    스코프
    프론트엔드 성능 최적화 가이드
    TCP/IP
    Network
    JavaScript
    js pattern
    structure of os
    DOM
    CPU scheduling algorithm
    Threads and Multithreading
    Shared resources
    자바스크립트
    모던 자바스크립트 Deep Dive
    딥다이브
    Binary Tree BFS
    커리어
    Operating System
    Data Structure
    need a database
    database
    이벤트
    indie hacker
    leetcode
    polylingo
    testing
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.5
JTB
배열
상단으로

티스토리툴바