📔
web_study
  • JavaScript
  • 엘리_자바스크립트
    • 자바스크립트 기본
      • 클래스 예제와 콜백함수
      • 연산자 boolean
      • 함수 정의, 호출 그리고 콜백
      • 변수타입과 object 차이점
    • JavaScript async 와 await
    • JavaScript Promise
    • 자바스크립트 callback
    • 자바스크립트 json
    • 유용한 10가지 배열 함수들
    • 자바스크립트 배열(array)
    • 자바스크립트 object
    • 자바스크립트 (class vs object) 객체지향 언어
    • 자바스크립트 함수
    • 자바스크립트 연산.반복문
    • 데이터타입, data types, let vs var, hoisting
    • script async 와 defer의 차이점 콘솔 출력
    • 자바스크립트역사
  • 생활코딩
    • 재귀함수
    • 정규 표현식
    • 객체지향
      • 객체지향 프로그래밍
      • 생성자와 new
      • 전역객체
      • this
      • 상속
      • prototype
      • 표준 내장 객체의 확장
      • object
      • 데이터 타입
      • 참조
    • 함수지향
      • 유효범위
      • 값으로서의 함수와 콜백
      • 클로저
      • arguments
      • 함수의 호출
    • UI API, 문서
    • 모듈
    • 객체
    • 배열
    • 함수
    • 반복문
    • 조건문
    • 숫자와문자
    • 변수
    • 비교
  • 노마드 코더
    • Getting the Weather part One Geolocation
    • Image Background
    • TO DO List
    • Saving the User Name
    • Clock part One
    • 조건문 ( if , else, and, or)
    • evnet handlers
    • Function
    • Objects
    • Arrays
    • Variable(변수!)
    • Javascript
  • javascript30
    • Dram Kit
    • clock
    • Css Javascript
    • Array Cardio
    • flex panels
    • type ahead
    • Canvas Draw
    • Speech Synthesis
    • Whack A Mole
  • web standard
    • script 부분
    • form부분
    • 웹접근성
    • <meta>
  • 자바스크립트_이론
    • 기본지식(JAVASCRIPT)
    • 기본지식(CSS)
    • 기본지식(HTML)
    • 기본지식(HTTP)
    • Dom
    • 라이브러리, 프레임워크, 플로그인
Powered by GitBook
On this page
  • 자료구조
  • object 와 자료구조의 차이점
  • 배열
  • Index position
  • Looping over an array
  • Addition, deletion, copy(추가, 빼기, 복사 방법)
  • Searching / includes
  • lastIndexOf

Was this helpful?

  1. 엘리_자바스크립트

자바스크립트 배열(array)

Previous유용한 10가지 배열 함수들Next자바스크립트 object

Last updated 3 years ago

Was this helpful?

자료구조

비슷한종류의 데이타들을 묶어서 저장하는것

object 와 자료구조의 차이점

배열

  • index는 0 부터 시작됨

  • 삽입, 삭제가 편리함

//1. Delcaration 배열 선언 방법
const arr1 = new Array();
const arr2 = [1, 2]; // 흔하게 쓰이는 방법

Index position

// 2. Index position
const fruits = ['🍒', '🍎'];
console.log(fruits); //🍒, 🍎
console.log(fruits.length); // 2
// key 라는 string을 이용해서 key에 상환하는 값을 받아올 수 있음 
// 배열은 인덱스 번호를 적어주면 그값을 상환할 수 있음
console.log(fruits['0']) // 🍒
console.log(fruits['1']) // 🍎
// 제일 마지막 index를 받아오는 방법
console.log(fruits[fruits.length - 1]); // 🍎  0 부터 시작하기때문에 -1 을 해주면 마지막 인자를 출력함

Looping over an array

// 3. Looping over an array 
// print all fruits 과일(🍒,🍎) 모두 출력 하기 

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

// b. for of
for (let fruit of fruits) {
    console.log(fruit);
}

// c. forEach
fruits.forEach((fruit) => console.log(fruit)); // 🍒,🍎
//forEach 는 array에 들어있는 값(value)마다 callback함수를 실행한다.
// forEach (callbackfn: value , index, array ) -> 보통은 array는 받아오지 않음

Addition, deletion, copy(추가, 빼기, 복사 방법)


// push: add an itemto the end(뒤에 추가)
fruits.push('🥝', '🍍'); 
console.log(fruits); // 🍒,🍎,🥝,🍍


// pop: remove an item from the end (뒤에 빼기)
fruits.pop(); // 🍒,🍎,🥝
fruits.pop(); // 🍒,🍎
console.log(fruits); 

// unshift: add an item to the benigging (앞에 추가)
fruits.unshift('🍇', '🍏'); 
console.log(fruits); // 🍇, 🍏,🍒,🍎

// shift: remove an item to the benigging (앞에 빼기)
fruits.shift(); // 🍏,🍒,🍎
fruits.shift(); // 🍒,🍎
console.log(fruits);

// note!! shift, unshfit are slower than popm push
// shift, unshfit (앞에 추가,빼기)는 push,pop(뒤에 추가,빼기)보다 훨씬 느림
// 뒤에서 추가,빼기 하는것은 기존의 배열의 아이템들을 건드리지 않고 뒤에 빈공간에 생성하고, 없애고 하기때문
// 앞에서 데이터를 넣기위해는 3번째 빈데이터에 넣고 1번데이터를 2번으로 넣고 그다음에 새로운것을 넣어야함 빼기는 반대로 
// pop,push를 사용하는것이 좋다. 

// splice:remove an item by index position
// 선택한 index만 지우는법 
fruits.push('🍊', '🍑', '🍈');
console.log(fruits);  // 🍒, 🍎 ,🍊, 🍑,🍈
// 지우는 갯수를 설정해주지 않으면 지정한 인덱스부터 모든인덱스들을 지워져 버림 
// fruits.splice(index 번호, 지우는갯수);
fruits.splice(1, 1);
console.log(fruits); // 🍒 ,🍊, 🍑,🍈
fruits.splice(1, 1, '🍇', '🍍', '🥝');  // 🍒 ,🍇, 🍍, 🥝, 🍑,🍈 
// 해당 인덱스(🍊)가 지워지고 그자리에  '🍇', '🍍', '🥝' 추가된다.
console.log(fruits);

//combine two arrays
const fruits2 = ['🍋', '🥭'];
//concat을 호출하는 배열에 새로호출하는 array items 합친다.
const newFruits = fruits.concat(fruits2);
console.log(newFruits); // 🍒 ,🍇, 🍍, 🥝, 🍑,🍈 ,🍋, 🥭

Searching / includes

// indexOf: find the index
console.clear();
console.log(fruits); // 🍒 ,🍇, 🍍, 🥝, 🍑,🍈 ,🍋, 🥭
console.log(fruits.indexOf('🍇')); // 1
console.log(fruits.indexOf('🍍')); // 3
console.log(fruits.indexOf('🍊')); // 배열안에 존재하지 않는 값은 -1로 입력이됨 

// includes
console.log(fruits.includes('🍍')); //true
console.log(fruits.includes('🍊')); //false

lastIndexOf

// IndexOf는 제일 첫번째 아이템을 리턴하고 출력하게됨
// lastIndexOf는 반대로 제일마지막에 있는 값을 출력하게된
console.clear();
fruits.push('🍇'); // 🍒 ,🍇, 🍍, 🥝, 🍑,🍈 ,🍋, 🥭, 🍇
console.log(fruits);
console.log(fruits.indexOf('🍇')); // 1 
console.log(fruits.lastIndexOf('🍇')); // 8